本节书摘来自华章出版社《Angular从零到一》一书中作者Richard Banfield 著
易艺 译
，更多章节内容可以访问云栖社区“华章计算机”公众号查看。
前 言
一个大叔码农的Angular 2创世纪
作为一个出生于20世纪70年代的大叔，我在软件这个领域已经摸爬滚打了16年，从程序员、项目经理、产品经理，项目总监，到部门管理等各个角色都体验过，深深地了解到这个行业发展的速度之快是其他行业无法比拟的：从编程语言、各种平台、各种框架、设计模式到各类开源工具、组件林林总总，要学习的东西实在太多，因为变化太快。
但万变不离其宗，名词变化虽多，透射的本质其实是趋同的：那就是程序员受不了代码的折磨，千方百计地想让这个工作更简单，更能应对变化。比如说，面向对象编程（Object-Oriented Programming）理念的提出其实是牺牲了部分性能换来代码层次结构的清晰，因此也催生了C++、Java、C#等一系列优秀的面向对象编程语言；后来程序员们发现在实际的编程逻辑中，往往不是像对象树那样可以划分得那么清楚。还有一些类似安全、日志等功能其实是撒在系统各个角落的，于是，面向切面的编程（Aspect-Oriented Programming）应运而生。再后来一部分科学家发现现有的编程语言做分析或数据计算实在太麻烦，明明要计算的逻辑很清晰，却要用一大堆的对象封装赋值，函数式编程（Functional Programming）便出现了。最近几年被产品经理逼疯的程序员认为强类型语言改动起来太慢太繁琐，于是动态脚本类语言大行其道。
仔细分析一下，这些语言不是互斥的，其实好的元素都是会被慢慢吸收到各自的语言、平台上面去的。比如C#、Java也采纳了函数式编程的一些特点，像Lamda表达式；再比如.NET和Java平台基础上也拥有动态脚本语言，像.NET平台上的IronRuby，Java平台上的Scala等。本书写的Angular 2就是在JavaScript这种脚本语言基础上引入了TypeScript，进而可以兼具面向对象编程和强类型语言的优点；引入了依赖性注入（Dependency Injection）这种在强类型语言中被证明非常有用的设计模式；通过引入Rx，让JavaScript拥有了函数式编程的能力。
写这本书的起因很偶然。我们团队以Android和iOS开发人员为主，前端开发人员只有一个。但在开发过程中我们体会到原生App的开发迭代速度比较慢，因此希望以前端开发快速迭代，逻辑和界面摸清楚后再进行App开发。我们决定走前端路线后，就开始挑选前端框架，React、Vue和Angular 2我们都尝试了，最终选择Angular 2是因为谷歌在Angular 2中把多年Android开发积累的优秀思想带入了Angular，使得Angular的开发模式太像App开发了。有App开发经验或者Java、.NET开发经验的人可以非常舒服地切入进去。有了选择，我就开始边学习边给开发小伙伴做培训，培训资料也就当成网文发表出来。没想到在网上得到很多网友的支持和鼓励，觉得我边学边写时对一些问题的思考过程和改进过程对大家的学习也很有帮助。而我也在与大家的互动和分享中纠正了对一些概念和模式的认识。互动和分享是最好的学习方式，这也是本书区别于其他“专门教程”的重要一点，我们是一起在学习，一起在思考的。特别感谢简书和掘金等平台的读者，帮我纠正了很多错误认识和笔误等。机械工业出版社的吴怡编辑也正是在网上看到我的文章后，鼓励我结集出书，给我提了很多中肯意见，最终才有此书，非常感谢。
本书分为9章，第1～7章中我们从无到有地搭建了一个待办事项应用，但是我们增加了一些需求：多用户和HTTP后台。这样待办事项这个应用就变得麻雀虽小五脏俱全。通过这样一个应用的开发，我们熟悉了大部分重要的Angular 2概念和实践操作。建议读者按顺序阅读和实践。阅读完第7章，基本可以在正式的开发工作中上手了。第8章介绍了响应式编程的概念和Rx在Angular中的应用，可以说，如果不使用Rx，Angular 2的威力就折半了，很多原来需要复杂逻辑处理的地方用Rx解决起来非常方便。由于Rx本身的学习曲线较陡，我们花了很大篇幅做细致的讲解。第9章是在第8章基础之上，引入了在React中非常流行的Redux状态管理机制，这种机制的引入可以让代码和逻辑隔离得更好，在团队工作中强烈建议采用这种方案。第8章和第9章由于学习门槛较高，有的读者可能暂时接受起来有困难，遇到这种情况可以先放下，等到使用Angular一段时间后再回头来看。
大家在阅读过程中可能会发现从第3章开始起，我们在不断地打磨待办事项这个应用的逻辑，持续地优化。我写这本书其实不仅是为了让大家入门Angular（类似的书太多了，不需要我再写一本），更多的是想把自己琢磨这些问题、解决这些问题的过程和逻辑与大家分享，把一些好的设计模式和思想介绍给大家，这些模式和思想远比一个框架更有生命力。
本书适合有面向对象编程基础的、掌握一门现代编程语言的读者阅读。如果有Java、C#、Objective-C等强类型语言背景，对于本书中介绍的Angular各种元数据修饰符接受程度会很高，对于TypeScript的类型等也会一点就透。如果有JavaScript背景，理解TypeScript语法是无障碍的，但强类型的约束和修饰符等概念需要仔细体会。如果使用过Spring Framework或者Dagger2等IoC框架，那么对依赖性注入的概念就再熟悉不过了。
建议学习的同时或之后可以比较一些其他主流前端框架，比如React或Vue，参照后你会发现很多功能其实异曲同工。在读本书的过程中如果发现有错误，希望你可以在书籍源码的Github地址（https://github.com/wpcfan/awesome-tutorials）上提问题，我们一起打造一本一直在生长的书。希望年轻的你和大叔的我一起学习，一起面对这个迅速成长的行业！
王芃
2017年2月11日
目 录
前 言
第1章 认识Angular
第2章 用Form表单做一个登录控件
第3章 建立一个待办事项应用
第4章 进化！将应用模块化 59
4.1 一个复杂组件的分拆 59
4.1.1 输入和输出属性 62
4.1.2 CSS样式的一点小说明 70
4.1.3 控制视图的封装模式 72
4.2 封装成独立模块 72
4.3 更真实的Web服务 76
4.4 完善Todo应用 78
4.5 填坑，完成漏掉的功能 82
4.5.1 用路由参数传递数据 82
4.5.2 批量修改和批量删除 86
4.6 小练习 90
第5章 多用户版本应用 91
5.1 数据驱动开发 91
5.2 验证用户账户的流程 96
5.2.1 核心模块 97
5.2.2 路由守卫 98
5.3 路由模块化 105
5.4 路由的惰性加载——异步路由 106
5.5 子路由 108
5.6 用VSCode进行调试 112
5.7 小练习 116
第6章 使用第三方样式库及
模块优化 117
6.1 生产环境初体验 117
6.2 更新angular-cli的方法 120
6.3 第三方样式库 121
6.4 第三方JavaScript类库的集成方法 125
6.5 模块优化 132
6.6 多个不同组件间的通信 134
6.7 方便的管道 140
6.7.1 自定义一个管道 142
6.7.2 内建管道的种类 143
6.8 指令 145
6.9 小练习 148
第7章 给组件带来活力 149
7.1 更炫的登录页 149
7.1.1 响应式的CSS框架 149
7.1.2 寻找免费的图片源 153
7.2 自带动画技能的Angular 2 157
7.3 Angular 2动画再体验 159
7.3.1 state和transition 159
7.3.2 奇妙的animate函数 164
7.3.3 关键帧 166
7.4 完成遗失已久的注册功能 168
7.5 响应式表单 173
7.5.1 表单控件和表单组 176
7.5.2 表单提交 179
7.5.3 表单验证 179
7.5.4 表单构造器 181
7.5.5 Restful API的实验 182
7.6 Angular 2的组件生命周期 185
7.7 小练习 187
第8章 Rx——隐藏在Angular中的利剑 188
8.1 Rx再体验 190
8.2 常见操作 194
8.2.1 合并类操作符 195
8.2.2 创建类操作符 203
8.2.3 过滤类操作符 208
8.2.4 Subject 210
8.3 Angular 2中的内建支持 211
8.3.1 Async管道 214
8.3.2 Rx版本的Todo 216
8.4 小练习 223
第9章 用Redux管理Angular应用 224
9.1 什么是Redux 224
9.1.1 Store 225
9.1.2 Reducer 225
9.1.3 Action 226
9.2 为什么要在Angular中使用 227
9.3 如何使用Redux 231
9.3.1 简单内存版 231
9.3.2 时光机器调试器 239
9.3.3 带HTTP后台服务的版本 242
9.3.4 一点小思考 247
9.3.5 用户登录和注册的改造 248
9.4 小练习 256
9.5 小结 256
