《揭秘Angular 2》
书海网短评：
首著重磅升级，领域重量级图书率先与技术新版接轨，读者可直接选用第2版。√位列谷歌推荐参考资料列表，Google公司、Angular团队及开发者社区联合力荐。 √目前市面上少有的基于Angul
编辑推荐
首著重磅升级，领域重量级图书率先与技术新版接轨，读者可直接选用第2版。
√位列谷歌推荐参考资料列表，Google公司、Angular团队及开发者社区联合力荐。
√目前市面上少有的基于Angular2、系统全面介绍这一技术方方面面的书籍。
√《揭秘Angular 2》作者团队从Angular早期版本问世以来即投入生产实践，积累丰富实战经验。
√难能可贵的ng2原创精品，国内一线前端团队及技术社区资深专家集体亮相盛赞。
内容简介
《揭秘Angular 2》已全面升级，提醒读者直接选用第2版。
《揭秘Angular2》第一部分从前端的故事起点说起，然后对Angular以及TypeScript进行了简单的介绍，接着通过一个通讯录例子让读者快速入门Angular的开发；第二部分则深入讲解了Angular架构以及Angular核心内容，包括组件、模板、指令、服务、依赖注入、路由以及测试，此外，在相应的章节里还补充说明了譬如变化监测的核心Zones（第6章）、双向绑定的原理（第7章）、RxJS（第9章）等关键内容；第三部分则通过问卷调查系统来指引读者进行Angular项目的实战。
作者简介
广发证券互联网金融技术团队，是Angular早期坚定的践行者。作为全新一代的证券业IT研发组织，团队致力于用更新更好的技术打造行业方案、支持业务创新。
我们热爱开源技术、信奉敏捷方法、编写优雅代码、关注用户体验，我们喜欢互联网工程师文化，我们在技术创新中寻找到无穷乐趣。
精彩书评
当Angular还在alpha版本的时候，《揭秘Angular 2》作者所在团队就已在产品里使用。几年时间一路跟下来，踩过很多坑，收获更多。这保证了《揭秘Angular 2》满满地全是干货，值得仔细阅读。
——大漠穷秋GoogleAngular中国开发者PM
在前端规模化时代做开发是件幸福的事。几年前似乎没有太多选择，大多用jQuery搞定各种浏览器上的坑，以简陋的“粉笔”在网页上“涂鸦”。如今又一下子拥有太多选择，React、Vue、Angular...我不是其中任何一个流行的（和不那么流行的）框架的死忠粉，在工作中会根据适合的情况选用它们。很高兴《揭秘Angular 2》不是死板地介绍特性和罗列API，而是通过实际例子帮助读者理解Angular的架构和设计思想。跟着作者的思路走一遍，前端技能会有实质提升，而不仅是“学会使用”Angular。我们需要掌握框架的灵魂，而不是成为它的奴隶。
——月影360奇舞团负责人
广发证券互联网技术团队是一个活跃的技术团队，近几年译过大量Angular的文章，并在实际业务中将Angular付诸实践，积累了很多经验，同时也促进了团队成员对Angular的深入理解。Angular是较早出现的具有颠覆性的Web前端框架，在推出之初就受到广泛关注，并快速发展起来，给我们带来一些新的理念。相信会有更多人因为这《揭秘Angular 2》而更加全面深入的了解Angular！
——于涛Kinvix腾讯Alloyteam负责人
本应快速发展的Angular2，因遭遇React当红和Vue崛起而没能像1.x一样快速流行。但还是有一些团队，在自己的业务里找到实践空间，用它来解决实际问题。从技术角度来看，它丝毫不逊色于竞争对手：与TypeScript的结合、对大型架构的支持让它在企业级开发中拥有非常好的空间。
希望大家不要囿于门户之见，用这《揭秘Angular 2》来开始了解这门有价值的技术。
——程劭非@winter
Angular2与1.x版本有很大不同，以组件化为核心理念，整合可选的开发语言、可配置的变更检测策略、样式封装机制，形成一套适应于企业应用开发的框架。现在，这个领域的开发者，终于迎来一本适合自己的书。
——徐飞知名前端架构师
《揭秘Angular 2》把广发证券前端团队对Angular2框架基础的理解和*实践，用不拖沓的方式传递给读者，值得一读。
——sofish饿了么大前端负责人
开发者真正了解所选框架并能结合工作场景，才能享受其带来的效率、性能提升。《揭秘Angular 2》覆盖基础、架构与应用，从能做什么讲到为什么这么做，对将或已选择Angular的开发者极有裨益。
——吴天豪天猫前端技术专家
《揭秘Angular 2》从概念到实际项目，从API到架构，详细介绍了TypeScript和Angular的开发经验，是学习Angular的上佳选择。
——曾探腾讯高级工程师
目录
第一部分入门篇
1前端风云2
1.1故事的起点2
1.2AJAX王者归来3
1.3工具库的流行3
1.4百家争鸣3
1.5走进前端新时代4
1.6小结6
2Angular简介7
2.1历史回顾7
2.1.1AngularJS1.x起源7
2.1.2AngularJS1.x迭代之路8
2.1.3初生的Angular29
2.1.4快速发展的Angular210
2.1.5开发语言之选11
2.2Angular2简述12
2.2.1核心概念12
2.2.2平台简介14
2.2.3平台亮点16
2.3小结17
3TypeScript入门18
3.1TypeScript概述18
3.1.1概述18
3.1.2安装19
3.2基本类型20
3.2.1布尔类型20
3.2.2数字类型20
3.2.3字符串类型21
3.2.4数组类型21
3.2.5元组类型21
3.2.6枚举类型21
3.2.7任意值类型22
3.2.8null和undefined22
3.2.9void类型23
3.2.10never类型24
3.3声明和解构24
3.3.1let声明25
3.3.2const声明26
3.3.3解构26
3.4函数28
3.4.1函数定义28
3.4.2可选参数28
3.4.3默认参数29
3.4.4剩余参数30
3.4.5函数重载30
3.4.6箭头函数31
3.5类32
3.5.1类的例子32
3.5.2继承与多态32
3.5.3修饰符33
3.5.4参数属性35
3.5.5静态属性35
3.5.6抽象类36
3.6模块37
3.6.1概述37
3.6.2模块导出方式37
3.6.3模块导入方式38
3.6.4模块的默认导出39
3.6.5模块设计原则40
3.7接口42
3.7.1概述42
3.7.2属性类型接口42
3.7.3函数类型接口43
3.7.4可索引类型接口44
3.7.5类类型接口44
3.7.6接口扩展45
3.8装饰器46
3.8.1概述46
3.8.2方法装饰器47
3.8.3类装饰器48
3.8.4参数装饰器50
3.8.5属性装饰器51
3.8.6装饰器组合51
3.9泛型53
3.10TypeScript周边54
3.10.1编译配置文件54
3.10.2声明文件55
3.10.3编码工具56
3.10.4展望未来57
3.11小结57
4快速入门58
4.1HelloWorld例子58
4.1.1准备工作58
4.1.2搭建步骤59
4.2通讯录例子66
4.2.1背景介绍66
4.2.2架构设计68
4.3小结74
第二部分深入篇
5Angular架构总览76
5.1核心模块介绍76
5.1.1组件77
5.1.2模板81
5.1.3指令82
5.1.4服务83
5.1.5依赖注入84
5.1.6路由86
5.2应用模块88
5.3源码结构介绍91
5.4小结93
6组件94
6.1概述94
6.1.1模块化介绍94
6.1.2组件化标准96
6.1.3Angular的组件100
6.2组件基础100
6.2.1创建组件的步骤100
6.2.2组件基础构成102
6.2.3组件与模块108
6.3组件交互113
6.3.1组件的输入输出属性114
6.3.2父组件向子组件传递数据115
6.3.3子组件向父组件传递数据120
6.3.4其他组件交互方式122
6.4组件内容嵌入124
6.5组件生命周期128
6.5.1概述128
6.5.2生命周期钩子128
6.6变化监测131
6.6.1数据变化的源头131
6.6.2变动通知机制132
6.6.3变化监测的响应处理133
6.7扩展阅读139
6.7.1元数据一览表139
6.7.2元数据说明139
6.7.3深入理解Zones149
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.1NgClass170
7.3.2NgStyle170
7.3.3NgIf171
7.3.4NgSwitch172
7.3.5NgFor172
7.4表单173
7.4.1模板表单例子174
7.4.2表单指令175
7.4.3自定义表单样式184
7.4.4表单校验185
7.5管道189
7.5.1管道介绍190
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小结205
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实现结构指令224
8.3.2模板标签与星号前缀227
8.3.3NgIf指令原理228
8.4扩展阅读231
8.5小结235
9服务与RxJS237
9.1Angular服务237
9.1.1概述237
9.1.2使用场景238
9.2HTTP服务242
9.2.1AJAX介绍243
9.2.2JSONP介绍249
9.2.3HttpModule250
9.3响应式编程254
9.3.1概述254
9.3.2ReactiveX256
9.4RxJS258
9.4.1创建Observable对象258
9.4.2使用RxJS处理复杂场景258
9.4.3RxJS和Promise的对比259
9.4.4“冷”模式下的Observable260
9.4.5RxJS中的Operator261
9.4.6Angular中的RxJS265
9.5小结269
10依赖注入270
10.1依赖注入介绍271
10.2Angular依赖注入274
10.2.1概述274
10.2.2在组件中注入服务276
10.2.3在服务中注入服务278
目录xvii
10.2.4在模块中注入服务280
10.2.5层级注入282
10.2.6注入到派生组件286
10.2.7限定方式的依赖注入288
10.3Provider292
10.3.1概述292
10.3.2Provider注册方式293
10.4扩展阅读297
10.5小结299
11路由300
11.1概述300
11.2基本用法302
11.2.1路由配置302
11.2.2创建根路由模块303
11.2.3添加RouterOutlet指令303
11.3路由策略304
11.3.1HashLocationStrategy介绍305
11.3.2PathLocationStrategy介绍306
11.4路由跳转307
11.4.1使用指令跳转308
11.4.2使用代码跳转310
11.5路由参数312
11.5.1Path参数312
11.5.2Query参数315
11.5.3Matrix参数317
11.6子路由和附属Outlet317
11.6.1子路由317
11.6.2附属Outlet319
11.7路由拦截320
11.7.1激活拦截与反激活拦截321
11.7.2数据预加载拦截325
11.8模块的延迟加载327
11.8.1延迟加载实现328
11.8.2模块加载拦截329
11.9小结331
12测试.332
12.1概述332
12.2单元测试333
12.2.1概述333
12.2.2常用测试框架334
12.2.3Jasmine介绍334
12.2.4Karma介绍338
12.2.5Karma结合Jasmine测试339
12.3Angular单元测试343
12.3.1概述343
12.3.2独立单元测试348
12.3.3测试工具集352
12.4端到端测试360
12.4.1概述360
12.4.2Protractor介绍361
12.5小结364
第三部分实战篇
13问卷调查系统简介366
13.1项目背景366
13.2主要特性367
13.2.1首页和帮助页369
13.2.2问卷编辑页369
13.2.3我的问卷页369
13.2.4用户管理页369
13.3产品设计369
13.4小结371
14项目起步372
14.1技术选型372
14.1.1前端脚手架372
14.1.2UI样式库373
14.1.3后端服务器374
14.2环境搭建374
14.2.1搭建脚手架374
14.2.2引入样式库377
14.2.3搭建后台环境378
14.3目录结构介绍380
14.4首页开发384
14.5小结388
15问卷编辑模块389
15.1概述389
15.1.1功能设计389
15.1.2数据模型391
15.2问卷编辑模块开发393
15.2.1问题选择组件394
15.2.2问题组件398
15.2.3问卷组件408
15.2.4问卷服务415
15.2.5问卷大纲422
15.3小结425
16我的问卷模块426
16.1问卷列表427
16.1.1问卷列表项428
16.1.2显示问卷列表429
16.1.3显示问卷详情431
16.2问卷操作433
16.2.1修改路由配置434
16.2.2发布后的问卷页面436
16.2.3问卷操作组件439
16.3小结442
17用户管理模块443
17.1开发简单注册页444
17.2表单控件组件446
17.2.1定义表单控件446
17.2.2校验表单控件447
17.2.3表单安全450
17.3用户注册功能开发451
17.3.1用户注册服务451
17.3.2组件的逻辑453
17.3.3注册接口开发455
17.4权限管理456
17.5小结460
18项目构建和最佳实践461
18.1项目构建461
18.1.1代码质量检查461
18.1.2测试463
18.1.3打包465
18.1.4容器化467
18.2最佳实践468
18.2.1单一职责468
18.2.2命名约定469
18.2.3编码约定471
18.2.4应用结构约定474
18.2.5组件相关约定475
18.2.6指令相关约定478
18.2.7服务相关约定478
18.2.8其他479
18.3小结480
前言/序言
2016年9月15日，Angular2横空出世。鉴于Angular1.x的巨大成功，加上Angular2自身超前而颠覆式的设计，使其市场关注度水涨船高。《揭秘Angular 2》是一本帮助读者对Angular2（后文如无特殊区分，也称为Angular）进行快速了解、深入熟悉并用其进行实战开发的书籍。
《揭秘Angular 2》概述
《揭秘Angular 2》主要分为入门篇、深入篇和实战篇三大部分，共18个章节。
第一部分：从第1章到第4章，主要讲述整个前端发展史的演进，Angular的发展历程、核心概念以及周边工具的简单介绍，快速熟悉Angular官方推荐的开发语言TypeScript，最后以一个通讯录示例介绍如何搭建开发环境并快速上手Angular。
第二部分：从第5章到第12章，主要围绕通讯录示例深入讲解Angular的相关知识点，包括Angular的运行机理与整体架构介绍、组件与变化监测相关内容、模板与管道、指令的总体介绍、服务与响应式编程RxJS、强大的依赖注入、灵活高可用的路由机制等，最后介绍了项目开发中测试相关的内容。
第三部分：从第13章到第18章，主要以实现一个问卷调查系统为目标，阐述如何使用Angular进行项目的实战。主要内容包括项目背景介绍、开发环境的搭建、整体技术架构分析、用户管理以及问卷编辑等页面的实现细节等，最后讲解了项目的构建流程以及优秀实践。
谁适合这《揭秘Angular 2》
《揭秘Angular 2》的主要目标读者是有一定JavaScript开发能力的新人，有Angular1.x相关经验的开发者，有Java、C#等后端语言编程经验的人，或者想通过《揭秘Angular 2》快速了解Angular2掌握更多新鲜理念的资深工程师等。
如何阅读此书
《揭秘Angular 2》基于Angular2.0版本进行讲解。
《揭秘Angular 2》按照由低到高的难度变化思路进行撰写。第一部分适合刚接触Angular的读者进行细致的阅读，如已有相关基础或比较熟悉Angular的同学可以跳过第一部分，直接学习第二部分深入理解或者第三部分项目实战。
《揭秘Angular 2》的插图采用统一的绘图风格，以手绘风格的形式表现出来，力求简洁，如遇部分难懂之处可配合上下文进行解读。
《揭秘Angular 2》包含诸多代码段，这些代码段可分为两类，一类是比较完整独立的，跟着编写并能看到运行效果的示例代码；另一类是辅助学习的代码段，以介绍概念知识点为主，力求减少不相关代码的干扰，通常只截取最核心的片段，并以伴有省略号的形式出现。
《揭秘Angular 2》涉及到的三个主要示例的源码我们也已通过GitHub开源，网址如下所示，感兴趣的读者可以下载运行，辅助对《揭秘Angular 2》相关知识的学习理解。
HelloWorld例子：https://github.com/angular-programming/hello-world
通讯录例子：https://github.com/angular-programming/angular2-contacts-demo
问卷调查系统：https://github.com/angular-programming/angular2-questionnaire
为了加强对相关知识点的理解，《揭秘Angular 2》也加入了一些旁注，对内容进行相关补充。部分较为深入但不常用的知识点，将以扩展阅读或者批注的形式展现。
勘误和支持
由于笔者水平有限，又是团体作战，且Angular更新迭代比较快，加上书籍撰写的时间比较仓促，书中难免会出现一些错误或者不准确的地方，恳请读者批评指正。读者可以把书中发现的问题或建议通过在GitHub上提Issue的方式反馈给我们，网址如下所示，我们会尽快回复大家的疑问，并依据收集的信息整理修正。
https://github.com/angular-programming/issues/issues
读者也可登录博文视点官网http://www.broadview.com.cn/30650下载《揭秘Angular 2》代码或提交勘误信息。一旦勘误信息被作者或编辑确认，即可获得博文视点奖励积分，可用于兑换电子书。读者可以随时浏览图书页面，查看已发布的勘误信息。
致谢
首先，感谢电子工业出版社的张春雨、刘佳禾等编辑以及排版白涛老师，自始至终给予我们强有力的帮助和支持。如果当时没有春雨老师的邀请，我们可能就不会有写书的冲动，也就不会有《揭秘Angular 2》的诞生了。
其次，要感谢广发证券互联网金融技术团队的全体小伙伴们。《揭秘Angular 2》是整个团队（参与写作的人数多达21人）在繁忙工作之余利用琐碎的业余时间完成的，其难度不亚于一次大项目的协作，如果没有大家的紧密协作和坚持不懈，这《揭秘Angular 2》也是不可能完成的，所以非常感谢以下作者的辛苦付出。
章节作者
整体内容审校吴炳杰、张淼、高海浪、汤桂川、李仲辉、闫学凯、唐明、梁景湛
第1章前端风云汤桂川
第2章Angular简介高海浪
第3章TypeScript入门张淼、姚云萍、郭力恒
第4章快速入门钱骞、吴炳杰
第5章Angular架构总览李仲辉
第6章组件梁景湛、唐明
第7章模板黄晓婷、袁野
第8章指令龚麒
第9章服务与RxJS邓玉龙、吴冠鹏
第10章依赖注入张淼、姚云萍
第11章路由李远、郭伟
第12章测试李泽扬
第13章问卷调查系统简介闫学凯、王扬
第14章项目起步闫学凯
第15章问卷编辑模块闫学凯
第16章我的问卷模块闫学凯
第17章用户管理模块杨宾生
第18章项目构建和最佳实践王扬
