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(上下文模型)
- 视图和控制器之间的桥梁
- 用于在视图和控制器之间传递数据
- 利用$scope**暴露数据模型**（数据，行为）
- Scope 是一个对象，有可用的方法和属性。
- 修改了视图，模型和控制器也会相应更新
指令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;
};