1. AngularJS是什么？

Angular官网：，API:

AngularJS是一个MV*（Model-View-Whatever, 不管是MVC或者MVVM，统称为MDV（Model Drive View））的JavaScript框架，是Google推出的SPA（single-page-application, 单页面应用），即协助搭建单页面工程的开源前端框架。通过AngularJS可以使得开发与测试变得更容易。

AngularJS试图成为Web应用中的一种端对端的解决方案。它由2009年发布第一个版本，由Google进行维护。

AngularJS的核心思想就是将视图与业务逻辑解耦，而实现方法则是通过数据和视图的双向数据绑定实现。解耦的代码更有利于进行测试。

图1. 双向数据绑定实现解耦

AngularJS依然遵循MVC模式开发，鼓励视图（View）、数据（Model）、逻辑（Controller）组件间的松耦合。

图2. 控制器通过依赖注入各项所需要的服务，实现解耦

AngularJS将测试与应用程序编写看得同等重要，在编写模块的同时即可编写测试代码。而且由于实现了各组件的松耦合，因此使得这种测试更容易实现。

AngularJS在编写一个单页面应用时的通常顺序如下：

图3. AngularJS构建单页面应用时的顺序

第一步是根据设计好的页面布局，进行HTML代码的编写，在编写的过程中，为相应的控件和元素设置与AngularJS对应的指令（如ng-app, ng-controller, ng-click, ng-model等）；

第二步是在控制器Controller中根据业务逻辑，编写代码改变模型的值，由于数据和视图双向绑定，因此视图中的值会相应改变；

第三步是编写控制器中所需要依赖的各项服务的代码。这些服务可能是AngularJS中已经自带的服务（如$http, $timeout, $q, $filter等），也可以是根据业务实际需要编写的自定义service。这些服务最终通过注入的方式，传递给Controller进行使用。

如下是一个简单的例子示例以上步骤：

（1）编写HTML代码，如下：

如a)所示，

ng-app: 它是AngularJS的程序入口，表示body标签内的所有元素都在该app的范围内；

ng-controller: 表示在当前元素范围内的元素都在controller的控制范围内；

ng-model: 指定当前元素(例子中是select元素)与数据模型($scope)中的sortType进行了双向数据绑定，如果数据模型中没有定义这个属性，会自动新建一个；

ng-repeat: 循环$scope中的数据模型中的属性(例子中是phones)，这样会将phones数组内的所有元素都列在视图中；

{

{xxx}}: 花括号表示读取某一属性值，这里是读取$scope.phone.snippet/age/imsrc这三个属性；

filter, orderBy: 由”|”符号后跟的是过滤器filter，如oderBy是排序过滤器，过滤器既可以是内置的，也可以使根据业务自定义的。Filter类似Unix里面的”|”管道概念。

如b)所示是控制器的声明方法：

控制器的声明方法是：

var controller = [‘service1’, ‘service2’, function(service1, service2)];

controller是控制器的名称(如PhoneListCtrl)，service1和service2是该控制器所依赖的服务，这两个服务以声明的方式注入到了控制器中。例子中将$scope(数据模型服务), $http(封装了ajax的服务)。这两个服务都是angularJS的内置服务，当然也可以自定义服务再注入controller中。