《AngularJS学习总结详细介绍》由会员分享，可在线阅读，更多相关《AngularJS学习总结详细介绍（51页珍藏版）》请在金锄头文库上搜索。
1、AngularJS学习文档新晨科技股份有限公司AngularJS介绍AngularJS学习文档欧阳龙蛟2014/1/15在此处键入文档的摘要。摘要通常是对文档内容的简短总结。在此处键入文档的摘要。摘要通常是对文档内容的简短总结。目录1前言42 AngularJS概述42.1 AngularJS是什么？42.2 AngularJS简单介绍52.3 什么时候该用AngularJS53 AugularJS特性53.1 特性一：双向的数据绑定53.2 特性二：模板63.3 特性三：MVC73.4 特性四：服务和依赖注入73.5 特性五：指令（Directives）84 功能介绍94.1数据绑定94.2
2、 scopes、module、controller104.2.1 scopes104.2.2 module104.2.3 ng-controller104.3 ajax114.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-href194.6.5 示例204.7服务214.7.1服务（service）介绍214.7.2自定义服务214.7.3管理服务的依赖关系224.7.4 示例23
3、4.8依赖注入DI244.9路由264.9.1 ngRoute内容264.9.2 ng的路由机制264.9.3 示例274.10 NG动画效果294.10.1 NG动画效果简介294.10.2 示例305 功能演示306 AngularJS进阶316.1数据绑定原理研究316.1.1 AngularJS扩展事件循环316.1.2 $watch 队列（$watch list）316.1.3 $digest循环326.1.4如何进入angular context336.1.5使用$watch来监视346.1.6 总结366.2自定义指令详解366.2.1指令的编译过程376.2.2指令的使用方式及
4、命名方法376.2.3自定义指令的配置参数376.2.3指令的表现参数restrict等386.2.4指令的行为参数：compile和link406.2.5指令的划分作用域参数：scope426.2.6指令间通信参数：controller和require456.3 性能及调优476.3.1性能测试476.3.2七大调优法则487总结507.1页面效果507.2委派事件（代理事件）517.2.1 NG循环及事件绑定517.2.2 jQuery委派事件511前言前端技术的发展是如此之快，各种优秀技术、优秀框架的出现简直让人目不暇接，紧跟时代潮流，学习掌握新知识自然是不敢怠慢。AngularJS是g
5、oogle在维护，其在国外已经十分火热，可是国内的使用情况却有不小的差距，参考文献/网络文章也很匮乏。这里便将我学习AngularJS写成文档，一方面作为自己学习路程上的记录，另一方面也给有兴趣的同学一些参考。首先我自己也是一名学习者，会以学习者的角度来整理我的行文思路，这里可能只是些探索，有理解或是技术上的错误还请大家指出；其次我特别喜欢编写小例子来把一件事情说明白，故在文中会尽可能多的用示例加代码讲解，我相信这会是一种比较好的方式；最后，我深知AngularJS的使用方式跟jquery的使用方式有很大不同，在大家都有jquery、ext经验的条件下对于angular的学习会困难重重，不过我
6、更相信在大家的坚持下，能够快速的学好AngularJS，至少咱也能深入了解到AngularJS的基本思想，对咱们以后自己的插件开发、项目开发都会有很大的启示。2 AngularJS概述2.1 AngularJS是什么？AngularJs（后面就简称ng了）是一个用于设计动态web应用的结构框架。首先，它是一个框架，不是类库，是像EXT一样提供一整套方案用于设计web应用。它不仅仅是一个javascript框架，因为它的核心其实是对HTML标签的增强。何为HTML标签增强？其实就是使你能够用标签完成一部分页面逻辑，具体方式就是通过自定义标签、自定义属性等，这些HTML原生没有的标签/属性在ng中
7、有一个名字：指令（directive）。后面会详细介绍。那么，什么又是动态web应用呢？与传统web系统相区别，web应用能为用户提供丰富的操作，能够随用户操作不断更新视图而不进行url跳转。ng官方也声明它更适用于开发CRUD应用，即数据操作比较多的应用，而非是游戏或图像处理类应用。为了实现这些，ng引入了一些非常棒的特性，包括模板机制、数据绑定、模块、指令、依赖注入、路由。通过数据与模板的绑定，能够让我们摆脱繁琐的DOM操作，而将注意力集中在业务逻辑上。另外一个疑问，ng是MVC框架吗？还是MVVM框架？官网有提到ng的设计采用了MVC的基本思想，而又不完全是MVC，因为在书写代码时我们确
8、实是在用ng-controller这个指令(起码从名字上看，是MVC吧)，但这个controller处理的业务基本上都是与view进行交互，这么看来又很接近MVVM。让我们把目光移到官网那个非醒目的title上：“AngularJS Superheroic JavaScript MVW Framework”。2.2 AngularJS简单介绍AngularJS 重新定义了前端应用的开发方式。面对HTML和JavaScript之间的界线，它非但不畏缩不前，反而正面出击，提出了有效的解决方案。很多前端应用的开发框架，比如Backbone、EmberJS等，都要求开发者继承此框架特有的一些JavaS
9、cript对象。这种方式有其长处，但它不必要地污染了开发者自己代码的对象空间，还要求开发者去了解内存里那些抽象对象。尽管如此我们还是接受了这种方式，因为网络最初的设计无法提供 我们今天所需的交互性，于是我们需要框架，来帮我们填补JavaScript和HTML之间的鸿沟。而且有了它，你不用再“直接”操控DOM，只要给你的DOM注上metadata（即AngularJS里的directive们），然后让AngularJS来帮你操纵DOM。同时，AngularJS不依赖（也不妨碍）任何其他的框架。你甚至可以基于其它的框架来开发AngularJS应用。API地址：http:/docs.angularj
10、s.org/api/；AngularJS在github上的中文粗译版地址：https:/ 什么时候该用AngularJSAngularJS是一个 MV* 框架，最适于开发客户端的单页面应用。它不是个功能库，而是用来开发动态网页的框架。它专注于扩展HTML的功能，提供动态数据绑定（data binding），而且它能跟其它框架（如jQuery）合作融洽。如果你要开发的是单页应用，AngularJS就是你的上上之选。Gmail、Google Docs、Twitter和Facebook这样的应用，都很能发挥AngularJS的长处。但是像游戏开发之类对DOM进行大量操纵、又或者单纯需要 极高运行速度
11、的应用，就不是AngularJS的用武之地了。3 AugularJS特性AngularJS是一个新出现的强大客户端技术，提供给大家的一种开发强大应用的方式。这种方式利用并且扩展HTML，CSS和javascript，并且弥补了它们的一些非常明显的不足。本应该使用HTML来实现而现在由它开发的动态一些内容。AngularJS有五个最重要的功能和特性：3.1 特性一：双向的数据绑定数据绑定可能是AngularJS最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的web应用可能包含了80%的代码用来处理，查询和监听DOM。数据绑定是的代码更少，你可以专注于你的应用。我们
12、想象一下Model是你的应用中的简单事实。你的Model是你用来读取或者更新的部分。数据绑定指令提供了你的Model投射到view的方法。这些投射可以无缝的，毫不影响的应用到web应用中。传统来说，当model变化了。 开发人员需要手动处理DOM元素并且将属性反映到这些变化中。这个一个双向的过程。一方面，model变化驱动了DOM中元素变化，另一方面，DOM元素的变化也会影响到Model。这个在用户互动中更加复杂，因为开发人员需要处理和解析这些互动，然后融合到一个model中，并且更新View。这是一个手动的复杂过程，当一个应用非常庞大的时候，将会是一件非常费劲的事情。这里肯定有更好的解决方案
13、！那就是AngularJS的双向数据绑定，能够同步DOM和Model等等。这里有一个非常简单的例子，用来演示一个input输入框和元素的双向绑定(例01)： Name: Hello, user.name! 说明：实际效果请大家看AngularJS/demo/index.html3.2 特性二：模板在AngularJS中，一个模板就是一个HTML文件。但是HTML的内容扩展了，包含了很多帮助你映射model到view的内容。HTML模板将会被浏览器解析到DOM中。DOM然后成为AngularJS编译器的输入。AngularJS将会遍历DOM模板来生成一些指导，即，directive（指令）。所有
14、的指令都负责针对view来设置数据绑定。我们要理解AuguarJS并不把模板当做String来操作。输入AngularJS的是DOM而非string。数据绑定是DOM变化，不是字符串的连接或者innerHTML变化。使用DOM作为输入，而不是字符串，是AngularJS区别于其它的框架的最大原因。使用DOM允许你扩展指令词汇并且可以创建你自己的指令，甚至开发可重用的组件。最大的好处是为设计师和开发者创建了一个紧密的工作流。设计师可以像往常一样开发标签，然后开发者拿过来添加上功能，通过数据绑定将会使得这个过程非常简单。这里有一个例子，我们使用ng-repeat指令来循环图片数组并且加入img模板，如下：function AlbumCtrl($scope) scope.images = image:img/image_01.png, description:Image 01 description, i
