angularJs学习笔记（二）

ng-model 指令

用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。
双向绑定，在修改输入域的值时， AngularJS 属性的值也将修改：

---

注册模块和控制器

   // 注册模块 通过module函数，// 第一个参数是这个模块的名字// 第二个参数是这个模块所依赖的模块, 如果不依赖任何模块也必须传递第二个参数，如果没有传递第二个参数，angular.module就不是创建一个模块,而是找到一个模块// angular.module 返回 刚刚创建的模块对象   var app=  angular.module('myApp',[]);// app.controller 方法用于创建一个控制器，所创建的控制器属于myApp模块// 控制器函数的参数中有一个$scope// angular.module('myApp').controller('DemoController',["$scope", function($scope) {//   // 当控制器执行时会自动执行的函数//   $scope.user = {};//   $scope.user.name = '张三';  $scope不仅仅可以往视图中暴露数据，还可以暴露行为//   $scope.show = function() {// console.log($scope.user);//   }];// });

$scope不仅仅可以往视图中暴露数据，还可以暴露行为

———-## 案例解析 ##

姓名：

{{name}}

HTML 页面中 ng-xxx 的属性称之为指令（Directive）；ng-app 指令告诉 AngularJS，body元素是 AngularJS 应用程序管理的边界；ng-model 指令把文本框的值绑定到变量 name 上；{{ name }} 表达式就是把应用程序变量 name 绑定到某个段落的 **innerHTML。**## 总结 ##1. Angular 最大程度的减少了页面上的 DOM 操作；2. 让 JavaScript 中专注业务逻辑的代码；3. 通过简单的指令结合页面结构与逻辑数据；4. 通过自定义指令实现组件化编程；5. 代码结构更合理；6. 维护成本更低；7. Angular 解放了传统 JavaScript 中频繁的 DOM 操作## MVC模型 ##

主要目的是为了解决应用程序展示结构，业务逻辑之间的紧耦合关系

• 模型（model）：处理数据和业务逻辑
• 视图（view）：友好的界面向用户显示数据
• 控制器（controller）：组织调度相应的处理模型

模块和控制器

模块：是对页面的功能业务划分，这样更好的实现模块化的编程。创建的模块的时候，要指定两个参数：第一个是模块的名字，第二个参数指的是该模块依赖那些模块，没有的话传入[]。
控制器：

 angular.module('OneApp', [])    .controller('HelloController', [    '$scope',    function($scope) {        $scope.p = {            name: 'zhangsan'        };    }]);

三个职责：
1. 为应用中的模型设置初始状态
2. 通过scope对象把数据模型或函数行为暴露给视图3.监视模型的变化，做出相应的动作,scope.$watch(now(新数据),old（老数据）)

$scope(上下文模型)

1. 视图和控制器之间的桥梁
2. 用于在视图和控制器之间传递数据
3. 利用$scope**暴露数据模型**（数据，行为）
4. Scope 是一个对象，有可用的方法和属性。
5. 修改了视图，模型和控制器也会相应更新

指令Directive

前缀为 ng- 这种属性称之为指令
作用就是为 DOM 元素调用方法、定义行为绑定数据等，简单说：当一个 Angular 应用启动，Angular 就会遍历 DOM 树来解析 HTML，根据指令不同，完成不同操作。
自定义属性：data-开头，那么：data-ng-也是可以的。

ng-class指令

ng-class指令可以设置一个键值对，用于决定是否添加一个特定的类名，键为class名，值为bool类型表示是否添加该类名。track by $index表示可以重复。

<ul class="messages"><li ng-repeat="item in messages track by $index" ng-class="{red:item.read}">    {{item.content}}</li></ul>

ng-show/ng-hide 指令

ng-show/ng-hide指令会根据属性值去确定是否展示当前元素，例如ng-show=false则不会展示该元素。元素的显示或隐藏是通过改变CSS的display属性值来实现的。

ul class="messages"><li ng-repeat="item in messages track by $index" ng-show="item.read">    {{item.content}}</li></ul>

ng-if：根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if的表达式的值是false，那对应的元素将会从DOM中移除，否则生成一个新的元素插入DOM中。ng-if同no-show和ng-hide指令最本质的区别是，它不是通过CSS显示或隐藏DOM节点，而是删除或者新增结点。

<div ng-if="2+2===5">      Won't see this DOM node, not even in the source code      </div>      <div ng-if="2+2===4">      Hi, I do exist      </div>

当一个元素被ng-if从DOM中移除，同它关联的作用域也会被销毁。而且当它重新加入DOM中时，会通过原型继承从它的父作用域生成一个新的作用域。也就是说ng-if会新建作用域，而ng-show和ng-hide则不会。

ng-link/ng-src 指令

ng-link/ng-src指令用于解决当链接类型的数据绑定时造成的加载BUG，如

<!-- 浏览器在解析HTML时会去请求{{item.url}}文件 -->    <img src="{{item.url}}">    <!-- 可以使用ng-src解决该问题 -->    <img ng-src="{{item.url}}">

过滤器

主要用途就是一个格式化数据的小工具，
一般用于服务端存储的数据转换为用户界面可以理解的数据

常用的过滤器

date 过滤器主要用于时间格式的转换：

 <span>{{'1288323623006' | date:"MM/dd/yyyy 'at' h:mma"}}</span>

limitto 过滤器
用于限制一个字符串或数组展示的长度：

 <ul class="messages"><li ng-repeat="item in messages | limitTo:-2">    {{item.content | limitTo:2 }}</li></ul>

filter 过滤器
filter过滤器会根据设置的检索数据过滤未匹配到的数据内容，也可以通过设置检索条件为一个对象，实现在指定属性中检索

<ul class="messages"><li ng-repeat="item in messages | filter:{content:123}">    {{item.content}}</li></ul>

通过自定义一个比较函数，在前台为filter指定第二个参数实现：

<ul class="numbers"><li ng-repeat="item in numbers | filter:1:comparator">    {{ item }}</li></ul> // js代码 $scope.comparator = function (source,target) {return source > target;};