√ 本书为谷歌开发者社区官方指定用书，由谷歌Angular技术开发团队作序力荐。

√ 目前市面上*无仅有的基于Angular 4系统全面介绍这一技术方方面面的书籍。

√ 本书作者团队从Angular早期版本问世以来即投入生产实践，积累丰富实战经验。

√ 首版问世后饱受好评，国内一线前端团队及技术社区资深专家集体亮相盛赞。

本书作为前版《揭秘Angular 2》的重大升级，是紧跟Angular.js新版本的实战**指南。Angular诞生于Google，已用于多款Google及全球商业产品。它是一套JavaScript前端框架，旨在开发当下流行的数据驱动的单页面Web应用，其核心特性是：MVC、模块化、自动双向数据绑定、语义化标签、依赖注入等。作为一部系统讲解流行前端框架?Angular 新版的**著作，本书覆盖入门、进阶和实战三大主题。第一部分从前端的故事起点说起，然后对?Angular?以及?TypeScript?进行了简单的介绍，接着通过一个通讯录例子让读者快速入门?Angular?的开发；第二部分则深入讲解了?Angular?架构以及?Angular?核心内容，包括组件、模板、指令、服务、依赖注入、路由以及测试，此外，在相应的章节里还补充说明了譬如变化监测的核心?Zones（第?6?章）、双向绑定的原理（第?7?章）、RxJS（第?9?章）等关键内容；第三部分则通过问卷调查系统来指引读者进行?Angular?项目的实战；第四部分主要是 Angular 延伸知识的讲解，介绍了 ionic 框架（第 19 章）以及 Angular 的服务端渲染（第 20 章）相关技术。

广发证券互联网金融技术团队，是早期拥抱 Angular 的坚定践行者。作为全新一代的证券业 IT 研发组织，团队致力于用*新*好的技术打造行业方案、支持业务创新。我们热爱开源技术、信奉敏捷方法、编写优雅代码、关注用户体验，我们喜欢互联网工程师文化，我们在技术创新中寻找到乐趣。

推荐序1

让时间倒推至2013 年年初。

这一年，笔者从科技外企、互联网界投入到本土金融机构，在所谓“互联网金融”的喧嚣中，开始招募与建设一个金融科技的研发组织。此刻正面临着一个个此前职业生涯所未遇的、因行业文化与组织管理差异而需重新学习适应的小“冲击”。其中印象*深的一个，无疑是在招聘过程中感受到来自互联网大企业的工程师对传统金融业IT 的一定程度上的“蔑视”——通常在面试过程中面试者*正面的反应莫过于“嗬，没想到券商还有这样的技术”，更多的面试者则是把金融机构的前端技术想象停留在Visual Basic、JQuery 阶段。传统金融机构，对于年轻的互联网技术人，很可能是恐龙般的存在。想想现在有多少年轻人从来不去银行营业部办业务，甚至从来不去商场购物？大部分人对于金融机构的印象，深受该机构的网站、手机App 的影响。有很多面试者在面试中吐槽金融行业整体软件服务糟糕的用户体验，把面试变成一个尴尬的“用户反馈”渠道。这就是个人在转换行业后遭遇的难忘经历。

当然，这种经历也和我们“不自量力”，自找不痛快有关——作为“传统”IT 组织非得去“忽悠”*级互联网企业的骄傲的牛人们加盟……可是，事实上很多传统行业的前端技术（以及很多其他技术）都没有与时俱进，如果我们不想办法建立起强悍的技术团队，采用更前沿、更领先的技术弯道超车，就永远无法解决用户体验糟糕的问题，永远难以改变在技术界留下的“技术落后”的负面印象，这些负分会让招募技术牛人更加困难，因为有追求的工程师都希望和一流的团队合作，开发有个人成就感的一流的技术应用。这是一个恶性循环，如果不打破它，我们既做不出好的产品，也招募不到好的工程师。

我们的办法是，采用“激进”的技术“破冰”。在2013 年，类似于Angular、Node.js、MongoDB、Docker 等这些技术，恐怕在大部分互联网公司里依然属于较为少用的技术，更遑论以稳定可靠为导向的、技术路线保守的金融界。采用这些技术开发交易额动辄以 “亿元”为单位的金融应用，可以称得上“激进”。可是我们有一个论调，就是：对于新兴技术有高度热情甚至“疯狂”的工程师，往往是技术比较强悍的工程师，他们驾驭故障、问题的能力，往往又是比较强的；相比之下，技术套路保守、比较求稳的团队，则不一定以技术见长。这两者权衡之下，我们决定冒一点风险，通过更前沿的技术吸引有技术热情的互联网人加盟，给他们玩新技术的自由，同时也考验他们填技术“坑”的能力。当然，这些技术在硅谷诞生已有时日，已经形成庞大的海外社区，我们并不是一拍脑袋为了“前沿”而“前沿”的，该做的论证依然需要严谨地做。*重要的一点是，我们首先应该纠正“盲目”的态度——对于任何新鲜技术，避免因为自己的不熟悉、缺乏调研就一概而论地斥之为“不成熟”，事实上，“没有调查研究就没有发言权”，抱着开放的心态深入了解新技术，会发现它们中有很多是从根本上经得起“思想实验”、符合逻辑、符合未来发展方向的。但我们可以看到，很多企业尤其是非科技行业的机构，往往对于任何新兴技术没有深入的、逻辑的、严谨科学的分析，而是简单粗暴地以技术存在的时间“年龄”作为采用与否的判断标准，这是令人遗憾的。

从2013 年起，类似于CoffeeScript、TypeScript、ES 6/7、Promise、Meteor.js、Yeoman、Ember.js、Babel、Ionic、RxJS、Vows/BDD 等就出现在我们的前端技术雷达屏幕里，WebComponent/Polymer 甚至是我们招聘的试题。我们既是Isomorphic（全栈同构）App 的践行者，也很可能是金融界*早*彻底大规模使用MEAN（MongoDB、Express、Angular、Node.js）架构的团队。我们的股票交易终端证明了HTML 5/React/Electron 技术可以成就“dead-serious”的严肃金融应用，我们的电商平台则以数百亿级的理财产品销售量，*有说服力地充当了Angular/Node.js 在金融业的所谓“成功案例”……

时间回到2016 年。

我们终于建立起一个新型金融科技研发组织，崇尚Reactive 的架构风格与技术工具，时刻紧盯技术前沿，吸收大量跨界工程师，向传统IT 注入了互联网技术基因与文化。本书的作者们，正是这个组织里有代表性的一群，他们和试验性的新技术一起成长，经受金融业对技术尝试带来的不确定性的零容忍，承担在巨额交易量下技术创新的高风险，持续学习并学以致用……这不仅需要勇气，也需要情怀，我以他们为荣。

现实中，在垂直行业具备勇气与情怀的IT 恐怕是不多的，原因之一是因为IT 作为企业内的“乙方”和成本中心，永远被业务线驱动而疲于奔命，无暇顾及新技术、新文化；原因二是因为以行业业务为主导的企业往往并不懂技术，也不理解技术的重要性，一位工程师选择用JQuery 还是Angular 开发前端，并没有人关心，而且为了“安全稳妥”起见，往往做出“保守”的选择。情怀和勇气，是垂直行业IT 的稀罕物。

但是在一个高度同质化的行业如证券业，技术就是一个差异化竞争的决定因素，新的函数语言、新的框架、新的开发工具……差异化和技术领先，体现在这些技术细节的追求里。

本书的作者们，是这些技术细节的追求者。这一次，他们利用自己每天“正常加班”之外少得可怜的个人业余时间，凭着极大的耐心、坚持、团队协作，把其中一个细节——也就是对Angular 的经验与理解，完全原创性地分享给读者。编写这本书，既是历时七八个月的凝聚团队的工程项目，也是年轻队员们职业生涯里一次难忘的体验，they make a difference ——首要是为了他们自己，但希望也能为你们，前端技术的爱好者们！

谢谢。

梁启鸿

原董事总经理@ 金融科技研发

广发证券信息技术部

推荐序2

Angular’s developer community in China is active and thriving. This comprehensive new book is the first originally authored book on Angular written in Chinese for a Chinese audience. The author and his team is well known in the local Angular community for his contributions. We thank him and his team for their work towards making Angular even more friendly to developers in China and hope this book will be helpful.

在中国，Angular 开发者社区非常活跃并且正在蓬勃发展。本书作者和其所在的广发证券互联网金融技术团队编写的这本新书内容全面，并且是面向中国读者的*一本中文原创书籍。本书作者所在团队所做出的贡献在当地的Angular 社区广为人知。广发证券互联网金融技术团队的工作让Angular 对中国开发者更加友好，我们非常感谢他们所做出的贡献，并真诚希望他们的这本书能给大家带来帮助。

Naomi Black

Technical Program Manager and Lead

Angular

推荐序3

作为谷歌所支持和投资推广的一个跨平台的开源技术，Angular 在中国开发者中获得了越来越多的关注和应用。根据我们统计到的数据，Angular *1 版已经在大量的中国企业中获得了应用，其中有很多大型企业，也有小型的创业团队。

本书作者所在的广发证券互联网金融技术团队就是一个将Angular 付诸实践的先行者。不仅如此，广发证券互联网金融技术团队还快速升级了Angular，创造了中国企业中采纳Angular *早的实践先例之一。

我特别高兴看到本书作者和其所在的团队能联合撰写这本书，他们把使用Angular的开发经验向业界进行了分享，同时也详细介绍了Angular 的各项特性。他们的实战经验一定能帮助更多开发者快速理解使用Angular 进行开发的价值，看到*新版Angular的优势。

我相信广发证券互联网金融技术团队在本书中的介绍，能帮助读者更方便地学习Angular。他们丰富的经验和*佳实践，能鼓舞你在你的企业中使用Angular 的信心。

我推荐这本体现了开源和分享精神的书！

预祝你有个愉快的学习经历，并且能尽快上手Angular！

栾跃（Bill Luan）

谷歌开发技术推广部大中华区主管

推荐序4

随着网络技术的突飞猛进，Web 前端正在变得空前强大和复杂，而大型JavaScript项目也遍地开花。TypeScript 把在其他语言中身经百战的类型系统引入到JavaScript，从而使得大型JavaScript 项目开发体验脱胎换骨。经过长时间的积累，TypeScript 周边的生态环境也趋于成熟。为了紧跟JavaScript 社区的变化，这门完全开源的语言时刻关注着社区的反馈。就在过去的一年多里，TypeScript 不断有重大版本更新，以解决社区中所看到的新需求。

而自从2.0 版本起，完全采用了TypeScript 开发的Angular，又将TypeScript 的优点发挥得淋漓尽致。自从2014 年Angular 团队和TypeScript 团队开始合作以来，这个跨公司的组合就一直迸发着火花。Angular 吸取了TypeScript 的高效和完备的工具支持，又将TypeScript 的类型系统巧妙地应用在依赖注入等核心功能上。TypeScript 也借助于Angular 的流行，被更多的人所熟知。这健康而紧密的合作会使Angular 和TypeScript 越来越有竞争力，*终让开发者受益。

本书作者广发证券互联网金融技术团队是国内Angular 社区的先行者，他们结合自己生产实战中的经验，阐述了自己对于TypeScript 和Angular 的独特理解，值得一读。中文资料的缺乏一直是TypeScript 在国内推广的一大障碍；而本书TypeScript 篇章的专门介绍，以及其结合具体场景的诸多实例，相信会对很多开发者有所帮助。预祝此书帮助你开始一段愉快的学习旅程！

李正博

TypeScript 团队成员

目录

第一部分入门篇
1 前端风云 2
1．1 故事的起点 2
1．2 AJAX 王者归来 3
1．3 工具库的流行 3
1．4 百家争鸣 3
1．5 走进前端新时代 4
1．6 小结 6

2 Angular 简介 7
2．1 历史回顾 7
2．1．1 AngularJS 1．x 起源 7
2．1．2 AngularJS 1．x 迭代之路 8
2．1．3 初生的Angular 9
2．1．4 快速发展的Angular 10
2．1．5 Angular 4 和后续语义版本 11
2．1．6 开发语言之选 13
2．2 Angular 简述 14
2．2．1 核心概念 14
2．2．2 平台简介 16
2．2．3 平台亮点 18
2．3 小结 19

3 TypeScript 入门 20
3．1 TypeScript 概述 20
3．1．1 概述 20
3．1．2 安装 21
3．2 基本类型 22
3．2．1 布尔类型 22
3．2．2 数字类型 22
3．2．3 字符串类型 23
3．2．4 数组类型 23
3．2．5 元组类型 23
3．2．6 枚举类型 23
3．2．7 任意值类型 24
3．2．8 null 和undefined 24
3．2．9 void 类型 25
3．2．10 never 类型 26
3．3 声明和解构 26
3．3．1 let 声明 27
3．3．2 const 声明 28
3．3．3 解构 28
3．4 函数 30
3．4．1 函数定义 30
3．4．2 可选参数 30
3．4．3 默认参数 31
3．4．4 剩余参数 32
3．4．5 函数重载 32
3．4．6 箭头函数 33
3．5 类 34
3．5．1 类的例子 34
3．5．2 继承与多态 34
3．5．3 修饰符 35
3．5．4 参数属性 37
3．5．5 静态属性 37
3．5．6 抽象类 38
3．6 模块 39
3．6．1 概述 39
3．6．2 模块导出方式 39
3．6．3 模块导入方式 40
3．6．4 模块的默认导出 41
3．6．5 模块设计原则 42
3．7 接口 44
3．7．1 概述 44
3．7．2 属性类型接口 44
3．7．3 函数类型接口 45
3．7．4 可索引类型接口 46
3．7．5 类类型接口 46
3．7．6 接口扩展 47
3．8 装饰器 48
3．8．1 概述 48
3．8．2 方法装饰器 49
3．8．3 类装饰器 50
3．8．4 参数装饰器 52
3．8．5 属性装饰器 53
3．8．6 装饰器组合 53
3．9 泛型 55
3．10 TypeScript 周边 56
3．10．1 编译配置文件 56
3．10．2 声明文件 57
3．10．3 编码工具 58
3．10．4 展望未来 59
3．11 小结 59

4 快速入门 60
4．1 Hello World 例子 60
4．1．1 准备工作 60
4．1．2 构建项目 61
4．2 通讯录例子 66
4．2．1 背景介绍 66
4．2．2 架构设计 68
4．3 小结 74

第二部分深入篇
5 Angular 架构总览 76
5．1 核心模块介绍 76
5．1．1 组件 77
5．1．2 模板 81
5．1．3 指令 83
5．1．4 服务 84
5．1．5 依赖注入 84
5．1．6 路由 86
5．2 应用模块 89
5．3 源码结构介绍 92
5．4 小结 93

6 组件 94
6．1 概述 94
6．1．1 模块化介绍 94
6．1．2 组件化标准 96
6．1．3 Angular 的组件 99
6．2 组件基础 100
6．2．1 创建组件的步骤 100
6．2．2 组件的基础构成 101
6．2．3 组件与模块 108
6．3 组件交互 113
6．3．1 组件的输入、输出属性 113
6．3．2 父组件向子组件传递数据 114
6．3．3 子组件向父组件传递数据 120
6．3．4 其他组件交互方式 121
6．4 组件内容嵌入 124
6．5 组件生命周期 128
6．5．1 概述 128
6．5．2 生命周期钩子 128
6．6 变化监测 130
6．6．1 数据变化的源头 131
6．6．2 变动通知机制 132
6．6．3 变化监测的响应处理 134
6．7 扩展阅读 140
6．7．1 元数据一览表 140
6．7．2 元数据说明 141
6．7．3 深入理解Zone．js 150
6．7．4 不依赖Zone．js 的Angular 154
6．8 小结 155

7 模板 156
7．1 模板语法概览 156
7．2 数据绑定 158
7．2．1 概述 158
7．2．2 插值 160
7．2．3 模板表达式 160
7．2．4 属性绑定 162
7．2．5 事件绑定 165
7．2．6 双向数据绑定 168
7．2．7 输入和输出属性 169
7．3 内置指令 170
7．3．1 NgClass 170
7．3．2 NgStyle 170
7．3．3 NgIf 171
7．3．4 NgSwitch 172
7．3．5 NgFor 172
7．4 表单 173
7．4．1 模板表单例子 174
7．4．2 表单指令 175
7．4．3 自定义表单样式 184
7．4．4 表单校验 186
7．5 管道 189
7．5．1 管道介绍 189
7．5．2 内置管道 190
7．5．3 自定义管道 196
7．5．4 管道的变化监测 198
7．6 扩展阅读 202
7．6．1 安全导航操作符 202
7．6．2 双向绑定的原理 202
7．7 小结 204

8 指令 206
8．1 概述 206
8．1．1 指令分类 208
8．1．2 内置指令 210
8．2 自定义属性指令 219
8．2．1 实现属性指令 219
8．2．2 为指令绑定输入 221
8．2．3 响应用户操作 223
8．3 自定义结构指令 224
8．3．1 实现结构指令 225
8．3．2 模板标签与星号前缀 227
8．3．3 NgIf 指令原理 229
8．4 扩展阅读 231
8．5 小结 235

9 服务与RxJS 237
9．1 Angular 服务 237
9．1．1 概述 237
9．1．2 使用场景 238
9．2 HTTP 服务 242
9．2．1 HttpModule 242
9．2．2 HttpClientModule 254
9．3 响应式编程 262
9．3．1 概述 262
9．3．2 ReactiveX 264
9．4 RxJS 266
9．4．1 创建Observable 对象 266
9．4．2 使用RxJS 处理复杂场景 266
9．4．3 RxJS 和Promise 的对比 267
9．4．4 “冷”模式下的Observable 268
9．4．5 RxJS 中的Operator 269
9．4．6 Angular 中的RxJS 273
9．5 小结 277

10 依赖注入 278
10．1 依赖注入介绍 279
10．2 Angular 依赖注入 282
10．2．1 概述 282
10．2．2 在组件中注入服务 285
10．2．3 在服务中注入服务 287
10．2．4 在模块中注入服务 288
10．2．5 层级注入 290
10．2．6 注入到派生组件 295
10．2．7 限定方式的依赖注入 297
10．3 Provider 300
10．3．1 概述 300
10．3．2 Provider 注册方式 302
10．4 扩展阅读 305
10．5 小结 308

11 路由 309
11．1 概述 309
11．2 基本用法 311
11．2．1 路由配置 311
11．2．2 创建根路由模块 312
11．2．3 添加RouterOutlet 指令 312
11．3 路由策略 313
11．3．1 HashLocationStrategy 介绍 314
11．3．2 PathLocationStrategy 介绍 315
11．4 路由跳转 316
11．4．1 使用指令跳转 317
11．4．2 使用代码跳转 319
11．5 路由参数 321
11．5．1 Path 参数 321
11．5．2 Query 参数 324
11．5．3 Matrix 参数 326
11．6 子路由和附属Outlet 326
11．6．1 子路由 326
11．6．2 附属Outlet 328
11．7 路由拦截 330
11．7．1 激活拦截与反激活拦截 330
11．7．2 数据预加载拦截 334
11．8 模块的延迟加载 337
11．8．1 延迟加载实现 337
11．8．2 模块预加载 339
11．8．3 模块加载拦截 341
11．9 小结 342

12 测试 343
12．1 概述 343
12．2 单元测试 344
12．2．1 概述 344
12．2．2 常用测试框架 345
12．2．3 Jasmine 介绍 345
12．2．4 Karma 介绍 350
12．2．5 Karma 结合Jasmine 测试 350
12．3 Angular 单元测试 355
12．3．1 概述 355
12．3．2 独立单元测试 358
12．3．3 测试工具集 362
12．4 端到端测试 370
12．4．1 概述 370
12．4．2 Protractor 介绍 371
12．5 小结 374

第三部分实战篇
13 问卷调查系统简介 376
13．1 项目背景 376
13．2 主要特性 377
13．2．1 首页和帮助页 378
13．2．2 问卷编辑页 378
13．2．3 我的问卷页 378
13．2．4 用户管理页 379
13．3 产品设计 379
13．4 小结 380

14 项目起步 381
14．1 Angular CLI 381
14．1．1 简介 381
14．1．2 常用命令介绍 382
14．2 其他技术选型 391
14．2．1 UI 样式库 391
14．2．2 后端服务器 391
14．3 环境搭建 392
14．3．1 搭建前端环境 392
14．3．2 引入样式库 393
14．3．3 搭建后端环境 394
14．4 目录结构介绍 396
14．5 首页开发 397
14．6 导航栏开发 401
14．7 小结 402

15 问卷编辑模块 403
15．1 概述 403
15．1．1 特性管理模块 403
15．1．2 功能设计 406
15．1．3 数据模型 407
15．2 问卷编辑模块开发 410
15．2．1 问题选择组件 410
15．2．2 问题组件 414
15．2．3 问卷组件 425
15．2．4 问卷服务 431
15．2．5 问卷大纲组件 438
15．3 小结 441

16 我的问卷模块 442
16．1 问卷列表 443
16．1．1 问卷列表项 443
16．1．2 显示问卷列表 445
16．1．3 显示问卷详情 447
16．2 问卷操作 449
16．2．1 发布后的问卷页面 450
16．2．2 问卷操作组件 453
16．3 小结 456

17 用户管理模块 457
17．1 开发简单注册页 458
17．2 表单控件组件 460
17．2．1 定义表单控件 460
17．2．2 校验表单控件 461
17．2．3 表单安全 464
17．3 用户注册功能开发 465
17．3．1 用户注册服务 465
17．3．2 组件的逻辑 466
17．3．3 注册接口开发 469
17．4 权限管理 470
17．5 小结 473

18 项目构建和最佳实践 475
18．1 项目构建 475
18．1．1 代码质量检查 475
18．1．2 测试 476
18．1．3 打包 478
18．1．4 容器化 479
18．2 最佳实践 479
18．2．1 单一职责 480
18．2．2 命名约定 480
18．2．3 编码约定 483
18．2．4 Angular 模块约定 487
18．2．5 组件相关约定 487
18．2．6 指令相关约定 489
18．2．7 服务相关约定 490
18．2．8 其他 491
18．3 小结 492

第四部分延伸篇
19 移动开发框架：ionic 介绍与实战 494
19．1 移动开发 494
19．1．1 背景介绍 494
19．1．2 四种开发模式 495
19．1．3 技术选型 495
19．2 ionic 平台介绍 496
19．2．1 概览 496
19．2．2 Cordova 498
19．2．3 环境搭建 499
19．2．4 组件开发 501
19．2．5 路由和导航 503
19．3 ionic Native 507
19．3．1 插件介绍 507
19．3．2 插件使用 508
19．3．3 插件开发 509
19．4 样式和主题 509
19．4．1 平台样式 509
19．4．2 主题 511
19．4．3 全局变量 512
19．4．4 工具属性 513
19．4．5 Iconfont 514
19．5 ionic CLI 515
19．6 通讯录实例 518
19．6．1 项目搭建 519
19．6．2 主页面 520
19．7 小结 525

20 服务端渲染 527
20．1 概述 527
20．2 客户端渲染的局限性 528
20．3 服务端渲染的局限性 529
20．4 Angular Universal 介绍 531
20．5 将通讯录例子改造成Angular Universal 的方式 533
20．6 服务端渲染的进阶实践 540
20．6．1 服务端数据的同步 541
20．6．2 使用依赖注入解决环境差异 544
20．6．3 使用Preboot 解决事件脱节 546
20．7 小结 549