AngularJS是一款来自Google的前端JS框架,它的核心特性有:MVC、双向数据绑定、指令和语义化标签、模块化工具、依赖注入、HTML模板,以及对常用工具的封装,例如$http、$cookies、$location等。AngularJS框架的体积非常小,但是设计理念和功能却非常强大,值得前端***深入学习。
本书对AngularJS框架的核心特性做了全面的介绍,包括常用的开发工具和开发环境。作为国内**本关于AngularJS的书籍,本书是学习AngularJS的**入门工具。 用AngularJS开发下一代Web应用(来自Google,*具潜力的JavaScript框架的**著作)_【美】格林(GreenB.),【美】夏德瑞(SeshadriS.) ,大漠穷秋 译_电子工业出版社_

译者序
本书是国内**本关于AngularJS 框架的书籍。
AngularJS 是一款来自Google 的前端JS 框架,该框架已经被应用到了Google
的多款产品中。这款框架*核心特性有:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
目前,web
应用的规模和复杂度不断提升,各种框架层出不穷,然而从实际的使用效果来看,我们所做的努力依然不够。与各种服务端框架相比,前端框架在设计理念方面仍然存在很大的提升空间。
例如,很多服务端框架都有“依赖注入”的概念,但目前市面上很少有人会把这一概念应用到前端框架中,而AngularJS
就是**个吃螃蟹的。
又如,AngularJS 框架自身是通过TDD(测试驱动)的方式来开发的,从这个角度来看,AngularJS
是敏捷开发的一次成功实践。
再例如,使用模板和控制器的概念,AngularJS 对DOM
操作进行了彻底的封装,因此,对于业务代码来讲,根本不需要再去关心原始的DOM 操作,例如设置CSS
样式、注册事件监听器等。
这种设计还带来了另外一个好处,那就是让单元测试和集成测试成为可能。大家都知道,一般来说,想对前端的JavaScript
代码进行完善的单元测试是非常困难的,这里面*关键的一个问题就是,很多代码里面会涉及DOM
操作,因此很多代码脱离浏览器环境是无法运行的,更不用说进行单元测试了!而AngularJS 就很好地解决了这一问题。
类似这种理念性的变革,在AngularJS 中比比皆是。正如原书作者所言,AngularJS
并没有发明这些概念,只是把现有的概念应用到了前端框架中。AngularJS
不是一个大而全的框架,但是它所提出的很多探索性的理念值得所有专注前端的***悉心研究。
*后,正如大���数Google 的产品一样,AngularJS
框架是完全免费开源的,这对于国内的很多***来说也是需要首先考虑的优势。
作为一个前端开发的老鸟,译者在翻译本书的过程中也体验到了Google
牛人们思想上的高瞻远瞩。所以,这里要首先感谢张春雨编辑当初给我**了这款框架。同时也必须感谢电子工业出版社各位编辑的辛苦劳动,让本书的中文版得以面世。另外,本书能够
成为AngularJS 框架的**本中文书籍,对此译者也感到相当自豪,也算是为国内软件工业水平的提升尽了绵薄之力。
当然,由于译者本身的阅历和水平所限,难免存在一些疏漏和错误,欢迎读者不吝指正。本书所涉及的各种引用资源都可以在github
的大漠穷秋
2013 年6 月27 日于南京

前言
.............................................................................
vii
第1 章 AngularJS 简介 .................................................
1
一些概念
...............................................................................................................
2
客户端模板
....................................................................................................
2
Model View Controller(MVC)
.....................................................................
3
数据绑定
........................................................................................................
4
依赖注入
........................................................................................................
5
指令
................................................................................................................
6
实例:购物车
.......................................................................................................
6
接下来
...................................................................................................................
9
第2 章 AngularJS 应用骨架
.........................................11
调用Angular
.......................................................................................................
11
加载脚本
......................................................................................................
11
使用ng-app 声明Angular 的边界
................................................................
12
Model View Controller
........................................................................................
12
模板和数据绑定
..................................................................................................
15
显示文本
......................................................................................................
16
表单输入
......................................................................................................
16
浅谈非入侵式JavaScript
..............................................................................
19
列表、表格以及其他迭代型元素
.................................................................
22
隐藏和显示
..................................................................................................
24
CSS 类和样式
...............................................................................................
25
反思src 和href 属性
....................................................................................
27
表达式
..........................................................................................................
28
区分UI 和控制器的职责
..............................................................................
28
利用$scope 暴露模型数据
...........................................................................
29
使用$watch 监控数据模型的变化
...............................................................
30
watch() 中的性能注意事项
...........................................................................
33
使用Module(模块)组织依赖关系
..................................................................
35
我需要多少个模块呢
....................................................................................
38
使用过滤器格式化数据
.......................................................................................
39
使用路由和$location 切换视图
..........................................................................
40
index.html
.....................................................................................................
41
list.html
........................................................................................................
42
detail.html
....................................................................................................
42
controllers.js
.................................................................................................
42
与服务器交互
.....................................................................................................
43
使用指令修改DOM
............................................................................................
45
index.html
.....................................................................................................
46
controllers.js
.................................................................................................
46
校验用户输入
.....................................................................................................
47
继续前进
.............................................................................................................
48
第3 章 使用AngularJS 进行开发 .................................49
项目结构
.............................................................................................................
49
工具
....................................................................................................................
52
各种IDE
......................................................................................................
52
运行你的应用
.....................................................................................................
53
使用Yeoman
................................................................................................
53
不使用Yeoman
.............................................................................................
54
AngularJS 下的测试
............................................................................................
54
Karma
...........................................................................................................
55
单元测试
.............................................................................................................
57
端到端/ 集成测试
...............................................................................................
58
编译
....................................................................................................................
60
其他好用的工具
..................................................................................................
62
调试
..............................................................................................................
62
Batarang
.......................................................................................................
62
Yeoman :优化你的工作流程
..............................................................................
65
安装Yeoman
................................................................................................
66
运行服务器
..................................................................................................
66
添加新的路由、视图和控制器
.....................................................................
66
关于测试
......................................................................................................
67
构建项目
......................................................................................................
67
与RequireJS 集成
...............................................................................................
68
第4 章 一款AngularJS 应用剖析 .................................77
应用
....................................................................................................................
77
模型、控制器和模板之间的关系
........................................................................
78
模型
....................................................................................................................
79
控制器、指令及服务
..........................................................................................
80
服务
..............................................................................................................
80
指令
..............................................................................................................
84
控制器
..........................................................................................................
86
模板
....................................................................................................................
90
测试
....................................................................................................................
96
单元测试
......................................................................................................
96
场景测试
....................................................................................................
100
第5 章 与服务器交互
.................................................101
利用$http 进行通信
..........................................................................................
101
进一步配置请求
.........................................................................................
103
设置HTTP 头
.............................................................................................
104
缓存响应
....................................................................................................
105
转换请求和响应
.........................................................................................
106
单元测试
...........................................................................................................
107
使用RESTful 资源
............................................................................................
108
声明
............................................................................................................
111
自定义方法
................................................................................................
111
别用回调!(除非你真的需要它们)
......................................................... 112
简化服务端操作
.........................................................................................
112
ngResource 单元测试
.................................................................................
113
$q 和Promise
....................................................................................................
114
拦截响应
...........................................................................................................
115
**性措施
.......................................................................................................
116
JSON 漏洞
..................................................................................................
116
XSRF
..........................................................................................................
117
第6 章 指令
..............................................................119
指令和HTML 校验
...........................................................................................
119
API 概览
...........................................................................................................
120
为你的指令命名
.........................................................................................
121
用来定义指令的对象
..................................................................................
122
内嵌
............................................................................................................
126
compile 和link 函数
...................................................................................
126
作用域
........................................................................................................
128
操作DOM 元素
..........................................................................................
132
控制器
........................................................................................................
134
继续前进
...........................................................................................................
137
第7 章 其他注意点
....................................................139
$location
...........................................................................................................
139
HTML5 模式和Hashbang 模式
..................................................................
142
AngularJS Module 类的方法
.............................................................................
145
Main 方法在哪里
........................................................................................
145
加载和依赖
................................................................................................
146
快捷方法
....................................................................................................
146
使用$on、$emit 和$broadcast 在作用域之间进行交互
................................... 149
Cookies
.............................................................................................................
150
国际化和本地化
................................................................................................
151
在AngularJS 里面应该怎么做
...................................................................
152
怎样才能让一切运行起来呢
......................................................................
152
常见问题
....................................................................................................
153
HTML 无害化和Sanitize 模块
..........................................................................
153
Linky
..........................................................................................................
155
第8 章 速查和技巧
....................................................157
封装jQuery Datepicker
.....................................................................................
157
ng-model
....................................................................................................
159
绑定select
..................................................................................................
159
调用select
..................................................................................................
159
例子中的其他内容
.....................................................................................
160
Teams List 应用:过滤器和控制器的交互
........................................................ 161
搜索框
........................................................................................................
165
下拉框
........................................................................................................
165
复选框
........................................................................................................
165
迭代器
........................................................................................................
165
AngularJS 中的文件上传
..................................................................................
166
使用Socket.IO
..................................................................................................
169
简单的分页服务
................................................................................................
172
与服务端协作及登录
........................................................................................
175
结论
..................................................................................................................
179
索引
...........................................................................181

我们都希望开发更小型、更轻量的Web应用,让创建应用更加容易,并且当项目变大时仍然易于测试、扩展和维护。这本手册将为你介绍AngularJS,它是一个开源的JavaScript框架,它使用MVC架构、数据绑定、客户端模板以及依赖注入等技术,从而为构建Web应用创建急需的结构。
本书的作者是两位在Google负责AngularJS框架的工程师,他们将**读者概览整个框架的核心特性,并构建一款可运行的AngularJS应用,内容涵盖布局、测试、编译及调试整个过程。通过这个过程,你将会学到AngularJS是怎样降低Web应用复杂性的。■ 深入理解Angular的构件,学习它们是如何协同工作的。
■ 使用MVC模式分离控制逻辑、数据以及渲染职责,从而获得*大程度的灵活性。
■ 利用客户端模板在浏览器中装配你的完整应用。
■ 利用AngularJS的指令,用声明式语法来扩展HTML。
■ 使用$http服务与服务器交互并实现简单的缓存。
■ 利用依赖注入改进重构、测试以及多种环境下的设计。
■ 获得Web应用中常见问题的代码示例。