认识AngularJS
AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
AngularJS是为了克服HTML在构建应用上的不足而设计的。
AngularJS通过使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。例如：
- 使用双大括号{{}}语法进行数据绑定；
- 使用DOM控制结构来实现迭代或者隐藏DOM片段；
- 支持表单和表单的验证；
- 能将逻辑代码关联到相关的DOM元素上；
- 能将HTML分组成可重用的组件。
下面是一个包含了一个表单的典型CRUD(增查改删)应用。表单值先经过验证，然后用来计算总值，这个总值会被格式化成本地的样式。下面有一些开发者常见的概念，我们需要先了解一下：
1.将数据模型(data-model)关联到视图(UI)上；
2.写、读、验证用户的输入；
3.根据模型计算新的值；
4.将输出格式本地化，
index.html:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!doctype html><html ng-app><head><script src="angular-1.1.0.min.js"></script><script src="script.js"></script></head><body><div ng-controller="InvoiceCntl"><b>Invoice:</b><br><br><table><tr><td>Quantity</td><td>Cost</td></tr><tr><td><input type="integer" min="0" ng-model="qty" required ></td><td><input type="number" ng-model="cost" required ></td></tr></table><hr><b>Total:</b> {{qty * cost | currency}}</div></body></html>script.js:function InvoiceCntl($scope) {$scope.qty = 1;$scope.cost = 19.95;} |
在<html>标签里, 我们用一个ng-app标识符标明这是一个AngularJS应用。这个ng-app标识符会使AngularJS自动初始化(auto initialize)应用。
我们用<script>标签来加载AngularJS脚本：
<script src="angular-1.1.0.min.js"></script>通过设置<input>标签里的ng-model属性, AngularJS会自动对数据进行双向绑定。我们还同时进行了一些简单的数据验证：
Quantity:<input type="integer"min="0"ng-model="qty"required >Cost:<input type="number"ng-model="cost"required >这个输入框的widget看起来很普通，但如果认识到以下几点那它就不普通了：
当页面加载完后，AngularJS会依照widget里的声明的模型名字（qty、cost）生成同名变量。你可以把这些变量认为是MVC设计模式中的M(Model)；
注意上面widget里的input有着特殊的能力。如果你们没有输入数据或者输入的数据无效，这个input输入框会自动变红。输入框的这种新特性，能让开发者更容易实现CRUD应用里常见的字段验证功能。
上面的这个例子里，{{}}里的表达式让AngularJS把从输入框中获得的数据相乘，然后把相乘结果格式化成本地货币样式，然后输出到页面上。
AngularJS 表达式
- AngularJS 表达式写在双大括号内：{{ expression }}。
- AngularJS 表达式把数据绑定到 HTML，这与ng-bind指令有异曲同工之妙。
- AngularJS 将在表达式书写的位置"输出"数据。
- AngularJS 表达式很像JavaScript 表达式：它们可以包含文字、运算符和变量。
