AngularJS学习总结&详细介绍.docx

1、新晨科技股份有限公司AngularJS 介绍AngularJS 学习文档欧阳龙蛟2014/1/15在此处键入文档的摘要。摘要通常是对文档内容的简短总结。在此处键入文档的摘要。摘要通常是对文档内容的简短总结。AngularJS 学习文档2目录1 前言 .42 AngularJS 概述 .42.1 AngularJS 是什么？ .42.2 AngularJS 简单介绍 .52.3 什么时候该用 AngularJS.53 AugularJS 特性 .53.1 特性一：双向的数据绑定 .53.2 特性二：模板 .63.3 特性三：MVC .73.4 特性四：服务和依赖注入 .73.5 特性五：指令（D

2、irectives） .84 功能介绍 .94.1 数据绑定 .94.2 scopes、module、controller .104.2.1 scopes .104.2.2 module.104.2.3 ng-controller .104.3 ajax.114.4 表达式 .124.5 过滤器 .124.5.1 过滤器使用方式 .134.5.2 ng 的内置过滤器 .134.5.3 自定义过滤器及示例 .154.6 指令 .164.6.1 样式相关的指令 .174.6.2 表单控件功能相关指令 .184.6.3 事件绑定相关指令 .184.6.4 特殊的 ng-src 和 ng-href.1

3、94.6.5 示例 .204.7 服务 .214.7.1 服务（service）介绍 .214.7.2 自定义服务 .214.7.3 管理服务的依赖关系 .224.7.4 示例 .234.8 依赖注入 DI .244.9 路由 .264.9.1 ngRoute 内容 .264.9.2 ng 的路由机制 .264.9.3 示例 .274.10 NG 动画效果 .294.10.1 NG 动画效果简介 .294.10.2 示例 .30AngularJS 学习文档35 功能演示 .306 AngularJS 进阶 .316.1 数据绑定原理研究 .316.1.1 AngularJS 扩展事件循环 .3

4、16.1.2 $watch 队列（$watch list） .316.1.3 $digest 循环 .326.1.4 如何进入 angular context .336.1.5 使用$watch 来监视 .346.1.6 总结 .366.2 自定义指令详解 .366.2.1 指令的编译过程 .376.2.2 指令的使用方式及命名方法 .376.2.3 自定义指令的配置参数 .376.2.3 指令的表现参数 restrict 等 .386.2.4 指令的行为参数：compile 和 link .406.2.5 指令的划分作用域参数：scope .426.2.6 指令间通信参数：controlle

5、r 和 require.456.3 性能及调优 .476.3.1 性能测试 .476.3.2 七大调优法则 .487 总结 .507.1 页面效果 .507.2 委派事件（代理事件） .517.2.1 NG 循环及事件绑定 .517.2.2 jQuery 委派事件 .51AngularJS 学习文档41 前言前端技术的发展是如此之快，各种优秀技术、优秀框架的出现简直让人目不暇接，紧跟时代潮流，学习掌握新知识自然是不敢怠慢。AngularJS 是 google 在维护，其在国外已经十分火热，可是国内的使用情况却有不小的差距，参考文献/网络文章也很匮乏。这里便将我学习 AngularJS 写成文档

6、，一方面作为自己学习路程上的记录，另一方面也给有兴趣的同学一些参考。首先我自己也是一名学习者，会以学习者的角度来整理我的行文思路，这里可能只是些探索，有理解或是技术上的错误还请大家指出；其次我特别喜欢编写小例子来把一件事情说明白，故在文中会尽可能多的用示例加代码讲解，我相信这会是一种比较好的方式；最后，我深知 AngularJS 的使用方式跟 jquery 的使用方式有很大不同，在大家都有jquery、ext 经验的条件下对于 angular 的学习会困难重重，不过我更相信在大家的坚持下，能够快速的学好 AngularJS，至少咱也能深入了解到 AngularJS 的基本思想，对咱们以后自己的

7、插件开发、项目开发都会有很大的启示。2 AngularJS 概述2.1 AngularJS 是什么？AngularJs（后面就简称 ng 了）是一个用于设计动态 web 应用的结构框架。首先，它是一个框架，不是类库，是像 EXT 一样提供一整套方案用于设计 web 应用。它不仅仅是一个 javascript 框架，因为它的核心其实是对 HTML 标签的增强。何为 HTML 标签增强？其实就是使你能够用标签完成一部分页面逻辑，具体方式就是通过自定义标签、自定义属性等，这些 HTML 原生没有的标签/属性在 ng 中有一个名字：指令（directive） 。后面会详细介绍。那么，什么又是动态 we

8、b 应用呢？与传统 web 系统相区别，web 应用能为用户提供丰富的操作，能够随用户操作不断更新视图而不进行 url 跳转。ng 官方也声明它更适用于开发 CRUD 应用，即数据操作比较多的应用，而非是游戏或图像处理类应用。为了实现这些，ng 引入了一些非常棒的特性，包括模板机制、数据绑定、模块、指令、依赖注入、路由。通过数据与模板的绑定，能够让我们摆脱繁琐的 DOM 操作，而将注意力集中在业务逻辑上。另外一个疑问，ng 是 MVC 框架吗？还是 MVVM 框架？官网有提到 ng 的设计采用了 MVC的基本思想，而又不完全是 MVC，因为在书写代码时我们确实是在用 ng-controller

9、 这个指令(起码从名字上看，是 MVC 吧)，但这个 controller 处理的业务基本上都是与 view 进行交互，这么看来又很接近 MVVM。让我们把目光移到官网那个非醒目的 title 上：“AngularJS Superheroic JavaScript MVW Framework”。2.2 AngularJS 简单介绍AngularJS 重新定义了前端应用的开发方式。面对 HTML 和 JavaScript 之间的界线，AngularJS 学习文档5它非但不畏缩不前，反而正面出击，提出了有效的解决方案。很多前端应用的开发框架，比如 Backbone、EmberJS 等，都要求开发者

10、继承此框架特有的一些 JavaScript 对象。这种方式有其长处，但它不必要地污染了开发者自己代码的对象空间，还要求开发者去了解内存里那些抽象对象。尽管如此我们还是接受了这种方式，因为网络最初的设计无法提供 我们今天所需的交互性，于是我们需要框架，来帮我们填补JavaScript 和 HTML 之间的鸿沟。而且有了它，你不用再“直接”操控 DOM，只要给你的DOM 注上 metadata（即 AngularJS 里的 directive 们） ，然后让 AngularJS 来帮你操纵DOM。同时，AngularJS 不依赖（也不妨碍）任何其他的框架。你甚至可以基于其它的框架来开发 Angul

11、arJS 应用。API 地址：http:/docs.angularjs.org/api/；AngularJS 在 github 上的中文粗译版地址：https:/ 什么时候该用 AngularJSAngularJS 是一个 MV* 框架，最适于开发客户端的单页面应用。它不是个功能库，而是用来开发动态网页的框架。它专注于扩展 HTML 的功能，提供动态数据绑定（data binding） ，而且它能跟其它框架（如 jQuery）合作融洽。如果你要开发的是单页应用，AngularJS 就是你的上上之选。Gmail、Google Docs、Twitter 和 Facebook 这样的应用，都很能发挥

12、 AngularJS 的长处。但是像游戏开发之类对 DOM 进行大量操纵、又或者单纯需要 极高运行速度的应用，就不是 AngularJS 的用武之地了。3 AugularJS 特性AngularJS 是一个新出现的强大客户端技术，提供给大家的一种开发强大应用的方式。这种方式利用并且扩展 HTML，CSS 和 javascript，并且弥补了它们的一些非常明显的不足。本应该使用 HTML 来实现而现在由它开发的动态一些内容。AngularJS 有五个最重要的功能和特性：3.1 特性一：双向的数据绑定数据绑定可能是 AngularJS 最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开

13、发时间。一个典型的 web 应用可能包含了 80%的代码用来处理，查询和监听DOM。数据绑定是的代码更少，你可以专注于你的应用。我们想象一下 Model 是你的应用中的简单事实。你的 Model 是你用来读取或者更新的部分。数据绑定指令提供了你的 Model 投射到 view 的方法。这些投射可以无缝的，毫不影响的应用到 web 应用中。传统来说，当 model 变化了。 开发人员需要手动处理 DOM 元素并且将属性反映到这些变化中。这个一个双向的过程。一方面，model 变化驱动了 DOM 中元素变化，另一方面，DOM 元素的变化也会影响到 Model。这个在用户互动中更加复杂，因为开发人员

14、需要处理和AngularJS 学习文档6解析这些互动，然后融合到一个 model 中，并且更新 View。这是一个手动的复杂过程，当一个应用非常庞大的时候，将会是一件非常费劲的事情。这里肯定有更好的解决方案！那就是 AngularJS 的双向数据绑定，能够同步 DOM 和Model 等等。这里有一个非常简单的例子，用来演示一个 input 输入框和元素的双向绑定(例01)：Name:Hello, user.name!说明：实际效果请大家看 AngularJS/demo/index.html3.2 特性二：模板在 AngularJS 中，一个模板就是一个 HTML 文件。但是 HTML 的内容扩

15、展了，包含了很多帮助你映射 model 到 view 的内容。HTML 模板将会被浏览器解析到 DOM 中。DOM 然后成为 AngularJS 编译器的输入。AngularJS 将会遍历 DOM 模板来生成一些指导，即，directive（指令） 。所有的指令都负责针对 view 来设置数据绑定。我们要理解 AuguarJS 并不把模板当做 String 来操作。输入 AngularJS 的是 DOM 而非string。数据绑定是 DOM 变化，不是字符串的连接或者 innerHTML 变化。使用 DOM 作为输入，而不是字符串，是 AngularJS 区别于其它的框架的最大原因。使用 DO

16、M 允许你扩展指令词汇并且可以创建你自己的指令，甚至开发可重用的组件。最大的好处是为设计师和开发者创建了一个紧密的工作流。设计师可以像往常一样开发标签，然后开发者拿过来添加上功能，通过数据绑定将会使得这个过程非常简单。这里有一个例子，我们使用 ng-repeat 指令来循环图片数组并且加入 img 模板，如下：function AlbumCtrl($scope) scope.images = “image“:“img/image_01.png“, “description“:“Image 01 description“,“image“:“img/image_02.png“, “descript

17、ion“:“Image 02 description“,“image“:“img/image_03.png“, “description“:“Image 03 description“,“image“:“img/image_04.png“, “description“:“Image 04 description“,“image“:“img/image_05.png“, “description“:“Image 05 description“;AngularJS 学习文档7这里还有一件事值得提一句，AngularJS 并不强制你学习一个新的语法或者从你的应用中提出你的模板。3.3 特性三：MVC

18、针对客户端应用开发 AngularJS 吸收了传统的 MVC 基本原则。MVC 或者 Model-View-Controll 设计模式针对不同的人可能意味不同的东西。AngularJS 并不执行传统意义上的MVC，更接近于 MVVM（Moodel-View-ViewModel)。 Modelmodel 是应用中的简单数据。一般是简单的 javascript 对象。这里没有必要继承框架的 classes，使用 proxy 对象封装或者使用特别的 setter/getter 方法来访问。事实上我们处理 vanilla javascript 的方法就是一个非常好的特性，这种方法使得我们更少使用应用的

19、原型。ViewModelviewmodel 是一个用来提供特别数据和方法从而维护指定 view 的对象。viewmodel 是$scope 的对象，只存在于 AnguarJS 的应用中。$scope 只是一个简单的js 对象，这个对象使用简单的 API 来侦测和广播状态变化。Controllercontroller 负责设置初始状态和参数化$scope 方法用以控制行为。需要指出的controller 并不保存状态也不和远程服务互动。Viewview 是 AngularJS 解析后渲染和绑定后生成的 HTML 。这个部分帮助你创建 web 应用的架构。$scope 拥有一个针对数据的参考，co

20、ntroller 定义行为，view 处理布局和互动。3.4 特性四：服务和依赖注入AngularJS 服务其作用就是对外提供某个特定的功能。AngularJS 拥有内建的依赖注入（DI）子系统，可以帮助开发人员更容易的开发，理解和测试应用。DI 允许你请求你的依赖，而不是自己找寻它们。比如，我们需要一个东西，DI 负责找创建并且提供给我们。为了而得到核心的 AngularJS 服务，只需要添加一个简单服务作为参数，AngularJS会侦测并且提供给你：function EditCtrl($scope, $location, $routeParams) AngularJS 学习文档8/ Som

21、ething clever here.你也可以定义自己的服务并且让它们注入：angular.module(MyServiceModule, ).factory(notify, $window, function (win) return function (msg) win.alert(msg););function myController(scope, notifyService) scope.callNotify = function (msg) notifyService(msg);myController.$inject = $scope, notify; 3.5 特性五：指令（Di

22、rectives）指令是我个人最喜欢的特性。你是不是也希望浏览器可以做点儿有意思的事情？那么AngularJS 可以做到。指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作 DOM 属性。可以作为标签、属性、注释和类名使用。这里是一个例子，它监听一个事件并且针对的更新它的$scope ，如下：myModule.directive(myComponent, function(mySharedService) return restrict: E,controller: function($scope, $attrs, mySharedService) $scope.$on(handleB

23、roadcast, function() $scope.message = Directive: + mySharedService.message;);,replace: true,template: ;);然后，你可以使用这个自定义的 directive 来使用：使用一系列的组件来创建你自己的应用将会让你更方便的添加，删除和更新功能。AngularJS 学习文档94 功能介绍4.1 数据绑定AngularJS 的双向数据绑定，意味着你可以在 Mode(JS)中改变数据，而这些变动立刻就会自动出现在 View 上，反之亦然。即：一方面可以做到 model 变化驱动了 DOM 中元素变化，另一

24、方面也可以做到 DOM 元素的变化也会影响到 Model。在我们使用 jQuery 的时候，代码中会大量充斥类似这样的语句： var val = $(#id).val(); $(#id).html(str);等等，即频繁的 DOM 操作（读取和写入） ，其实我们的最终目的并不是要操作 DOM，而是要实现业务逻辑。ng 的绑定将让你摆脱 DOM 操作，只要模板与数据通过声明进行了绑定，两者将随时保持同步，最新的数据会实时显示在页面中，页面中用户修改的数据也会实时被记录在数据模型中。从 View 到 Controller 再到 View 的数据交互（例 01）：Hello, user.name ！

25、关键： ng-app 、 ng-model 和 user.name 首先： 元素的 ng-app 属性。标识这个 DOM 里面的内容将启用 AngularJS 应用。其次：告诉 AngularJS，对页面上的“user.name” 这个 Model 进行双向数据绑定。第三：告诉 AngularJS，在“ user.name”这个指令模版上显示“user.name”这个Model 的数据。从 Server 到 Controller 再到 View 的数据交互（例 02）：AJAX 获取名字 demoApp.controller(“demoController“, function($http,

26、$scope)$scope. getAjaxUser = function()/ $http.get(url:“./xxx.action“).success(function(data)/ $scope.user= data;/ );$scope.user = “name“:“从 JOSN 中获取的名称“,“age“:22;);改变$scope 中的 user，View 也会自动更新。AngularJS 学习文档104.2 scopes、module、controller 4.2.1 scopes$scope 是一个把 view（一个 DOM 元素）连结到 controller 上的对象。在我们的 MVC结构里，这个 $scope 将成为 model，它提供一个绑定到 DO