ng-app 属性声明所有被其包含
的内容都属于这个 AngularJS 应用

 

只有被具有 ng-app 属性的 DOM 元素包含的元素才会受 AngularJS 影响

 

视图理解为模型状态的映射。当客户端的数据模型发生变化时，视图就能反映出这些变化

 

MVC 是一种软件架构设计模式，它将表现从用户交互中分离出来。通常来讲，模型中包含应用的数据和与数据进行交互的方
法， 视图将数据呈献给用户，而 控制器则是二者之间的桥梁

 

当 AngularJS 认为某个值可能发生变化时，它会运行自己的事件循环来检查这个值是否变 “ 脏 ”，这个过程被称作脏检查（ dirty checking ）

为了表示内部和内置的库函数， Angular 使用 $ 预定义对象，只要遇到 $ 符号，你都可以只把它看作一个 Angular 对象

 

数据模型对象（ model object ）是指 $scope 对象。 $scope 对象是一个简单的 JavaScript 对象，其中的属性可以被视图访
问，也可以同控制器进行交互。

 

双向数据绑定（ bi-directional ）意味着如果视图改变了某个值，数据模型会通过脏检查观察到这个变化，而如果数据模型改变了某
个值，视图也会依据变化重新渲染

 

DOM 元素上的 ng-controller 属性声明所有被它包含的元素都属于某个控制器

 

 ng-app="myApp" 时，我们的意思是告诉 Angular 在这里我们想要使用哪个模块

AngularJS 允许我们使用 angular.module() 方法来声明模块，这个方法能够接受两个参数，第一个是模块的名称，第二个是依赖列表，也
就是可以被注入到模块中的对象列表。

创建模块：

angular.module('myApp', [])
.controller('MyController', function($scope) {
// 稍后填充这里的代码
});

MyController 函数定义接受参数， DOM 元素的 $scope 对象从技术上讲这叫作 依赖注入

 

在视图中通过对象的属性而非对象本身来进行引用绑定，是 Angular 中的 最佳实践，即不直接在$scope上直接绑定属性

 

AngularJS 启动并生成视图时，会将根 ng-app 元素同 $rootScope 进行绑定。 $rootScope 是所有 $scope 对象的最上层。

 

$scope 的所有属性，都可以自动被视图访问到

 

指令：将 DOM 元素增强为可复用的 DOM 组件的属性或元素。
值绑定：模板语法 {{ }} 可以将表达式绑定到视图上。
过滤器：可以在视图中使用的函数，用来进行格式化。
表单控件：用来检验用户输入的控件

 

控制器并不适合用来执行 DOM 操作、格式化或数据操作，以及除存储数据模型之外的状态维护操作。它只是视图和 $scope 之间的桥梁

 

 

当使用 {{ }} 表示法的时候，便设置了一个 $watch 。简而言之，这个 $watch 函数会监控 $scope 上的属性。当属性以任
何方式改变时，它就会调用相应的函数。

 

表达式：所有的表达式都在其所属的作用域内部执行，并有访问本地 $scope 的权限；
如果表达式发生了 TypeError 和 ReferenceError 并不会抛出异常；
不允许使用任何流程控制功能（条件控制，例如 if/eles ）；
可以接受过滤器和过滤器链

 

AngularJS 通过 $parse 这个内部服务来进行表达式的运算，这个服务能够访问当前所处的作用域。将 $parse 服务注入到控制器中，然后调用它就可以实现手动解析表达式

 

要在字符串模板中做插值操作，需要在你的对象中注入 $interpolate 服务。

 

$interpolate 服务可以接受三个参数：
text （字符串）： 一个包含字符插值标记的字符串。
mustHaveExpression （布尔型）： 如果将这个参数设为 true ，当传入的字符串中不含有表达式时会返回 null 。
trustedContext （字符串）： AngularJS 会对已经进行过字符插值操作的字符串通过 $sce.getTrusted() 方法进行严格的上下文
转义。

<div ng-controller="MyController">

　　<input ng-model="to" type="email"  placeholder="Recipient" />

　　<textarea ng-model="emailBody"></textarea>
　　<pre>{{ previewText }}</pre>
</div>

angular.module('myApp', [])
.controller('MyController', function($scope, $interpolate) {
// 设置监听
　　$scope.$watch('emailBody', function(newValue) {//监听文本域的内容
　　　　if (newValue) {
　　　　　　var template = $interpolate(newValue);//一旦出现新的值
　　　　　　$scope.previewText = template({to: $scope.to});//则{{to}}就是input中绑定的to值
　　　　　}
　　};
});

 

过滤器：

　　在 HTML 中的模板绑定符号 {{ }} 内通过 | 符号来调用过滤器在 HTML 中的模板绑定符号 {{ }} 内通过 | 符号来调用过滤器

　　{{ name | uppercase }}

　　在 JavaScript 代码中可以通过 $filter 来调用过滤器    $scope.name = $filter('lowercase')('Ari');

 

　　currency 过滤器可以将一个数值格式化为货币格式   <p>{{123|currency:"$"}}</p>

 

　　date 过滤器可以将日期格式化成需要的格式　

　　日期：　

　　{{ today | date:'medium' }} <!-- Aug 09, 2013 12:09:02 PM -->
　　{{ today | date:'short' }} <!-- 8/9/1312:09PM -->
　　{{ today | date:'fullDate' }} <!-- Thursday, August 09, 2013 -->
　　{{ today | date:'longDate' }} <!-- August 09, 2013 -->
　　{{ today | date:'mediumDate' }} <!-- Aug 09, 2013 -->
　　{{ today | date:'shortDate' }} <!-- 8/9/13 -->
　　{{ today | date:'mediumTime' }} <!-- 12:09:02 PM -->
　　{{ today | date:'shortTime' }} <!-- 12:09 PM -->

　　年份：

　　四位年份： {{ today | date:'yyyy' }} <!-- 2013 -->
　　两位年份： {{ today | date:'yy' }} <!-- 13 -->
　　一位年份： {{ today | date:'y' }} <!-- 2013 -->

　　月份：　

　　英文月份： {{ today | date:'MMMM' }} <!-- August -->
　　英文月份简写： {{ today | date:'MMM' }} <!-- Aug -->
　　数字月份： {{ today |date:'MM' }} <!-- 08 -->
　　一年中的第几个月份： {{ today |date:'M' }} <!-- 8 -->

　　数字日期：

　　{{ today|date:'dd' }} <!-- 09 -->
　　一个月中的第几天： {{ today | date:'d' }} <!-- 9 -->
　　英文星期： {{ today | date:'EEEE' }} <!-- Thursday -->
　　英文星期简写： {{ today | date:'EEE' }} <!-- Thu -->

　　小时格式化　　；
　　24 小时制数字小时： {{today|date:'HH'}} <!--00-->
　　一天中的第几个小时： {{today|date:'H'}} <!--0-->
　　12 小时制数字小时： {{today|date:'hh'}} <!--12-->
　　上午或下午的第几个小时： {{today|date:'h'}} <!--12-->

 

　　分钟格式化：
　　数字分钟数： {{ today | date:'mm' }} <!-- 09 -->
　　一个小时中的第几分钟： {{ today | date:'m' }} <!-- 9 -->

　　秒数格式化
　　数字秒数： {{ today | date:'ss' }} <!-- 02 -->
　　一分钟内的第几秒： {{ today | date:'s' }} <!-- 2 -->
　　毫秒数： {{ today | date:'.sss' }} <!-- .995 -->

　　字符格式化
　　上下午标识： {{ today | date:'a' }} <!-- AM -->
　　四位时区标识： {{ today | date:'Z' }} <!--- 0700 -->

　　

　　自定义日期格式的示例：
　　{{ today | date:'MMMd, y' }} <!-- Aug9, 2013 -->
　　{{ today | date:'EEEE, d, M' }} <!-- Thursday, 9, 8-->
　　{{ today | date:'hh:mm:ss.sss' }} <!-- 12:09:02.995 -->

 

　　filter 过滤器可以从给定数组中选择一个子集，并将其生成一个新数组返回

　　这个过滤器的第一个参数可以是字符串、对象或是一个用来从数组中选择元素的函数

　　字符串　　返回所有包含这个字符串的元素。如果我们想返回不包含该字符串的元素，在参数前加 ! 符号。　　

{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}
<!-- ["Lerner","Likes","Eat"] -->

　　　对象　　AngularJS 会将待过滤对象的属性同这个对象中的同名属性进行比较，如果属性值是字符串就会判断是否包含该字符串。如果我们希望对全部属性都进行对比，可以将 $ 当作键名。

{{ [{'name': 'Ari','City': 'San Francisco','favorite food': 'Pizza'},{'name': 'Nate','City': 'San Francisco','favorite food': 'indian food'}] | filter:{'favorite food': 'Pizza'} }}

<!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] -->

　　函数       对每个元素都执行这个函数，返回非假值的元素会出现在新的数组中并返回。

　　{{ ['Ari','likes','to','travel'] | filter:isCapitalized }}

<!-- ["Ari"] -->

$scope.isCapitalized = function(str) {

return str[0] == str[0].toUpperCase();
};

　　

　　 json
　　json 过滤器可以将一个 JSON 或 JavaScript 对象转换成字符串。这种转换对调试非常有帮助：
　　{{ {'name': 'Ari', 'City': 'SanFrancisco'} | json }}
　　<!--
　　{
　　"name": "Ari",
　　"City": "San Francisco"
　　}
　　-->

 

 limitTo 过滤器会根据传入的参数生成一个新的数组或字符串，新的数组或字符串的长度取决于传入的参数，通过传入参数的正负值来控制从前面还是从后面开始截取。

如果传入的长度值大于被操作数组或字符串的长度，那么整个数组或字符串都会被返回。
例如，我们可以截取字符串的前三个字符：
{{ San Francisco is very cloudy | limitTo:3 }}
< ； !-- San -->
或最后的六个字符：
{{ San Francisco is very cloudy | limitTo:-6 }}
<!-- cloudy -->
对数组也可以进行同样的操作。返回数组的第一个元素：
{{ ['a','b','c','d','e','f'] | limitTo:1 }}
<!-- ["a"] -->

 

lowercase 过滤器将字符串转为小写。
{{ "San Francisco is very cloudy" | lowercase }}
<!-- san francisco is very cloudy -->

 

number 过滤器将数字格式化成文本。它的第二个参数是可选的，用来控制小数点后截取的位数。

{{ 123456789 | number }}
<!-- 1,234,567,890 -->
{{ 1.234567 | number:2 }}
<!-- 1.23 -->

 

orderBy 过滤器可以用表达式对指定的数组进行排序。
orderBy 可以接受两个参数，第一个是必需的，第二个是可选的。

函数
当第一个参数是函数时，该函数会被当作待排序对象的 getter 方法。
字符串
对这个字符串进行解析的结果将决定数组元素的排序方向。我们可以传入 + 或 - 来强制进行升序或降序排列。

{{ [{
'name': 'Ari',
'status': 'awake'
},{
'name': 'Q',
'status': 'sleeping'
},{
'name': 'Nate',
'status': 'awake'
}] | orderBy:'name' }}
<!--
[
{"name":"Ari","status":"awake"},
{"name":"Nate","status":"awake"},
{"name":"Q","status":"sleeping"}
]
-->

通过将第二个参数设置为 true 可以将排序结果进行反转：
{{ [{
'name': 'Ari',
'status': 'awake'
},{
'name': 'Q',
'status': 'sleeping'
},{
'name': 'Nate',
'status': 'awake'
}] | orderBy:'name':true }}
<!--
[
{"name":"Q","status":"sleeping"},
{"name":"Nate","status":"awake"},
{"name":"Ari","status":"awake"}
]
-->

数组
在排序表达式中使用数组元素作为谓词。对于与表达式结果并 不严格相等的每个元素，则使用第一个谓词。

第二个参数用来控制排序的方向（是否逆向）

 

uppercase 过滤器可以将字符串转换为大写形式

 

自定义过滤器

angular.module('myApp.filters', [])
.filter('capitalize', function() {
return function(input) {};
});

angular.module('myApp.filters', [])
.filter('capitalize', function() {
return function(input) {
// input 是我们传入的字符串
if (input) {
return input[0].toUpperCase() + input.slice(1);
}
});

 

表单验证

　　必填项：required

　　最小长度：验证表单输入的文本长度是否大于某个最小值，在输入字段上使用 AngularJS 指令 ng-minleng="{number}" ：<input type="text" ng-minlength="5" />

　　 最大长度：验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用 AngularJS 指令 ng-maxlength="{number}" ：<input type="text" ng-maxlength="20" />

　　 模式匹配：使用 ng-pattern="/PATTERN/" 来确保输入能够匹配指定的正则表达式：<input type="text" ng-pattern="[a-zA-Z]" />

　　电子邮件：<input type="email" name="email" ng-model="user.email" />

　　数字：<input type="number" name="age" ng-model="user.age" />

　　URL：<input type="url" name="homepage" ng-model="user.facebook_url" />

　　自定义验证：通过自定义指令

 在表单中控制变量：

　　如果在表单元素上绑定一个 ng-model ， AngularJS 会自动将附加的属性放到包含它的 $scope 对象上。借助这些属性，我们可以对表单作出 实
时响应

　　未修改的表单：formName.inputFieldName.$pristine，如果用户没有修改输入字段的值，这个布尔属性值为 true ，如果修改过，则值为 false 

　　修改过的表单：formName.inputFieldName.$dirty 如果用户修改过输入字段值，这个布尔属性值为 true ，无论输入是否通过验证

　　合法的表单：formName.inputFieldName.$valid 如果当前输入字段的值 有效，则这个布尔属性值为 true

　　不合法的表单:formName.inputFieldName.$invalid 如果当前输入字段的值 无效，则这个布尔属性值为 true 

　　以上属性angularjs会根据特定属性加特定的css

　　错误:formName.inputfieldName.$error 如果验证失败，这个属性的值为 true ；如果值为 false ，说明输入字段的值通过了验证。

　　$parsers：

　　使用 $parsers 数组是实现自定义验证的途径之一。例如，假设我们想要确保输入值在某两个数值之间，可以在 $parsers 数组中入栈
　　一个新的函数，这个函数会在验证链中被调用。
　　每个 $parser 返回的值都会被传入下一个 $parser 中。当不希望数据模型发生更新时返回 undefined

　　angular.module('myApp')
.directive('oneToTen', function() {
return {
require: '?ngModel',
link: function(scope, ele, attrs, ngModel) {
if (!ngModel) return;
ngModel.$parsers.unshift(
function(viewValue) {
var i = parseInt(viewValue);
if (i >= 0 && i < 10) {
ngModel.$setValidity('oneToTen', true);
return viewValue;
} else {
ngModel.$setValidity('oneToTen', false);
return undefined;
}
});
}
};
});

　　$formatters
　　当绑定的 ngModel 值发生了变化，并经过 $parsers 数组中解析器的处理后，这个值会被传递给 $formatters 流水线。
　　同 $parsers 数组可以修改表单的合法性状态类似， $formatters 中的函数也可以修改并格式化这些值。

　　通过使用这些属性，可以在表单未通过验证时控制展示或隐藏错误列表，用 $dirty 属性来确保用户未对输入内容进行修改时错误内容不会显示出来：

<form name='signup_form'>

 

<label>Your name</label>
<input type="text"
placeholder="Name"
name="name"
ng-model="signup.name"
ng-minlength="3"
ng-maxlength="20" required />
<div class="error"
ng-show="signup_form.name.$dirty && signup_form.name.$invalid">//注意此处应为form的name加上检测的name
<small class="error"
ng-show="signup_form.name.$error.required">
Your name is required.
</small>
<small class="error"
ng-show="signup_form.name.$error.minlength">
Your name is required to be at least 3 characters
</small>
<small class="error"
ng-show="signup_form.name.$error.maxlength">
Your name cannot be longer than 20 characters
</small>
</form>

　　当用户试图提交表单时，你可以在作用域中捕获到一个 submitted 值，然后对表单内容进行验证并显示错误信息,表格name.submitted