AngularJS是一个 JavaScript 框架。它可通过script标签添加到 HTML 页面。
AngularJS扩展了 HTML，可以通过表达式将数据绑定到 HTML，可以根据需要操作DOM。

AngularJS 指令

AngularJS 通过被称为指令（格式如：ng-**）的DOM属性来扩展 HTML。
通过这些AngularJS内置的指令来为应用添加功能。

栗子：

<div ng-app="" ng-init="firstName='John'"> <p>在输入框中尝试输入：</p> <p>姓名：<input type="text" ng-model="firstName"></p> <p>你输入的为： {{ firstName }}</p> </div>

在本例中：
1.ng-app 指令初始化一个 AngularJS 应用程序。它定义了 AngularJS 应用程序的根元素。可以为ng-app赋值，并通过代码将此模块连接到代码。
2.ng-init 指令初始化这个AngularJS 应用程序的数据。
3.ng-model 指令把元素值（比如输入域的值）绑定到应用程序，因此在应用程序中可以使用这个变量名来获取元素的值。简单的说就是，ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。在本例中就是input输入的值，会变为变量firstName的值，可以在代码中引用和修改，并且在代码中的修改，也会同步反映在input输入框中。

{{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。{{ firstName }} 是通过 ng-model=”firstName” 进行同步。

另一个栗子：

<div ng-app="" ng-init="quantity=1;price=5"> <h2>价格计算器</h2> 数量： <input type="number" ng-model="quantity"> 价格： <input type="number" ng-model="price"> <p><b>总价：</b> {{ quantity * price }}</p> </div>

另外，ng-repeat 指令会重复一个 HTML 元素

<div ng-app="" ng-init="names=['Jani','Hege','Kai']"> <p>使用 ng-repeat 来循环数组</p> <ul> <li ng-repeat="x in names"> {{ x }} </li> </ul> </div>

AngularJS Scope(作用域)

Scope(作用域) 是 HTML 视图 和 JavaScript 控制器之间的纽带。
Scope 是一个对象，有可用的方法和属性。

举一个栗子：

<div ng-app="myApp" ng-controller="myCtrl"> <h1>{{carname}}</h1> </div> <script> var app = angular.module('myApp',[]); app.controller('myCtrl',function($scope) { $scope.carname = "Volvo"; }); </script>

当在JS代码中添加 $scope 对象时，HTML就可以获取了这些属性。
在HTML中，你不需要添加 $scope 前缀,只需要添加属性名即可，如： {{carname}}。

基于这样的操作模式，我们将JavaScript称为控制器，将HTML称为视图。
于是，AngularJS 应用组成如下：

View(视图),即 HTML。
Model(模型),当前视图中可用的数据。
Controller(控制器),即 JavaScript 函数，可以添加或修改属性。

scope 是模型。它是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

AngularJS 控制器

在HTML中，ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。

示例代码：

<div ng-app="myApp" ng-controller="myCtrl"> 名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: {{firstName + " " + lastName}} </div> <script> var app = angular.module('myApp',function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; }); </script>

解析：
1、AngularJS 应用程序由 ng-app 定义。应用程序在 div内运行。
2、ng-controller=”myCtrl” 属性是一个 AngularJS 指令。用于定义一个控制器。
3、myCtrl 函数是一个 JavaScript 函数。在代码中通过函数名myCtrl定义。
4、AngularJS 使用$scope 对象来调用控制器。
5、在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。
6、控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
7、控制器在作用域中创建了两个属性 (firstName 和 lastName)。
8、ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。

除此之外，控制器的$scope对象也可以添加方法，添加的方法可以在AngularJS的表达式中调用，形如：

 {{myFunction()}}

示例：

<div ng-app="myApp" ng-controller="personCtrl"> 名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: {{fullName()}} </div> <script> var app = angular.module('myApp',[]); app.controller('personCtrl',function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; $scope.fullName = function() { return $scope.firstName + " " + $scope.lastName; } }); </script>

AngularJS 过滤器

AngularJS 过滤器可用于转换数据，也就是将数据格式化为我们希望的格式。过滤器通过使用一个管道字符（|）添加到表达式和指令中。

使用实例：

{{ lastName | uppercase }} //格式化字符串为大写。 {{ lastName | lowercase }} //格式化字符串为小写。 {{ (quantity * price) | currency }} //格式化数字为货币格式。 <li ng-repeat="x in names | orderBy:'country'"> {{ x.name + ',' + x.country }} </li>//根据表达式排列数组 <div ng-app="myApp" ng-controller="namesCtrl"> <p><input type="text" ng-model="test"></p> <ul> <li ng-repeat="x in names | filter:test | orderBy:'country'"> {{ (x.name | uppercase) + ',' + x.country }} </li> </ul> </div>//根据input的输入字符过滤结果。

最后这个如果不太懂的话可以实际操作一下，参见:
http://www.runoob.com/try/try.php?filename=try_ng_filters_input

AngularJS 服务(Service)

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。当然我们也可以创建自己的服务。
例如，在内建的服务中有个 $location 服务，它可以返回当前页面的 URL 地址。

var app = angular.module('myApp',[]);
app.controller('customersCtrl',function($scope,$location) {
    $scope.myUrl = $location.absUrl();// 服务，注意 $location 服务是作为一个参数传递到 controller 中。
});

AngularJS的服务比起使用原生的JS函数的好处在于 它被封装的很好，浏览器兼容性也比较高，能做到优雅降级。

下面列举几个常用的服务：
$http 服务、$timeout 服务、$interval 服务等。

另外，我们也可以创建自己的服务：

app.service('myService',function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
//要使用访问自定义服务，需要在定义过滤器的时候独立添加.
app.controller('myCtrl',myService) {
    $scope.hex = myService.myFunc(255);
});

AngularJS的XMLHttpRequest

$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

（待续）