编辑推荐

　　AngularJS属于Web前端开发技术，《AngularJS入门与进阶》涉及AngularJS与后端服务交互相关的知识点。对于Web前端开发人员来说，JavaScript语言肯定不陌生，而Node.js使得JavaScript语言能够在操作系统环境下运行。笔者是一名全栈开发工程师，本打算使用JavaEE技术发布Web服务，考虑到《AngularJS入门与进阶》面向的读者主要为Web前端开发人员，为了避免Web服务部署困难，所以最终选择使用Node.js开发服务端接口。另外，《AngularJS入门与进阶》也介绍了一些基于Node.js的Web前端开发工具，希望能够帮助大家提高日常开发效率。

内容简介

　　

　　AngularJS是Google公司开发的一款Web前端框架，功能强大，提供了一些优秀的特性，例如双向数据绑定、MVC架构模式、指令等，能够在很大程度上降低Web前端开发的难度，因此深受广大Web前端开发人员的喜爱。

　　《AngularJS入门与进阶》分为两个部分，第一部分为入门篇，从第1~14章，主要介绍AngularJS开发环境搭建、数据绑定、指令及路由等基本知识点，每个知识点都会有一个完整的案例与之对应；第15~19章为《AngularJS入门与进阶》的第二部分，即进阶篇，主要介绍一些常用的AngularJS第三方精华扩展，以及目前主流的Web前端工具，包括包管理工具Npm和Bower、前端流式自动化工具Gulp及前端单元测试工具Jasmine&Karma。在最后两章中，我们综合运用前面所学的知识，实现了一个AngularJS版本的扫雷游戏和一个客户管理系统。

　　《AngularJS入门与进阶》既适合Web前端开发初学者、Web前端开发工程师阅读，也适合作为高等院校和培训学校相关专业的教材。

作者简介

　　江荣波，毕业于江苏科技大学，目前就职于北京科蓝软件系统股份有限公司，担任Java高级工程师，参与过网上银行、直销银行、短信平台、渠道整合平台开发，对开源前端框架jQuery、AngularJS等有较深入研究，曾作为CSDN特邀编辑参与AngularJS知识库构建。

目录

第一部分入门篇
第1章走进AngularJS世界3
1.1AngularJS简介3
1.2搭建AngularJS开发环境3
1.2.1选择集成开发工具3
1.2.2下载与安装AngularJS6
1.2.3代码调试工具7
1.3第一个AngularJS应用8
1.4AngularJS应用剖析9
1.4.1第一个AngularJS应用解惑9
1.4.2AngularJS应用构成元素10
1.4.3AngularJS表达式10
1.5本章小结12
第2章双向数据绑定13
2.1AngularJS双向数据绑定13
2.2ng-model指令14
2.3ng-bind指令16
2.4数据绑定实例：价格计算器17
2.5本章小结18
第3章AngularJS与MVC19
3.1MVC模式简介19
3.2AngularJS中的MVC20
3.2.1AngularJS控制器的定义20
3.2.2控制器对象的实例化21
3.3使用MVC思想重构价格计算器程序22
3.4控制器的作用域范围23
3.5控制器中处理DOM事件25
3.6本章小结27
第4章应用模块化28
4.1应用模块划分的重要性28
4.2AngularJS中的模块28
4.2.1AngularJS模块的定义29
4.2.2使用模块解决命名冲突问题29
4.3模块化最佳实践32
4.4本章小结33
第5章作用域与事件34
5.1AngularJS作用域详解34
5.2AngularJS作用域继承36
5.2.1JavaScript对象继承机制36
5.2.2AngularJS作用域对象原型继承39
5.3作用域高级特性42
5.3.1$watch方法监视作用域42
5.3.2作用域监视解除45
5.3.3$apply方法与$digest循环46
5.3.4$apply与$digest应用实战47
5.3.5$timeout与$interval服务介绍49
5.4作用域事件路由与广播50
5.4.1$emit方法实现事件路由50
5.4.2$broadcast方法实现事件广播52
5.4.3作用域对象$on方法详解55
5.5本章小结55
第6章路由与多视图56
6.1创建多视图应用56
6.1.1使用$routeProvider创建映射56
6.1.2创建多视图58
6.1.3通过路由切换视图58
6.2通过URL向控制器传递参数60
6.3ng-template指令的使用62
6.4$location服务64
6.5$location实现多视图切换66
6.6路由事件67
6.7ng-include指令68
6.8UIRouter框架使用69
6.8.1UIRouter下载与安装69
6.8.2UIRouter使用案例70
6.9本章小结73
第7章AngularJS表单校验74
7.1Web前端表单校验的必要性74
7.2AngularJS表单校验模式74
7.3ngMessages模块79
7.4本章小结82
第8章AngularJS指令83
8.1内置指令详解83
8.2AngularJS自定义指令86
8.3指令定义对象详解88
8.3.1link方法88
8.3.2compile方法92
8.3.3scope属性与指令作用域94
8.3.4孤立作用域与父作用域模型数据绑定95
8.3.5Transclusion100
8.3.6controller方法与require属性104
8.4自定义表单验证模式107
8.5本章小结109
第9章Service、Factory与Provider110
9.1Service110
9.2Factory112
9.3Provider113
9.4Value&Constant114
9.5本章小结115
第10章AngularJS过滤器116
10.1过滤器使用方法116
10.2AngularJS内置过滤器118
10.3自定义过滤器126
10.3.1案例一：自定义金额转换人民币大写过滤器127
10.3.2案例二：自定义带参数的过滤器129
10.4第三方过滤器库的使用131
10.4.1angular-filter131
10.4.2angular-emoji-filter133
10.5本章小结134
第11章AngularJS中的依赖注入135
11.1JavaScript依赖注入实现138
11.2AngularJS中的依赖注入142
11.3$provide服务介绍143
11.4$injector服务介绍145
11.5本章小结146
第12章AngularJS与动画147
12.1Web动画实现原理147
12.2使用CSS3实现动画150
12.2.1CSS3中的Transform属性150
12.2.2CSS3中的Transition属性153
12.2.3CSS3中的Animation属性157
12.2.4常用的CSS3动画库160
12.3AngularJS动画162
12.3.1基于事件驱动的CSS3动画162
12.3.2AngularJS中的JavaScript动画166
12.3.3ngView视图切换动画案例168
12.3.4ngAnimate与CSS3动画库整合172
12.3.5ngFx动画扩展库175
12.4本章小结177
第13章Cookie读写178
13.1Cookie简介178
13.2在JavaScript中操作Cookie179
13.3在AngularJS中操作Cookie183
13.4本章小结186
第14章Promise187
14.1AngularJS中的Promise机制188
14.2AngularJS请求Web服务190
14.2.1$http服务191
14.2.2使用Express构建RESTful服务194
14.2.3$resource服务197
14.3AngularJS文件上传200
14.4AngularFileUpload模块介绍204
14.5本章小结207

第二部分进阶篇
第15章AngularUI211
15.1UIBootstrap211
15.1.1警告框案例212
15.1.2复选框案例213
15.1.3日历控件案例215
15.1.4模态对话框案例216
15.1.5下拉菜单案例220
15.2UIAce222
15.3UIGrid227
15.4UIDate229
15.5UISelect232
15.6本章小结234
第16章AngularJS精华扩展235
16.1利用AngularChart生成图表235
16.1.1柱状图案例236
16.1.2曲线图案例237
16.1.3饼状图案例239
16.2利用Videogular实现播放器241
16.3利用AngularMasonry实现照片墙246
16.4利用ngDialog实现对话框250
16.5本章小结253
第17章常用Web前端工具集254
17.1Node.js安装与使用254
17.2Npm包管理工具257
17.2.1Npm安装257
17.2.2初始化项目258
17.2.3安装Node模块259
17.2.4卸载Node模块260
17.3Bower管理工具260
17.3.1安装Bower261
17.3.2初始化Bower261
17.3.3使用Bower安装包263
17.3.4查看包的信息263
17.3.5更新包的版本264
17.3.6查找包264
17.3.7卸载包264
17.4Gulp项目管理工具265
17.4.1Gulp的安装与使用265
17.4.2利用JSHint验证JavaScript代码266
17.4.3压缩JavaScript代码268
17.4.4使用GulpChanged插件更新文件270
17.4.5使用GulpPlumber插件处理异常271
17.4.6使用Gulp压缩图片271
17.4.7使用Gulp编译Less272
17.4.8使用GulpBrowsersync插件进行调试275
17.5Jasmine&Karma单元测试工具277
17.5.1安装Jasmine278
17.5.2使用Jasmine进行单元测试278
17.5.3在浏览器环境下使用Jasmine282
17.5.4安装并使用karma284
17.5.5整合Jasmine&Karma286
17.5.6AngularJS单元测试288
17.6本章小结294
第18章综合案例：扫雷游戏295
18.1搭建开发环境295
18.2游戏元素介绍296
18.3实现布雷区297
18.4随机生成地雷300
18.5生成方格中的数字303
18.6响应右击事件308
18.7游戏胜利与失败条件检测311
18.8实现重新开始游戏功能313
18.9自动翻开相邻方格314
18.10本章小结317
第19章综合案例：客户管理系统318
19.1项目整体介绍318
19.2实现用户模块321
19.3实现主面板模块326
19.4实现报表模块328
19.5实现客户信息管理模块331
19.6本章小结335

精彩书摘

　　第2章双向数据绑定

　　数据绑定是AngularJS框架最优秀的特性之一，能够帮助Web前端开发人员在很大程度上减少对DOM的操作，本章我们就来深入学习这种机制。

　　AngularJS双向数据绑定

　　数据绑定是AngularJS框架在视图（DOM元素）与作用域之间建立的数据同步机制。所谓“双向”，是指界面的操作能够实时同步到作用域中，作用域中的数据修改也能够实时回显到界面中。

　　作用域可以被视为一个容器，里面有一些基于key-value的数据。假如在视图中有两个输入框，输入框的name属性分别为uname和pword，如图2.1所示。为了和表单元素建立数据绑定，AngularJS会在作用域中添加两个对应的属性，假如名称也为uname和pword。当用户输入内容发生变化时，AngularJS框架就把表单内容同步到作用域中对应的变量中，而当我们改变作用域中的变量值时，AngularJS又会把修改后的变量值同步到表单中，这就是AngularJS的双向数据绑定。

　　图2.1AngularJS双向数据绑定图解

　　ng-model指令

　　为了建立数据绑定，我们需要用到AngularJS另外一个内置指令ng-model，该指令只能用在表单元素上，使用方法如下：

　　

　　在input输入框上添加ng-model指令后，AngularJS框架就会在对应的作用域中创建一个uname属性和该输入框进行绑定。

　　数据绑定是AngularJS最优秀的特性之一，下面以一个案例来说明AngularJS数据绑定机制的好处。假如我们要完成这样一个功能，即把用户在表单中输入的信息动态回显到页面中。

　　如果使用原生的JavaScript，可以通过document对象的getElementById()方法获取输入框对象，响应输入框的keyup事件，在输入框的keyup事件响应方法中获取输入框内容，然后同样以操作DOM的方式把输入框内容显示到页面中，具体代码如下：

　　代码清单：ch02\ch02_01.html

用户名：

　　上面的代码非常简单，相信读者都能看懂，接下来在浏览器中运行ch02_01.html页面，效果如图2.2所示。　　图2.2动态回显用户输入示例　　可以看到界面上显示的内容随着输入的改变而动态改变。本例中我们编写了数行JavaScript代码，为了突出AngularJS数据绑定机制的优势，我们再使用AngularJS数据绑定机制来完成这个案例，具体代码如下：　　代码清单：ch02\ch02_02.html
用户名：
{{uname}}

在浏览器中运行ch02_02.html页面，就会发现运行效果和上一个案例完全相同，但是本案例中的核心代码仅仅只有下面两行：
用户名：
{{uname}}　　如上面的代码所示，我们甚至连一行JavaScript代码都没有编写就完成了这个功能，到底是怎样做到的呢？下面对该应用进行剖析：　　上面案例中的ng-app指令用于启动AngularJS应用。需要注意的一点是，当AngularJS遇到ng-app指令时就会创建一个名为$rootSocpe的作用域，该作用域为AngularJS应用的根作用域。　　作用域其实是一个简单的JavaScript对象，形式如下：　　var$rootScope={uname:”江荣波"};　　我们把ng-model指令作为属性添加到input标签中，此时AngularJS会在$rootSocpe作用域中添加一个uname属性和input输入框绑定，当我们在input表单中输入内容时，AngularJS会自动把输入的内容同步到作用域的uname属性中，因此我们不需要自己响应input标签的keyup事件去处理。　　{{uname}}为AngularJS的表达式形式，可以访问AngularJS作用域里的属性，这里我们使用表达式把uname属性输出到页面中。同时AngularJS还能够监视作用域中数据的变化，当数据发生变化时，页面显示内容也能够得到实时更新。　　在上面的例子中，我们向$rootScope作用域中添加属性进行了数据绑定，会造成全局作用域污染，实际项目中并不会这么做，而是把表单和控制器作用域中的属性进行数据绑定。控制器作用域是根作用域$rootScope的子作用域，后面会接触到。　　ng-bind指令　　ng-bind指令是和数据绑定相关的另一个指令，其作用是实现作用域到视图的单向数据绑定，和表达式功能类似，可用于向界面中输出作用域中的数据，例如2.2节案例中输出uname属性的表达式：　　{{uname}}　　可以替换为：　　或者　　不同的是，在使用AngularJS表达式{{name}}时，如果遇到网络问题，就会导致AngularJS加载缓慢，我们会看到浏览器直接把AngularJS表达式当作字符串渲染到页面中，这样用户体验将不是很好，所以推荐使用ng-bind指令。ng-bind指令在AngularJS没有加载完毕的时候是不会解析执行的，只有AngularJS加载完毕才会执行。　　window.alert()方法会中断JavaScript代码的执行，可以通过alert()方法模拟网络加载延迟的情况，例如：　　代码清单：ch02\ch02_04.html
用户名：
　　我们可以在浏览器中运行ch02_04.html页面（见图2.3），未经过AngularJS框架解析的表达式内容直接输出到了页面中。
　　……

前言/序言

　　前言

　　AngularJS是Google公司开发的一款Web前端框架，其源码目前托管在Github上，从其源码的关注度就可以看出AngularJS框架的火热程度。AngularJS提供了一些优秀的特性，例如双向数据绑定、MVC架构模式、指令等，能够在很大程度上降低Web前端开发的难度，因此深受广大Web前端开发人员的喜爱。

　　AngularJS框架功能虽然强大，但是对于初学者来说入门比较困难，主要是因为AngularJS有别于传统的Web前端框架，指令、路由、服务等概念都是其他前端框架所不具备的。纵观AngularJS图书市场，英文图书居多，而中文图书则以翻译为主，缺少一本真正适合初学者入门的书籍。笔者曾担任CSDN特邀编辑参与AngularJS知识库构建，对AngularJS框架有较深入研究，正巧受清华大学出版社编辑夏毓彦的邀请，希望出版一本AngularJS图书，因而促成了《AngularJS入门与进阶》的出版。

　　学习技术的目的通常是希望能够快速用在项目实战中。在选择IT图书时，通常希望以实用为主，专业术语堆砌的书籍容易造成理解困难，所以表述通俗、案例简单且能说明问题的书籍往往受到大家的青睐。《AngularJS入门与进阶》正好符合这种风格，尽量避免过多的专业术语，每个知识点都附加一个完整的案例，读者可以根据代码结合案例运行效果进行学习。

　　虽然AngularJS属于Web前端开发技术，但是《AngularJS入门与进阶》也涉及AngularJS与后端服务交互相关的知识点。对于Web前端开发人员来说，JavaScript语言肯定不陌生，而Node.js使得JavaScript语言能够在操作系统环境下运行。笔者是一名全栈开发工程师，本打算使用JavaEE技术发布Web服务，考虑到《AngularJS入门与进阶》面向的读者主要为Web前端开发人员，为了避免Web服务部署困难，所以最终选择使用Node.js开发服务端接口。另外，《AngularJS入门与进阶》也介绍了一些基于Node.js的Web前端开发工具，希望能够帮助大家提高日常开发效率。

　　需要注意的是，《AngularJS入门与进阶》使用Brackets作为代码编辑器，使用Chrome浏览器作为代码运行与调试工具，读者需要安装这两款工具，然后可以从《AngularJS入门与进阶》指定的Github勘误页面中获取《AngularJS入门与进阶》的所有源代码。每个章节源码均放在对应的目录中，例如ch01目录中为第1章所有源码。读者可以将《AngularJS入门与进阶》所有源码导入Brackets工作空间中，然后通过Brackets编辑器的实时预览工具运行《AngularJS入门与进阶》的案例代码。

　　另外，《AngularJS入门与进阶》从开始写作到完稿总共用了5个月时间，由于个人水平有限，书中难免有一些疏漏，特提供了勘误页面。

　　读者可以在上面的地址中下载随书源码并反馈《AngularJS入门与进阶》中存在的错误，如有其他AngularJS相关疑问，也可以在该页面进行交流，共同提高！读者也可通过博客或者邮件与笔者进行技术交流。

　　最后，感谢清华大学出版社的编辑们，没有你们的帮助，就不会有《AngularJS入门与进阶》的出版。另外，还要感谢我的家人及同事，你们的支持是我写作的最大动力！

　　编者

　　2017年1月



其他推荐