AngularJS的基本知识详解

  1、 AngularJS是什么？

        AngularJs（后面就简称ng了）是一个用于设计动态web应用的结构框架。

     首先，它是一个框架，不是类库，是像EXT一样提供一整套方案用于设计web应用。它不仅仅是一个JavaScript框架，因为它的核心其实是对HTML标签的增强。何为HTML标签增强？其实就是使你能够用标签完成一部分页面逻辑，具体方式就是通过自定义标签、自定义属性等，这些HTML原生没有的标签/属性在ng中有一个名字：指令（directive）。后面会详细介绍。那么，什么又是动态web应用呢？与传统web系统相区别，web应用能为用户提供丰富的操作，能够随用户操作不断更新视图而不进行url跳转。ng官方也声明它更适用于开发CRUD应用，即数据操作比较多的应用，而非是游戏或图像处理类应用。为了实现这些，ng引入了一些非常棒的特性，包括模板机制、数据绑定、模块、指令、依赖注入、路由。通过数据与模板的绑定，能够让我们摆脱繁琐的DOM操作，而将注意力集中在业务逻辑上。　

       另外一个疑问，ng是MVC框架吗？还是MVVM框架？官网有提到ng的设计采用了MVC的基本思想，而又不完全是MVC，因为在书写代码时我们确实是在用ng-controller这个指令(起码从名字上看，是MVC吧)，但这个controller处理的业务基本上都是与view进行交互，这么看来又很接近MVVM。让我们把目光移到官网那个非醒目的title上：“AngularJS — Superheroic JavaScript MVW Framework”。

2 、AngularJS简单介绍

          AngularJS 重新定义了前端应用的开发方式。

         面对HTML和JavaScript之间的界线，它非但不畏缩不前，反而正面出击，提出了有效的解决方案。很多前端应用的开发框架，比如Backbone、EmberJS等，都要求开发者继承此框架特有的一些JavaScript对象。这种方式有其长处，但它不必要地污染了开发者自己代码的对象空间，还要求开发者去了解内存里那些抽象对象。尽管如此我们还是接受了这种方式，因为网络最初的设计无法提供 我们今天所需的交互性，于是我们需要框架，来帮我们填补JavaScript和HTML之间的鸿沟。而且有了它，你不用再“直接”操控DOM，只要给你的DOM注上metadata（即AngularJS里的directive们），然后让AngularJS来帮你操纵DOM。同时，AngularJS不依赖（也不妨碍）任何其他的框架。你甚至可以基于其它的框架来开发AngularJS应用。API地址：http://docs.angularjs.org/api/；AngularJS在github上的中文粗译版地址：https://github.com/basestyle/angularjs-cn。

3 、什么时候该用AngularJSAngular

         JS是一个 MV* 框架，最适于开发客户端的单页面应用。

它不是个功能库，而是用来开发动态网页的框架。它专注于扩展HTML的功能，提供动态数据绑定（data binding），而且它能跟其它框架（如jQuery）合作融洽。如果你要开发的是单页应用，AngularJS就是你的上上之选。Gmail、Google Docs、Twitter和Facebook这样的应用，都很能发挥AngularJS的长处。但是像游戏开发之类对DOM进行大量操纵、又或者单纯需要 极高运行速度的应用，就不是AngularJS的用武之地了。

                         4 AugularJS特性

         AngularJS是一个新出现的强大客户端技术，提供给大家的一种开发强大应用的方式。

        这种方式利用并且扩展HTML，CSS和javascript，并且弥补了它们的一些非常明显的不足。本应该使用HTML来实现而现在由它开发的动态一些内容。AngularJS有五个最重要的功能和特性：

4.1 特性一：

             双向的数据绑定数据绑定可能是AngularJS最酷最实用的特性。

     它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的web应用可能包含了80%的代码用来处理，查询和监听DOM。数据绑定是的代码更少，你可以专注于你的应用。我们想象一下Model是你的应用中的简单事实。你的Model是你用来读取或者更新的部分。数据绑定指令提供了你的Model投射到view的方法。这些投射可以无缝的，毫不影响的应用到web应用中。传统来说，当model变化了。 开发人员需要手动处理DOM元素并且将属性反映到这些变化中。这个一个双向的过程。一方面，model变化驱动了DOM中元素变化，另一方面，DOM元素的变化也会影响到Model。这个在用户互动中更加复杂，因为开发人员需要处理和解析这些互动，然后融合到一个model中，并且更新View。这是一个手动的复杂过程，当一个应用非常庞大的时候，将会是一件非常费劲的事情。这里肯定有更好的解决方案！那就是AngularJS的双向数据绑定，能够同步DOM和Model等等。

4.2 特性二：

        模板在AngularJS中，一个模板就是一个HTML文件。

     但是HTML的内容扩展了，包含了很多帮助你映射model到view的内容。HTML模板将会被浏览器解析到DOM中。DOM然后成为AngularJS编译器的输入。AngularJS将会遍历DOM模板来生成一些指导，即，directive（指令）。所有的指令都负责针对view来设置数据绑定。我们要理解AuguarJS并不把模板当做String来操作。输入AngularJS的是DOM而非string。数据绑定是DOM变化，不是字符串的连接或者innerHTML变化。使用DOM作为输入，而不是字符串，是AngularJS区别于其它的框架的最大原因。使用DOM允许你扩展指令词汇并且可以创建你自己的指令，甚至开发可重用的组件。最大的好处是为设计师和开发者创建了一个紧密的工作流。设计师可以像往常一样开发标签，然后开发者拿过来添加上功能，通过数据绑定将会使得这个过程非常简单。

这里还有一件事值得提一句，AngularJS并不强制你学习一个新的语法或者从你的应用中提出你的模板。

4.3 特性三：

        MVC针对客户端应用开发AngularJS吸收了传统的MVC基本原则。

MVC或者Model-View-Controll设计模式针对不同的人可能意味不同的东西。AngularJS并不执行传统意义上的MVC，更接近于MVVM（Moodel-View-ViewModel)。 Modelmodel是应用中的简单数据。一般是简单的javascript对象。这里没有必要继承框架的classes，使用proxy对象封装或者使用特别的setter/getter方法来访问。事实上我们处理vanilla javascript的方法就是一个非常好的特性，这种方法使得我们更少使用应用的原型。ViewModelviewmodel是一个用来提供特别数据和方法从而维护指定view的对象。viewmodel是$scope的对象，只存在于AnguarJS的应用中。$scope只是一个简单的js对象，这个对象使用简单的API来侦测和广播状态变化。Controllercontroller负责设置初始状态和参数化$scope方法用以控制行为。需要指出的controller并不保存状态也不和远程服务互动。Viewview是AngularJS解析后渲染和绑定后生成的HTML 。这个部分帮助你创建web应用的架构。$scope拥有一个针对数据的参考，controller定义行为，view处理布局和互动。

4.4 特性四：

         服务和依赖注入AngularJS服务其作用就是对外提供某个特定的功能。

     AngularJS拥有内建的依赖注入（DI）子系统，可以帮助开发人员更容易的开发，理解和测试应用。DI允许你请求你的依赖，而不是自己找寻它们。比如，我们需要一个东西，DI负责找创建并且提供给我们。为了而得到核心的AngularJS服务，只需要添加一个简单服务作为参数，AngularJS会侦测并且提供给你。

4.5 特性五：指令（Directives）

     指令是我个人最喜欢的特性。你是不是也希望浏览器可以做点儿有意思的事情？那么AngularJS可以做到。指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。可以作为标签、属性、注释和类名使用。然后，你可以使用这个自定义的directive来使用：使用一系列的组件来创建你自己的应用将会让你更方便的添加，删除和更新功能。

                                    5功能介绍

1数据绑定

AngularJS的双向数据绑定，意味着你可以在Mode(JS)中改变数据，而这些变动立刻就会自动出现在View上，反之亦然。即：一方面可以做到model变化驱动了DOM中元素变化，另一方面也可以做到DOM元素的变化也会影响到Model。

在我们使用jQuery的时候，代码中会大量充斥类似这样的语句：var val = $(‘#id’).val(); $(‘#id’).html(str);等等，即频繁的DOM操作（读取和写入），其实我们的最终目的并不是要操作DOM，而是要实现业务逻辑。ng的绑定将让你摆脱DOM操作，只要模板与数据通过声明进行了绑定，两者将随时保持同步，最新的数据会实时显示在页面中，页面中用户修改的数据也会实时被记录在数据模型中。

从View到Controller再到View的数据交互（例01）：

……

请输入名称"/>

Hello, {{ user.name }}！

……

关键： ng-app 、 ng-model 和 { {user.name } } 

首先： 元素的ng-app属性。标识这个DOM里面的内容将启用AngularJS应用。

其次：告诉AngularJS，对页面上的“user.name” 这个Model进行双向数据绑定。

第三：告诉AngularJS，在“{{ user.name}}”这个指令模版上显示“user.name”这个Model的数据。

从Server到Controller再到View的数据交互（例02）：

……

获取名字

……

demoApp.controller("demoController", function($http, $scope){

$scope. getAjaxUser = function(){

// $http.get({url:"../xxx.action"}).success(function(data){

// $scope.user= data;

// });

$scope.user = {"name":"从JOSN中获取的名称","age":22};

};

});

改变$scope中的user，View也会自动更新。

2 scopes、module、controller 

2.1 scopes

$scope是一个把view（一个DOM元素）连结到controller上的对象。在我们的MVC结构里，这个 $scope 将成为model，它提供一个绑定到DOM元素（以及其子元素）上的excecution context。

尽管听起来有点复杂，但 $scope 实际上就是一个JavaScript对象，controller和view都可以访问它，所以我们可以利用它在两者间传递信息。在这个 $scope 对象里，我们既存储数据，又存储将要运行在view上的函数。

每一个Angular应用都会有一个 $rootScope。这个 $rootScope 是最顶级的scope，它对应着含有 ng-app 指令属性的那个DOM元素。

app.run(function($rootScope) { $rootScope.name = "张三"; });

如果页面上没有明确设定 $scope ，Angular 就会把数据和函数都绑定到这里， 第一部分中的例子就是靠这一点成功运行的。

这样，我们就可以在view的任何地方访问这个name属性，使用模版表达式{{}}，像这样：

{{ name }}  

2.2 module

首先需要明确一下模板的概念。在我还不知道有模板这个东西的时候，曾经用js拼接出很长的HTML字符串，然后append到页面中，这种方式想想真是又土又笨。后来又看到可以把HTML代码包裹在一个

将当前元素的内容添加到有ng-transclude属性的这个DIV下，默认是隐藏的。

3.Controller信息：

demoApp.controller("test7Controller", function($scope){

$scope.title = '个人简介';

$scope.text = '大家好，我正在研究AngularJs，欢迎大家与我交流。';

$scope.updateInfo = function (){

$scope.title = '个人信息';

$scope.text = '大家好，今天天气真好！';

}

});

4.指令使用方式（View信息）为：

{ {text} }

Etitle指向Controller中的$scope.title。注意命名方式：指令名为userInfo，对应的标签为user-info。

7服务（service）

1服务介绍

　　服务这个概念其实并不陌生，在其他语言中如Java便有这样的概念，其作用就是对外提供某个特定的功能，如消息服务，文件压缩服务等，是一个独立的模块。ng的服务是这样定义的：

Angular services are singletons objects or functions that carry out specific tasks common to web apps.

它是一个单例对象或函数，对外提供特定的功能。

首先是一个单例，即无论这个服务被注入到任何地方，对象始终只有一个实例。

其次这与我们自己定义一个function然后在其他地方调用不同，因为服务被定义在一个模块中，所以其使用范围是可以被我们管理的。ng的避免全局变量污染意识非常强。

　　ng提供了很多内置的服务，可以到API中查看http://docs.angularjs.org/api/。知道了概念，我们来拉一个service出来溜溜，看看到底是个什么用法。　　

　　我们在controller中直接声明$location服务，这依靠ng的依赖注入机制。$location提供地址栏相关的服务，我们在此只是简单的获取当前的地址。

　　服务的使用是如此简单，我们可以把服务注入到controller、指令或者是其他服务中。

2自定义服务

　　如同指令一样，系统内置的服务以$开头，我们也可以自己定义一个服务。定义服务的方式有如下几种：

l 使用系统内置的$provide服务；

l 使用Module的factory方法；

l 使用Module的service方法。

　　下面通过一个小例子来分别试验一下。我们定义一个名为remoteData服务，它可以从远程获取数据，这也是我们在程序中经常使用的功能。不过我这里没有远程服务器，就写死一点数据模拟一下。

//使用$provide来定义

var app = angular.module('MyApp', [], function($provide) {

    $provide.factory('remoteData', function() {

 var data = {name:'n',value:'v'};

        return data;

    });

});

//使用factory方法

app.factory('remoteData',function(){

    var data = {name:'n',value:'v'};

    return data;

});

//使用service方法

app.service('remoteData',function(){

    this.name = 'n';

    this.value = 'v';

});

Module的factory和$provide的factory方法是一模一样的，从官网文档看它们其实就是一回事。至于Module内部是如何调用的，我此处并不打算深究，我只要知道怎么用就好了。

再看Module的service方法，它没有return任何东西，是因为service方法本身返回一个构造器，系统会自动使用new关键字来创建出一个对象。所以我们看到在构造器函数内可以使用this，这样调用该服务的地方便可以直接通过remoteData.name来访问数据了。

3.管理服务的依赖关系

　　服务与服务中间可以有依赖关系，例如我们这里定义一个名为validate的服务，它的作用是验证数据是否合法，它需要依赖我们从远程获取数据的服务remoteData。代码如下：

 　 在factory的参数中，我们可以直接传入服务remoteData，ng的依赖注入机制便帮我们做好了其他工作。不过一定要保证这个参数的名称与服务名称一致，ng是根据名称来识别的。若参数的名次与服务名称不一致，你就必须显示的声明一下，方式如下：

app.factory('validate',['remoteData',function(remoteDataService){

    return function(){

        if(remoteDataService.name=='n'){

            alert('验证通过');

        }

    };

}]);　　

我们在controller中注入服务也是同样的道理，使用的名称需要与服务名称一致才可以正确注入。否则，你必须使用$inject来手动指定注入的服务。比如：

function testC(scope,rd){

    scope.getData = function(){

        alert('name：'+rd.name+'   value：'+rd.value);

    }

}

testC.$inject = ['$scope','remoteData'];

 

　　在controller中注入服务，也可以在定义controller时使用数组作为第二个参数，在此处

把服务注入进去，这样在函数体中使用不一致的服务名称也是可以的，不过要确保注入的顺序是一致的，如：

app.controller('testC',['$scope','remoteData',function($scope,rd){

    $scope.getData = function(){

        alert('name：'+rd.name+'   value：'+rd.value);

    }

}]); 

 4.自定义服务示例

接下来让我们看下例子（例08 自定义服务）代码，自定义userService服务：

demoApp.factory('userService', ['$http', function($http) {

var doGetUser = function(userId, path) {

//return $http({

//method: 'JSONP',

//url: path

//});

/*手动指定数据*/

var data = {userId:"woshishui",userName:"我是谁",userInfo:"我是谁！我是谁！"};;

if(userId=='zhangsan'){

data = {userId:"zhangsan",userName:"张三",userInfo:"我是张三，我为自己"};

}else if(userId=='lisi'){

data = {userId:"lisi",userName:"李四",userInfo:"我是李四，我为卿狂！"};

}

return data;

}

return {

/*userService对外暴露的函数，可有多个*/

getUser: function(userId) { 

return doGetUser(userId, '../xxx/xxx.action'); 

}

};

}]);

我们创建了一个只有一个方法的userService，getUser为这个服务从后台获取用户信息的函数，并且对外暴露。当然，由于这是一个静态的例子，无法访问后台，那么我们便制定其返回的数据。

然后我们把这个服务添加到我们的controller中。我们建立一个controller并加载（或者注入）userService作为运行时依赖，我们把service的名字作为参数传递给controller 函数：

demoApp.controller("test8Controller", function($scope,userService){

/*文章信息*/

$scope.articles = [{

title : "爱飞像风",

userId : "zhangsan",

userName : "张三"

},{

title : "无法停止的雨",

userId : "lisi",

userName : "李四"

}];

$scope.showUserInfo = false;//显示作者详细信息开关

$scope.currentUser = {}; //当前选中的作者

$scope.getUserInfo = function(userId){

$scope.currentUser = userService.getUser(userId);

//调用 userService的getUser函数

$scope.showUserInfo = true;

setTimeout(function(){//定时器：隐藏作者详细信息

$scope.showUserInfo = false;

},3000);

}

});

我们的userService注入到我们的test8Controller后，我们就可以像使用其他服务（我们前面提到的$http服务）一样的使用userService了。

相关的HTML代码如下：

/* View HTML*/

{{article_.title}}

......

用户ID：{{currentUser.userId}}

用户名：{{currentUser.userName}}

用户简介：{{currentUser.userInfo}}

5.依赖注入DI

通过依赖注入，ng想要推崇一种声明式的开发方式，即当我们需要使用某一模块或服务时，不需要关心此模块内部如何实现，只需声明一下就可以使用了。在多处使用只需进行多次声明，大大提高可复用性。

　　比如我们的controller，在定义的时候用到一个$scope参数。

app.controller('testC',function($scope){});　　

如果我们在此处还需操作其他的东西，比如与浏览器地址栏进行交互。我们只需再多添

一个参数$location进去：

app.controller('testC',function($scope,$location){});　　

这样便可以通过$location来与地址栏进行交互了，我们仅仅是声明了一下，所需的其他代码，框架已经帮我们注入了。我们很明显的感觉到了这个函数已经不是常规意义上的javascript函数了，在常规的函数中，把形参换一个名字照样可以运行，但在此处若是把$scope换成别的名字，程序便不能运行了。因为这是已经定义好的服务名称。

这便是依赖注入机制。顺理成章的推断，我们可以自己定义模块和服务，然后在需要的地方进行声明，由框架来替我们注入。

来看下我们如何定义一个服务：

app.factory('tpls',function(){

    return ['tpl1','tpl2','tpl3','tpl4'];

});　　

看上去相当简单，是因为我在这里仅仅是直接返回一个数组。在实际应用中，这里应该是需要向服务器发起一个请求，来获取到这些模板们。服务的定义方式有好几种，包括使用provider方法、使用factory方法，使用service方法。它们之间的区别暂且不关心。我们现在只要能创建一个服务出来就可以了。我使用了factory方法。一个需要注意的地方是，框架提供的服务名字都是由$开头的，所以我们自己定义的最好不要用$开头，防止发生命名冲突。

定义好一个服务后，我们就可以在控制器中声明使用了，如下：

app.controller('testC',function($scope,tpls){

    $scope.question = questionModel;

    $scope.nowTime = new Date().valueOf();

    $scope.templates = tpls; //赋值到$scope中

    $scope.addOption = function(){

        var o = {content:''};

        $scope.question.options.push(o);

    };

    $scope.delOption = function(index){

        $scope.question.options.splice(index,1);

    };

});　　

此时，若在模板中书写如下代码，我们便可以获取到服务tpls所提供的数据了：

模板:

路由（route）

在谈路由机制前有必要先提一下现在比较流行的单页面应用，就是所谓的single page APP。为了实现无刷新的视图切换，我们通常会用ajax请求从后台取数据，然后套上HTML模板渲染在页面上，然而ajax的一个致命缺点就是导致浏览器后退按钮失效，尽管我们可以在页面上放一个大大的返回按钮，让用户点击返回来导航，但总是无法避免用户习惯性的点后退。解决此问题的一个方法是使用hash，监听hashchange事件来进行视图切换，另一个方法是用HTML5的history API，通过pushState()记录操作历史，监听popstate事件来进行视图切换，也有人把这叫pjax技术。基本流程如下：

如此一来，便形成了通过地址栏进行导航的深度链接（deeplinking ），也就是我们所需要的路由机制。通过路由机制，一个单页应用的各个视图就可以很好的组织起来了。

1 ngRoute内容

　　ng的路由机制是靠ngRoute提供的，通过hash和history两种方式实现了路由，可以检测浏览器是否支持history来灵活调用相应的方式。ng的路由(ngRoute)是一个单独的模块，包含以下内容：

l 服务$routeProvider用来定义一个路由表，即地址栏与视图模板的映射

l 服务$routeParams保存了地址栏中的参数，例如{id : 1, name : 'tom'}

l 服务$route完成路由匹配，并且提供路由相关的属性访问及事件，如访问当前路由对应的controller

l 指令ngView用来在主视图中指定加载子视图的区域

　以上内容再加上$location服务，我们就可以实现一个单页面应用了。下面来看一下具体如何使用这些内容。

 2.ng的路由机制

　　第一步：引入文件和依赖

　　ngRoute模块包含在一个单独的文件中，所以第一步需要在页面上引入这个文件，如下：

　　

光引入还不够，我们还需在模块声明中注入对ngRoute的依赖，如下：

var app = angular.module('MyApp', ['ngRoute']);　　

完成了这些，我们就可以在模板或是controller中使用上面的服务和指令了。下面我们需要定义一个路由表。

　　第二步：定义路由表

　　$routeProvider提供了定义路由表的服务，它有两个核心方法，when(path,route)和otherwise(params)，先看一下核心中的核心when(path,route)方法。

　　when(path,route)方法接收两个参数，path是一个string类型，表示该条路由规则所匹配的路径，它将与地址栏的内容($location.path)值进行匹配。如果需要匹配参数，可以在path中使用冒号加名称的方式，如：path为/show/:name，如果地址栏是/show/tom，那么参数name和所对应的值tom便会被保存在$routeParams中，像这样：{name : tom}。我们也可以用*进行模糊匹配，如：/show*/:name将匹配/showInfo/tom。

　　route参数是一个object，用来指定当path匹配后所需的一系列配置项，包括以下内容：

l controller //function或string类型。在当前模板上执行的controller函数，生成新的scope；

l controllerAs //string类型，为controller指定别名；

l template //string或function类型，视图z所用的模板，这部分内容将被ngView引用；

l templateUrl //string或function类型，当视图模板为单独的html文件或是使用了定义模板时使用；

l resolve //指定当前controller所依赖的其他模块；

l redirectTo //重定向的地址。

最简单情况，我们定义一个html文件为模板，并初始化一个指定的controller：

function emailRouteConfig($routeProvider){

    $routeProvider.when('/show', {

        controller: ShowController,

        templateUrl: 'show.html'

    }).

    when('/put/:name',{

       controller: PutController,

       templateUrl: 'put.html'

    });  

};　　

otherwise(params)方法对应路径匹配不到时的情况，这时候我们可以配置一个redirectTo参数，让它重定向到404页面或者是首页。

　　第三步：在主视图模板中指定加载子视图的位置

　　我们的单页面程序都是局部刷新的，那这个“局部”是哪里呢，这就轮到ngView出马了，只需在模板中简单的使用此指令，在哪里用，哪里就是“局部”。例如：

　　或：　　

我们的子视图将会在此处被引入进来。完成这三步后，你的程序的路由就配置好了。

 3.路由示例

下面我们将用一个例子（例09）来说明路由的使用方式及步骤：

1.为demoApp添加一个路由，代码如下：

demoApp.config(['$routeProvider',function($routeProvider) {  

$routeProvider.when('/list', {  

templateUrl: 'route/list.html',  

  controller: 'routeListController'

}).when('/list/:id', {  

  templateUrl: 'route/detail.html',

   controller: 'routeDetailController'

  }).otherwise({  

        redirectTo: '/list'  

     });  

}]);

/list 对应为：route/list.html页面，显示用户列表；/list/:id对应于route/detail.html页面，显示用户详细信息。

2.为list.html和detail.html分别声明Controller：routeListController和routeDetailController。

demoApp.controller('routeListController',function($scope) {  

$scope.users = [{userId:"zhangsan",userName:"张三",userInfo:"我是张三，我为自己带盐！"},

{userId:"lisi",userName:"李四",userInfo:"我是李四，我为卿狂！"},

{userId:"woshishui",userName:"我是谁",userInfo:"我是谁！我是谁！我是谁！"}];

 

});  

demoApp.controller('routeDetailController',function($scope, $routeParams, userService) {  

    $scope.userDetail = userService.getUser($routeParams.id);

});

routeDetailController中如上面提到的一样，注入了userService服务，在这里直接拿来用。

3.创建list.html和detail.html页面，代码如下：

---

  

Route : List.html（用户列表页面）

  

  

  

     

  

---

 

Route : detail.html（用户详细信息页面）

  

用户名：{{userDetail.userName}}

用户ID：{{userDetail.userId}}用户名：{{userDetail.userName}}

用户简介：{{userDetail.userInfo}}

返回  

4. 路由局部刷新位置：

AngularJS路由（Route） 示例

  

NG动画效果

 NG动画效果简介

NG动画效果，现在可以通过CSS3或者是JS来实现，如果是通过JS来实现的话，需要其他JS库（比如JQuery）来支持，实际上底层实现还是靠其他JS库，只是NG将其封装了，

使其更易使用。

NG动画效果包含以下几种：

• enter：元素添加到DOM中时执行动画；
• leave：元素从DOM删除时执行动画；
• move：移动元素时执行动画；
• beforeAddClass：在给元素添加CLASS之前执行动画；
• addClass：在给元素添加CLASS时执行动画；
• beforeRemoveClass：在给元素删除CLASS之前执行动画；
• removeClass：在给元素删除CLASS时执行动画。

其相关参数为：

var ngModule = angular.module('YourApp', ['ngAnimate']);

  demoApp.animation('.my-crazy-animation', function() {

return {

   enter: function(element, done) {

  //run the animation here and call done when the animation is complete

        return function(cancelled) {

          //this (optional) function will be called when the animation

          //completes or when the animation is cancelled (the cancelled

          //flag will be set to true if cancelled).

        };

      },

      leave: function(element, done) { },

      move: function(element, done) { },

      //animation that can be triggered before the class is added

      beforeAddClass: function(element, className, done) { },

      //animation that can be triggered after the class is added

      addClass: function(element, className, done) { },

      //animation that can be triggered before the class is removed

      beforeRemoveClass: function(element, className, done) { },

      //animation that can be triggered after the class is removed

      removeClass: function(element, className, done) { }

    };

  });

 动画效果示例

下面我们来看下DEMO中的例子（例10）。

1.首先，我们在demoApp下定义一个动画效果，匹配CLASS：” .border-animation”

/*定义动画*/

demoApp.animation('.border-animation', function(){ 

return{ 

beforeAddClass : function (element, className, done) { 

$(element).stop().animate({

'border-width':1

},2000, function() {

done(); 

});

}, 

removeClass : function (element ,className ,done ) { 

$(element).stop().animate({

'border-width':50

},3000, function() {

done(); 

});

} 

}; 

});

动画效果的含义就是：在匹配CLASS为border-animation的元素添加一个CLASS之前使其边框的宽度在2秒内变为1PX；并在其移除一个CLASS时使其边框的宽度在3秒内变为50PX。

2. 视图中的代码如下（主要，其他相关样式请查看例子代码）：

ng-show为false时会为其加上“ng-hide“的CLASS; ng-show为true时会为其移除“ng-hide“的CLASS，从而触发动画效果。

3.其他代码：

demoApp.controller("test10Controller", function($scope, $animate){

$scope.testShow = true;

});

 AngularJS进阶

1数据绑定原理研究

Angular用户都想知道数据绑定是怎么实现的。你可能会看到各种各样的词汇：$watch、$apply、$digest、dirty-checking...它们是什么？它们是如何工作的呢？这里我想回答这些问题，其实它们在官方的文档里都已经回答了，但是我还是想把它们结合在一起来讲，但是我只是用一种简单的方法来讲解，如果要想了解技术细节，查看源代码。

1.1 AngularJS扩展事件循环

我们的浏览器一直在等待事件，比如用户交互。假如你点击一个按钮或者在输入框里输入东西，事件的回调函数就会在javascript解释器里执行，然后你就可以做任何DOM操作，等回调函数执行完毕时，浏览器就会相应地对DOM做出变化。（记住，这是个重要的概念），为了解释什么是context以及它如何工作，我们还需要解释更多的概念。

1.2 $watch 队列

每次你绑定一些东西到你的DOM上时你就会往$watch队列里插入一条$watch。想象一下$watch就是那个可以检测它监视的model里时候有变化的东西。例如你有如下的代码：

/*View  index.html */

User: 

Password: 

在这里我们有个$scope.user，他被绑定在了第一个输入框上，还有个$scope.pass，它被绑定在了第二个输入框上，然后我们在$watch list里面加入两个$watch。

再看下面的例子：

/*Controller  controllers.js */

app.controller('MainCtrl', function($scope) {

   $scope.foo = "Foo";

   $scope.world = "World";

});

/*View  index.html */

Hello, {{ World }}

这里，即便我们在$scope上添加了两个东西，但是只有一个绑定在了DOM上，因此在这里只生成了一个$watch。

再看下面的例子：

/*Controller  controllers.js */

app.controller('MainCtrl', function($scope) {

  $scope.people = [...];

});

/*View  index.html */

  

      {{person.name}} - {{person.age}}

  

这里又生成了多少个$watch呢？每个person有两个（一个name，一个age），然后ng-repeat又有一个，因此10个person一共是(2 * 10) +1,也就是说有21个$watch。 

因此，每一个绑定到了DOM上的数据都会生成一个$watch。

那这写$watch是什么时候生成的呢？ 

当我们的模版加载完毕时，也就是在linking阶段（Angular分为compile阶段和linking阶段），Angular解释器会寻找每个directive，然后生成每个需要的$watch。

1.3 $digest循环

还记得我前面提到的扩展的事件循环吗？当浏览器接收到可以被angular context处理的事件时，$digest循环就会触发。这个循环是由两个更小的循环组合起来的。一个处理evalAsync队列，另一个处理$watch队列。 这个是处理什么的呢？$digest将会遍历我们的$watch，然后询问：

•嘿，$watch，你的值是什么？ 

◦是9。

•好的，它改变过吗？ 

◦没有，先生。

•（这个变量没变过，那下一个）

•你呢，你的值是多少？ 

◦报告，是Foo。

•刚才改变过没？ 

◦改变过，刚才是Bar。

•（很好，我们有DOM需要更新了）

•继续询问直到$watch队列都检查过。

这就是所谓的dirty-checking。既然所有的$watch都检查完了，那就要问了：有没有$watch更新过？如果有至少一个更新过，这个循环就会再次触发，直到所有的$watch都没有变化。这样就能够保证每个model都已经不会再变化。记住如果循环超过10次的话，它将会抛出一个异常，防止无限循环。当$digest循环结束时，DOM相应地变化。

例如： 

/*Controller  controllers.js */

app.controller('MainCtrl', function() {

  $scope.name = "Foo";

  $scope.changeFoo = function() {

      $scope.name = "Bar";

  }

});

/*View  index.html */

{{ name }}

Change the name

这里我们有一个$watch因为ng-click不生成$watch（函数是不会变的）。

我们可以看出ng的处理流程：

•我们按下按钮；

•浏览器接收到一个事件，进入angular context；

•$digest循环开始执行，查询每个$watch是否变化；

•由于监视$scope.name的$watch报告了变化，它会强制再执行一次$digest循环；

•新的$digest循环没有检测到变化；

•浏览器拿回控制权，更新与$scope.name新值相应部分的DOM。

这里很重要的是每一个进入angular context的事件都会执行一个$digest循环，也就是说每次我们输入一个字母循环都会检查整个页面的所有$watch。

1.4如何进入angular context

谁决定什么事件进入angular context，而哪些又不进入呢？通过$apply！

如果当事件触发时，你调用$apply，它会进入angular context，如果没有调用就不会进入。现在你可能会问：刚才的例子里我也没有调用$apply啊，为什么？Angular已经做了！因此你点击带有ng-click的元素时，时间就会被封装到一个$apply调用。如果你有一个ng-model="foo"的输入框，然后你敲一个f，事件就会这样调用$apply("foo = 'f';")。

Angular什么时候不会自动为我们$apply呢？

这是Angular新手共同的痛处。为什么我的jQuery不会更新我绑定的东西呢？因为jQuery没有调用$apply，事件没有进入angular context，$digest循环永远没有执行。

我们来看一个有趣的例子：

假设我们有下面这个directive和controller。

/*Controller  app.js */

app.directive('clickable', function() {

return {

  restrict: "E",

  scope: {

    foo: '=',

    bar: '='

  },

  template: '{{foo}}

{{bar}}

',

  link: function(scope, element, attrs) {

    element.bind('click', function() {

      scope.foo++;

      scope.bar++;

    });

  }

}

});

app.controller('MainCtrl', function($scope) {

  $scope.foo = 0;

  $scope.bar = 0;

});

它将foo和bar从controller里绑定到一个list里面，每次点击这个元素的时候，foo和bar都会自增1。那我们点击元素的时候会发生什么呢？我们能看到更新吗？答案是否定的。因为点击事件是一个没有封装到$apply里面的常见的事件，这意味着我们会失去我们的计数吗？不会。

真正的结果是：$scope确实改变了，但是没有强制$digest循环，监视foo 和bar的$watch没有执行。也就是说如果我们自己执行一次$apply那么这些$watch就会看见这些变化，然后根据需要更新DOM。

执行$apply：

element.bind('click', function() {

scope.foo++;

  scope.bar++;

  scope.$apply();

});

$apply是我们的$scope（或者是direcvie里的link函数中的scope）的一个函数，调用它会强制一次$digest循环（除非当前正在执行循环，这种情况下会抛出一个异常，这是我们不需要在那里执行$apply的标志）。

更好的使用$apply的方法：

element.bind('click', function() {

  scope.$apply(function() {

      scope.foo++;

      scope.bar++;

  });

})

有什么不一样的？差别就是在第一个版本中，我们是在angular context的外面更新的数据，如果有发生错误，Angular永远不知道。很明显在这个像个小玩具的例子里面不会出什么大错，但是想象一下我们如果有个alert框显示错误给用户，然后我们有个第三方的库进行一个网络调用然后失败了，如果我们不把它封装进$apply里面，Angular永远不会知道失败了，alert框就永远不会弹出来了。

因此，如果你想使用一个jQuery插件，并且要执行$digest循环来更新你的DOM的话，要确保你调用了$apply。

有时候我想多说一句的是有些人在不得不调用$apply时会“感觉不妙”，因为他们会觉得他们做错了什么。其实不是这样的，Angular不是什么魔术师，他也不知道第三方库想要更新绑定的数据。

1.5使用$watch来监视

你已经知道了我们设置的任何绑定都有一个它自己的$watch，当需要时更新DOM，但是我们如果要自定义自己的watches呢？简单，来看个例子：

/*Controller  app.js */

app.controller('MainCtrl', function($scope) {

  $scope.name = "Angular";

  $scope.updated = -1;

  $scope.$watch('name', function() {

    $scope.updated++;

  });

});

/*View  index.html*/

  

  Name updated: {{updated}} times.

这就是我们创造一个新的$watch的方法。第一个参数是一个字符串或者函数，在这里是只是一个字符串，就是我们要监视的变量的名字，在这里，$scope.name(注意我们只需要

用name)。第二个参数是当$watch说我监视的表达式发生变化后要执行的。我们要知道的第一件事就是当controller执行到这个$watch时，它会立即执行一次，因此我们设置updated为-1。

例子2：

/*Controller  app.js */

app.controller('MainCtrl', function($scope) {

  $scope.name = "Angular";

  $scope.updated = 0;

  $scope.$watch('name', function(newValue, oldValue) {

    if (newValue === oldValue) { return; } // AKA first run

    $scope.updated++;

  });

});

/*View  index.html*/

  

  Name updated: {{updated}} times.

watch的第二个参数接受两个参数，新值和旧值。我们可以用他们来略过第一次的执行。通常你不需要略过第一次执行，但在这个例子里面你是需要的。

例子3：

/*Controller  app.js */

app.controller('MainCtrl', function($scope) {

  $scope.user = { name: "Fox" };

  $scope.updated = 0;

  $scope.$watch('user', function(newValue, oldValue) {

    if (newValue === oldValue) { return; }

    $scope.updated++;

  });

});

/*View  index.html*/

  

  Name updated: {{updated}} times.

我们想要监视$scope.user对象里的任何变化，和以前一样这里只是用一个对象来代替前面的字符串。

呃？没用，为啥？因为$watch默认是比较两个对象所引用的是否相同，在例子1和2里面，每次更改$scope.name都会创建一个新的基本变量，因此$watch会执行，因为对这个变量的引用已经改变了。在上面的例子里，我们在监视$scope.user，当我们改变$scope.user.name时，对$scope.user的引用是不会改变的，我们只是每次创建了一个新的$scope.user.name，但是$scope.user永远是一样的。

例子4：

/*Controller  app.js */

app.controller('MainCtrl', function($scope) {

  $scope.user = { name: "Fox" };

 

  $scope.updated = 0;

 

  $scope.$watch('user', function(newValue, oldValue) {

    if (newValue === oldValue) { return; }

    $scope.updated++;

  }, true  );

});

/*View  index.html*/

  

  Name updated: {{updated}} times.

现在有用了吧！因为我们对$watch加入了第三个参数，它是一个bool类型的参数，表示的是我们比较的是对象的值而不是引用。由于当我们更新$scope.user.name时$scope.user也会改变，所以能够正确触发。

1.6 总结

我希望你们已经学会了在Angular中数据绑定是如何工作的。我猜想你的第一印象是dirty-checking很慢，好吧，其实是不对的。它像闪电般快。但是，如果你在一个模版里有2000-3000个watch，它会开始变慢。但是我觉得如果你达到这个数量级，就可以找个用户体验专家咨询一下了。

无论如何，随着ECMAScript6的到来，在Angular未来的版本里我们将会有Object.observe那样会极大改善$digest循环的速度。

2自定义指令详解

angular的指令机制。angular通过指令的方式实现了HTML的扩展，增强后的HTML不仅长相焕然一新，同时也获得了很多强大的技能。更厉害的是，你还可以自定义指令，这就意味着HTML标签的范围可以扩展到无穷大。angular赋予了你造物主的能力。既然是作为angular的精华之一，相应的指令相关的知识也很多的。

2.1指令的编译过程

　　在开始自定义指令之前，我们有必要了解一下指令在框架中的执行流程：

1.浏览器得到 HTML 字符串内容，解析得到 DOM 结构。

2.ng 引入，把 DOM 结构扔给 $compile 函数处理：

① 找出 DOM 结构中有变量占位符；

② 匹配找出 DOM 中包含的所有指令引用；

③ 把指令关联到 DOM；

④ 关联到 DOM 的多个指令按权重排列；

⑤ 执行指令中的 compile 函数（改变 DOM 结构，返回 link 函数）；

⑥ 得到的所有 link 函数组成一个列表作为 $compile 函数的返回。

3. 执行 link 函数（连接模板的 scope）。

这里注意区别一下$compile和compile，前者是ng内部的编译服务，后者是指令中的编译函数，两者发挥作用的范围不同。compile和link函数息息相关又有所区别，这个在后面会讲。了解执行流程对后面的理解会有帮助。

在这里有些人可能会问，angular不就是一个js框架吗，怎么还能跟编译扯上呢，又不是像C++那样的高级语言。其实此编译非彼编译，ng编译的工作是解析指令、绑定监听器、替换模板中的变量等。因为工作方式很像高级语言编辑中的递归、堆栈过程，所以起名为编译，不要疑惑。

2.2指令的使用方式及命名方法

　　指令的几种使用方式如下：

• 作为标签：
• 作为属性：
• 作为注释：
• 作为类名：

　　其实常用的就是作为标签和属性，下面两种用法目前还没见过，感觉就是用来卖萌的，姑且留个印象。我们自定义的指令就是要支持这样的用法。

关于自定义指令的命名，你可以随便怎么起名字都行，官方是推荐用[命名空间-指令名称]这样的方式，像ng-controller。不过你可千万不要用ng-前缀了，防止与系统自带的指令重名。另外一个需知道的地方，指令命名时用驼峰规则，使用时用-分割各单词。如：定义myDirective，使用时像这样：。

2.3自定义指令的配置参数

下面是定义一个标准指令的示例，可配置的参数包括以下部分：

myModule.directive('namespaceDirectiveName', function factory(injectables) {

        var directiveDefinitionObject = {

            restrict: string,//指令的使用方式，包括标签，属性，类，注释

            priority: number,//指令执行的优先级

            template: string,//指令使用的模板，用HTML字符串的形式表示

            templateUrl: string,//从指定的url地址加载模板

            replace: bool,//是否用模板替换当前元素，若为false，则append在当前元素上

            transclude: bool,//是否将当前元素的内容转移到模板中

            scope: bool or object,//指定指令的作用域

        controller: function controllerConstructor($scope, $element, $attrs, $transclude){...},//定义与其他指令进行交互的接口函数

            require: string,//指定需要依赖的其他指令

link: function postLink(scope, iElement, iAttrs) {...},//以编程的方式操作DOM，包

括添加监听器等

            compile: function compile(tElement, tAttrs, transclude){

                return: {

                    pre: function preLink(scope, iElement, iAttrs, controller){...},

                    post: function postLink(scope, iElement, iAttrs, controller){...}

                }

            }//编程的方式修改DOM模板的副本，可以返回链接函数

        };

        return directiveDefinitionObject;

});         

看上去好复杂的样子，定义一个指令需要这么多步骤嘛？当然不是，你可以根据自己的需要来选择使用哪些参数。事实上priority和compile用的比较少，template和templateUrl又是互斥的，两者选其一即可。所以不必紧张，接下来分别学习一下这些参数：

l 指令的表现配置参数：restrict、template、templateUrl、replace、transclude；

l 指令的行为配置参数：compile和link；

l 指令划分作用域配置参数：scope；

l 指令间通信配置参数：controller和require。

2.3指令的表现参数restrict等

指令的表现配置参数：restrict、template、templateUrl、replace、transclude。

我将先从一个简单的例子开始。

    例子的代码如下：

var app = angular.module('MyApp', [], function(){console.log('here')});

app.directive('sayHello',function(){

return {

     restrict : 'E',

template : '

hello

'

};

})         

然后在页面中，我们就可以使用这个名为sayHello的指令了，它的作用就是输出一个hello单词。像这样使用：

         

这样页面就会显示出hello了，看一下生成的代码：

hello

 

 　　稍稍解释一下我们用到的两个参数，restirct用来指定指令的使用类型，其取值及含义如下：

取值	含义	使用示例
E	标签
A	属性
C	类
M	注释

默认值是A。也可以使用这些值的组合，如EA，EC等等。我们这里指定为E，那么它就可以像标签一样使用了。如果指定为A，我们使用起来应该像这样：

从生成的代码中，你也看到了template的作用，它就是描述你的指令长什么样子，这部分内容将出现在页面中，即该指令所在的模板中，既然是模板中，template的内容中也可以使用ng-modle等其他指令，就像在模板中使用一样。

在上面生成的代码中，我们看到了

hello

外面还包着一层标签，如果我们不想要这一层多余的东西了，replace就派上用场了，在配置中将replace赋值为true，将得到如下结构：

hello

 　　replace的作用正如其名，将指令标签替换为了temple中定义的内容。不写的话默认为false。

上面的template未免也太简单了，如果你的模板HTML较复杂，如自定义一个ui组件指令，难道要拼接老长的字符串？当然不需要，此时只需用templateUrl便可解决问题。你可以将指令的模板单独命名为一个html文件，然后在指令定义中使用templateUrl指定好文件的路径即可，如：

templateUrl : ‘helloTemplate.html’         

系统会自动发一个http请求来获取到对应的模板内容。是不是很方便呢，你不用纠结于拼接字符串的烦恼了。如果你是一个追求完美的有考虑性能的工程师，可能会发问：那这样的话岂不是要牺牲一个http请求？这也不用担心，因为ng的模板还可以用另外一种方式定义，那就是使用        

 你可以把这段代码写在页面头部，这样就不必去请求它了。在实际项目中，你也可以将所有的模板内容集中在一个文件中，只加载一次，然后根据id来取用。

接下来我们来看另一个比较有用的配置：transclude，定义是否将当前元素的内容转移到模板中。看解释有点抽象，不过亲手试试就很清楚了，看下面的代码（例06）：

app.directive('sayHello',function(){

return {

     restrict : 'E',

template : '

hello，！

',

     replace : true,

      transclude : true

};

})         

指定了transclude为true，并且template修改了一下，加了一个标签，并在上面使用了ng-transclude指令，用来告诉指令把内容转移到的位置。那我们要转移的内容是什么呢？请看使用指令时的变化：

美女

内容是什么你也看到了哈~在运行的时候，美女将会被转移到标签中，原来此配置的作用就是——乾坤大挪移！看效果：

hello, 美女！

这个还是很有用的，因为你定义的指令不可能老是那么简单，只有一个空标签。当你需要对指令中的内容进行处理时，此参数便大有可用。

2.4指令的行为参数：compile和link

6.2.3中简单介绍了自定义一个指令的几个简单参数，restrict、template、templateUrl、replace、transclude，这几个理解起来相对容易很多，因为它们只涉及到了表现，而没有涉及行为。我们继续学习ng自定义指令的几个重量级参数：compile和link

l 理解compile和link

　　不知大家有没有这样的感觉，自己定义指令的时候跟写jQuery插件有几分相似之处，都是先预先定义好页面结构及监听函数，然后在某个元素上调用一下，该元素便拥有了特殊的功能。区别在于，jQuery的侧重点是DOM操作，而ng的指令中除了可以进行DOM操作外，更注重的是数据和模板的绑定。jQuery插件在调用的时候才开始初始化，而ng指令在页面加载进来的时候就被编译服务($compile)初始化好了。

在指令定义对象中，有compile和link两个参数，它们是做什么的呢？从字面意义上看，编译、链接，貌似太抽象了点。其实可大有内涵，为了在自定义指令的时候能正确使用它们，现在有必要了解一下ng是如何编译指令的。

l 指令的解析流程详解

　　我们知道ng框架会在页面载入完毕的时候，根据ng-app划定的作用域来调用$compile服务进行编译，这个$compile就像一个大总管一样，清点作用域内的DOM元素，看看哪些元素上使用了指令(如”m”>