声明：本文所有的双花括号，为了防止被jekyll当作本身变量编译，都在括号之间增加了空格，原本应该是没有空格的。

概念

AngularJS is a structural framework for dynamic web apps.

Directive

扩展html，给html添加声明语句，以便实现自己的需求。对于页面中html元素以ng为前缀的属性名称，ng是angular的命名空间，-后面的部分都是Directive。常用的如：ng-app，ng-cotroller，ng-repeat，ng-model，ng-click等等。

另外，还有一些关于表单的directive，如input[email]，input[url]等。

有的时候，直接写入html的方式并不能满足我们处理浏览器事件或者修改dom的需求，于是我们需要使用directive方法来改变view，用法：

module.directive('directiveName', directiveFactoryFunction);

scope

为把model里的data暴露给view，我们需要将$scope对象传给controller。$scope是controller与view之间的纽带。而ng-controller能够负责的dom范围，就是controller中$scope的有效区域（正确传递数据，传递正确的数据）。

service

services都是单例的（不知可否参考设计模式中的单例模式去理解），angular中的service有：$location，route，$http。

当一个app中有一堆controller，其中一些controller实现类似的逻辑（如一个查询功能：发送服务器请求－解析服务器返回的内容存入对象－将对象添加到$scope以显示到view），这时我们就可以定义一个那些controller共用的service，这样做的好处是：1、可以在controller中共享它们，从而减少重复的代码，方便阅读；2、需要的话，多个controller之间能够进行交流，分享状态…

三种方式去创建一个service：

Services

语法: module.service( ‘serviceName’, function );

用法：不可配置，内部通过new实例化对象，给this添加属性，然后返回this。

Factories

语法: module.factory( ‘factoryName’, function );

用法：不可配置，内部直接创建一个对象，为它添加属性，然后返回这个对象。

Providers

语法: module.provider( ‘providerName’, function );

用法：可配置，内部通过$get方法返回一个实例对象。

备注：controller使用serviceName／factoryName／providerName作为参数，通过angular的依赖注入特性获取结果。

filter

声明data被显示给用户的格式，语法：

 { { expression | filterName : parameter1 : ...parameterN } }

如{ {12.9 | currency | number:0 } }显示为$13。常用的filter还有json，lowercase，orderBy等等。

filtername也可以是自定义的处理数据（转化格式）方法的方法名。

route&location

Ajax应用比较明显的缺点就是，window不能记住页面（局部）url，虽然有一系列解决方案（iframe，onhashchange，pushState结合location.href等），但需要做很多额外的工作。

angularjs中，可以通过$route和$location来改变view（选择加载哪一个view）。如下面这段代码，通过调用$routeProvider的方法创建route，当发现url变成某一个url时，aController关联的ng-controller元素将load /path/to/tempate里的模板。如果没有找到匹配的模板，执行otherwise中的代码。（使用代码时需要web服务器）

module.config(function($routeProvider) {
    $routeProvider.
    when('url', {controller:aController, templateUrl:'/path/to/tempate'}). 
    when(...other mappings for your app...).
    ...
    otherwise(...what to do if nothing else matches...);
)};

每一个template里只有局部代码，链接a元素的href与route中的url相关，index.html模板通过ng-view元素来标识哪部分是需要局部加载上来的。

http

$http是一个service，angular提供了一些方法使我们可以方便地从服务器获取数据。

比如一个从server获取数据并且显示到view的例子：

function ShoppingController($scope, $http) { 
    $http.get('/products').success(function(data, status, headers, config) {
        $scope.items = data;
    });
}

html中值为ShoppingController的ng-controller里面就能通过ng-repeat方式动态创建html，并且使用item每一项的数据。

优势

angularjs扩展了html，缓解了编写ajax应用的痛苦。

MVC

Model包含app当前状态的数据，用对象来定义如：

var someText = '';

View显示数据，在dom中这样展示：{ {someText} }

Controller用来关联M和V，使用$scope对象来传递／操作Model，创建方法如下：

function TextController($scope) { 
   $scope.someText = someText;
}

MVC中，焦点应该被放在Model上：应该定义怎样的对象？怎样从服务器接收和保存对象？等等，花些时间考虑这些问题。

数据绑定

利用数据绑定特性，以非常精短的代码，在操作数据的同时实现页面的自动局部刷新。

如下的例子中，当点击button，items数组的对应位置（index）首先被删除，由于div的数量由items决定（ng-repeat），因此当对数组items的删除操作完成时，dom也随之刷新。

<div ng-repeat='item in items'>
    <span>{ {item.title} }</span>
    <input ng-model='item.quantity'>
    <span>{ {item.price | currency} }</span> 
    <span>{ {item.price * item.quantity | currency} }</span> 
    <button ng-click="remove($index)">Remove</button>
</div>

function CartController($scope) { 
    $scope.items = [
        {title: 'Paint pots', quantity: 8, price: 3.95},
        {title: 'Polka dots', quantity: 17, price: 12.95},
        {title: 'Pebbles', quantity: 5, price: 6.95}
    ];
    $scope.remove = function(index) { 
        $scope.items.splice(index, 1);
    } 
}

依赖注入

angular要求我们遵循编码规则，按照规定去写代码，使用规定的参数名，这样来自动获取需要的内容。

比如controller中通过serviceName来获取service的返回值。