本书由专业专家根据Angular全新版本撰写,是一本全面而系统的Angular实战教程,对Angular的所有功能、特性、开发方法和技巧进行了全面而透彻的讲解,是系统学习Angular的专业参考书。在写作方式上,本书以一种开创性的方式使理论与实践达到了极好的平衡,不仅对理论知识进行了清晰而透彻的阐述,而且根据读者理解这些知识的需要精心设计和构思了92个完整的实战案例,每个案例分为功能描述、实现代码、页面效果和源码分析4个部分,旨在帮助读者通过实践的方式达到迅速掌握Angular的目的。
全书共分为11个章,从普通页面开发者使用的角度,详细地介绍了Angular所涉及的全部应用知识。全书的整体框架分为两个部分;一部分为Angular基础知识介绍,该部分为9章,分别为Angular简介、表达式与模板、数据绑定与作用域、依赖注入、MVC模式、Angular的服务、与服务端交互、Angular的指令、使用$location;第二部分为实践总结和案例开发,该部分为2章,分别为Angular
案例开发的注意事项和很好实践、两个完整的综合案例开发。
近来,国内开发者对Angular的学习越来越热,有一个非常重要的原因在于Angular框架与以往任何一套前端框架都不同,它的主旨是克服HTML在构建应用上的不足,并补足这些应用的缺陷,如使用双大括号语法进行数据绑定、使用DOM控制结构来实现对页面元素的控制等一系列的方法,同时,Angular又是一个完整的端对端的解决方案,可以非常轻松地构建一个CRUD应用,并非常方便地实现测试、发布的功能。
本书通过理论与实践相结合的方式,精选了92个简洁、实用的实例,用由浅入深、逐层推进的方式,详细地展示了Angular作为前端Web页面开发新利器的方方面面。通过本书的学习,读者不仅可以全面了解并掌握整个Angular框架的详实内容,而且还能体会到Angular框架强大功能所带来的代码的优化,快速、高效地开发出受人喜爱的Web应用。
本书主要内容:
1.
对Angular特点、适用范围、开发环境进行讲解,并开发简单的Angular页面应用;
2.
对Angular表达式、控制器、模板中的过滤器、过滤器的应用的详细讲解;
3. 对Angular数据绑定与作用域功能的详细讲解;
4.
对依赖注入、注入标记、场景的详细讲解;
5.
对Angular中的MVC各个组成部分Model、Controller、View组件进行详细讲解;
6.
介绍了Angular服务的概念,并讲解服务的创建、管理和在控制器中注入服务;
7.
对Angular与服务端的交互、单元测试和交互安全进行了详细的讲解;
8. 开发Angular应用时的注意事项和很好实践;
……
前 言
第1章 初识Angular 1
1.1 Angular简介 1
1.1.1 特点 2
1.1.2 适用范围 2
1.1.3 搭建开发Angular应用的环境 2
1.2 开发简单的Angular应用 3
示例1-1 编写一个简单的Angular程序 3
示例1-2 编写一个具有计算功能的Angular程序 4
示例1-3 编写一个绑定页面元素的Angular程序 6
示例1-4 编写一个绑定多个页面元素的Angular程序 7
1.3 本章小结 9
第2章 Angular基础知识 10
2.1 Angular中的表达式 10
2.1.1 Angular表达式与JavaScript表达式的区别 10
示例2-1 Angular表达式与JavaScript表达式之间的相互调用 11
2.1.2 $window窗口对象在表达式中的使用 13
示例2-2 $window窗口对象在表达式中的使用 13
2.1.3 Angular表达式的容错性 14
示例2-3 Angular表达式的容错性 14
2.2 Angular中的控制器 16
2.2.1 控制器的概念 16
2.2.2 控制器初始化$scope对象 16
示例2-4 控制器初始化$scope对象 16
2.2.3 添加$scope对象方法 18
示例2-5 通过表达式绑定$scope对象的方法 18
示例2-6 在事件中绑定$scope对象的方法 20
示例2-7 添加带参数的$scope方法 21
2.2.4 $scope对象属性和方法的继承 23
示例2-8 $scope对象中方法和属性的继承 23
2.3 Angular中的模板 24
2.3.1 构建模板内容 25
示例2-9 构建模板内容 25
2.3.2 使用指令复制元素 26
示例2-10 使用指令复制元素 26
2.3.3 添加元素样式 29
示例2-11 添加元素样式 30
2.3.4 控制元素的隐藏与显示状态 33
示例2-12 控制元素的隐藏与显示状态 33
2.4 模板中的表单控件 35
2.4.1 表单基本验证功能 35
示例2-13 表单基本验证功能 35
2.4.2 表单中的checkbox和radio控件 37
示例2-14 表单中的checkbox和radio控件 38
2.4.3 表单中的select控件 39
示例2-15 表单中的select控件 41
2.5 本章小结 43
第3章 Angular的过滤器和作用域 44
3.1 模板中的过滤器 44
3.1.1 排序方式过滤 44
示例3-1 排序方式过滤 45
3.1.2 匹配方式过滤 48
示例3-2 匹配方式过滤 49
3.1.3 自定义过滤器 51
示例3-3 自定义过滤器 51
3.2 过滤器的应用 54
3.2.1 表头排序 55
示例3-4 表头排序 55
3.2.2 字符查找 57
示例3-5 字符查找 58
3.3 作用域概述 60
3.3.1 作用域特点 60
示例3-6 $watch方法的使用 60
3.3.2 作为数据模型的作用域 62
示例3-7 作为数据模型的作用域 62
3.4 作用域的层级和事件 64
3.4.1 作用域的层级 64
示例3-8 作用域的层级 64
3.4.2 作用域事件的传播 67
示例3-9 作用域事件的传播 69
3.5 本章小结 71
第4章 Angular的依赖注入 72
4.1 依赖注入介绍 72
4.1.1 依赖注入的原理 72
示例4-1 依赖注入的原理 73
4.1.2 简单依赖注入的示例 75
示例4-2 简单依赖注入的示例 75
4.2 依赖注入标记 78
4.2.1 推断式注入 78
示例4-3 推断式注入的示例 78
4.2.2 标记式注入 79
示例4-4 标记式注入的示例 80
4.2.3 行内式注入 82
示例4-5 行内式注入的示例 82
4.3 $injector常用API 84
4.3.1 has和get方法 84
示例4-6 has和get方法的示例 84
4.3.2 invoke方法 86
示例4-7 invoke方法的示例 86
4.3.3 依赖注入应用的场景 88
4.4 本章小结 89
第5章 Angular中MVC模式 90
5.1 MVC模式概述 90
5.1.1 MVC简介 90
5.1.2 使用Angular中MVC的优势和缺点 91
5.2 Model组件 92
5.2.1 Model组件的基础概念 92
示例5-1 Model组件的基础概念 92
5.2.2 使用ngRepeater方式遍历Model对象 94
示例5-2 使用ngRepeater方式遍历Model对象 94
5.3 Controller组件 96
5.3.1 控制器的属性和方法 96
示例5-3 控制器的属性和方法 96
5.3.2 控制器方法中的参数 98
示例5-4 控制器方法中的参数 98
5.3.3 控制器中属性和方法的继承 100
示例5-5 控制器中属性和方法的继承 100
5.4 View组件 103
5.4.1 View组件中的模板切换 103
示例5-6 View组件中的模板切换 103
5.4.2 在切换视图模板时传参数 106
示例5-7 多页面切换并传递参数 106
5.5 本章小结 109
第6章 Angular的服务 110
6.1 Angular服务介绍 110
6.1.1 内置服务 110
示例6-1 内置服务调用 111
6.1.2 自定义服务 112
示例6-2 使用$provide自定义服务 113
6.2 创建Angular服务 115
6.2.1 使用factory方法自定义服务 115
示例6-3 使用factory方法自定义服务 115
6.2.2 使用service方法自定义服务 117
示例6-4 使用service方法自定义服务 117
6.2.3 使用constant和value方法自定义服务 119
示例6-5 使用constant和value方法自定义服务 120
6.3 管理服务的依赖 122
6.3.1 添加自定义服务依赖项方法 122
示例6-6 添加自定义服务依赖项方法 122
6.3.2 嵌套注入服务 124
示例6-7 嵌套注入服务 125
6.4 添加服务的其他设置 127
6.4.1 服务的装饰器 127
示例6-8 服务的装饰器 127
6.4.2 服务的多例性 129
示例6-9 服务的多例性 129
6.5 本章小结 132
第7章 Angular与服务端交互 133
7.1 与服务端交互介绍 133
7.1.1 传统的AJAX方式与服务端交互 134
示例7-1 传统的AJAX方式与服务端交互 134
7.1.2 使用$http快捷方法与服务端交互 137
示例7-2 使用$http快捷方法与服务端交互 137
7.1.3 使用$http配置对象方式与服务端交互 139
示例7-3 使用$http配置对象方式与服务端交互 140
7.2 Angular中的缓存 143
7.2.1 $cacheFactory服务创建缓存对象 143
示例7-4 $cacheFactory服务创建缓存对象 144
7.2.2 $http服务中的缓存 146
示例7-5 $http服务中的缓存 146
7.2.3 自定义$http服务中的缓存 148
示例7-6 自定义$http服务中的缓存 148
7.3 $resource服务 150
7.3.1 $resource服务的使用和对象中的方法 150
示例7-7 $resource对象中方法 的使用 152
7.3.2 在$resource服务中自定义请求方法 155
示例7-8 $resource服务中自定义方法 155
7.4 promise对象 159
7.4.1 promise的基本概念和使用方法 159
示例7-9 promise对象的创建和使用 160
7.4.2 promise对象在$http中的应用 162
示例7-10 promise对象在$http中的应用 162
7.5 本章小结 164
第8章 Angular的指令 165
8.1 Angular指令概述 165
8.1.1 指令定义的基础 165
示例8-1 创建一个新的指令 166
8.1.2 设置指令对象的基础属性 168
示例8-2 设置指令对象的基础属性 168
8.2 Angular指令对象的重要属性 170
8.2.1 指令对象中的transclude属性 170
示例8-3 设置指令对象中的transclude属性 171
8.2.2 指令对象中的link属性 173
示例8-4 设置指令对象中的link属性 173
8.2.3 指令对象中的compile属性 175
示例8-5 设置指令对象中的compile属性 175
8.3 Angular指令对象的scope属性 177
8.3.1 scope属性是布尔值 178
示例8-6 scope属性是布尔值 178
8.3.2 scope属性是对象 180
示例8-7 scope属性是JSON对象 181
8.4 Angular指令对象的require和controller属性 183
8.4.1 require和controller属性的概念 184
8.4.2 一个使用require和controller属性的示例 184
示例8-8 一个使用require和controller属性的示例 184
8.5 本章小结 187
第9章 使用$location 188
9.1 初识$location 188
9.1.1 调用$location对象的只读方法 188
示例9-1 调用$location对象的只读方法 189
9.1.2 调用$location对象的读写类方法 190
示例9-2 调用$location对象的读写方法 191
9.2 $location对象的事件 193
9.2.1 $locationChangeStart事件 193
示例9-3 捕捉$locationChangeStart事件 193
9.2.2 $locationChangeSuccess事件 195
示例9-4 捕捉locationChange-Success事件 195
9.3 路由模式和地址变更 197
9.3.1 标签(hashbang)模式 198
示例9-5 标签模式下获取页面URL中的内容 198
9.3.2 HTML 5模式 200
示例9-6 HTML 5模式下获取页面URL中的内容 200
9.3.3 模式间的区别与关联 202
示例9-7 两种模式下分别获取页面URL中的内容 203
9.3.4 路由对象方法的双向绑定 206
示例9-8 路由对象方法的双向绑定 207
9.4 本章小结 208
第10章 使用Angular开发的注意事项和最佳实践 209
10.1 页面元素的控制 209
10.1.1 调用element方法控制DOM元素 209
示例10-1 调用element方法控制DOM元素 210
10.1.2 解决setTimeout改变属性的无效 212
示例10-2 解决setTimeout改变属性的无效 212
10.1.3 解决双大括号绑定元素时的闪烁问题 214
示例10-3 解决双大括号绑定元素时的闪烁问题 214
10.2 使用ng-repeat时的注意事项 216
10.2.1 注意ng-repeat中的索引号 216
示例10-4 注意ng-repeat中的索引号 216
10.2.2 使用track by排序ng-repeat中的数据 219
示例10-5 使用track by排序ng-repeat中的数据 219
10.2.3 正确理解ng-repeat指令中scope的继承关系 222
示例10-6 正确理解ng-repeat指令中scope的继承关系 222
10.3 解决单击按钮事件中的冒泡现象 225
示例10-7 解决单击按钮事件中的冒泡现象 225
10.4 释放多余的$watch监测函数 227
示例10-8 释放多余的$watch监测函数 227
10.5 解决ng-if中ng-model值无效的问题 229
示例10-9 解决ng-if中ng-model值无效的问题 230
10.6 本章小结 231
第11章 综合案例开发 232
11.1 基于AngularJS使用canvas绘制圆形进度条 232
11.1.1 需求分析 232
11.1.2 界面效果 233
11.1.3 功能开发 233
11.1.4 源码解析 238
11.2 使用AngularJS开发一个抽奖应用 240
11.2.1 需求分析 240
11.2.2 界面效果 240
11.2.3 功能开发 241
11.2.4 源码解析 247
11.3 本章小结 251