Angular 小专题：玩转注射器
课程介绍
2009 年 AngularJS 第一个把“依赖注入”机制引入到了前端开发中，开创了用后端设计思想大规模入侵前端领域的先河。
如果没有深入使用过 Spring 框架，“依赖注入”机制理解起来还是颇费脑力的，所以，我编写了这个达人课，用我自己的语言重新解释 Angular 注射器的各种使用技巧，希望能给 Angular 开发者带来更深入的理解，当然还有更丝滑的阅读体验。
本课是一个小专题，聚焦在 Angular 的“依赖注入机制”，方便利用零碎时间阅读和掌握，其内容全面而系统，覆盖了与 DI 相关的所有 Decorator（装饰器），同时补充了一些官方文档上没有出现的细节，所有的 demo 基于当前最新版本，以自己真实的学习过程为线索来展开。可以说这个小专题可能是目前市面上最全面的一份总结了。
系列畅销课程：《Angular 初学者快速上手教程》。
作者介绍
大漠穷秋，10 年开发经验，其中 5 年后端、5 年前端。熟悉 Java 相关的技术体系：SpringMVC、MyBatis、Ehcache、ELK、MySQL 等。在前端技术方面尤其有深入的研究，先后使用并研究过 Flex、jQuery、Extjs、Backbone、Bootstrap、Angular 等常见的前端技术体系。
- 2012 年，出版《Ext 江湖》一书。
- 2013 年 5 月，翻译出版了《ActionScript 3.0 游戏设计基础（第二版）》。
- 2013 年 9 月，翻译出版了《用 AngularJS 开发下一代 Web 应用》。
- 2016 年 8 月，翻译出版了《迈向 Angular 2》一书。
2016 ~ 2017 年期间，担任 Angular Developer PM，专门帮助 Google Angular 团队在中国推广 Angular 框架。
若想了解更详细的资料和演讲照片，请点击这里。
课程内容
导读：课程概要
背景
众所周知，2009年 AngularJS 第一个把“依赖注入”机制引入到了前端开发中，开创了用后端设计思想大规模入侵前端领域的先河。
凭心而论，如果你没有深入使用过 Spring 框架，“依赖注入”机制理解起来还是颇费脑力的。
所以，我编写了这个小专题，用我自己的语言重新解释 Angular 注射器的各种使用技巧，希望能给 Angular 开发者带来更深入的理解，当然还有更丝滑的阅读体验。
特色
- 这是一个小专题，聚焦在 Angular 的“依赖注入机制”，方便你利用零碎时间阅读和掌握。无论你是在坐地铁、还是在蹲坑、还是在等车或等飞机，读上那么一小段儿，整个世界的色彩都会明快起来。
- 重新编写了所有 demo，基于当前最新版本 5.2.2（2018-02-16），以自己真实的学习过程为线索展开，跟着我的思路走一遍，轻松又愉快。
- 补充了一些官方文档上没有出现的细节，比如直接用 @Injector 装饰器手动操作注射器实例、自己创建 ReflectiveInjector 实例。虽然这些奇技淫巧在日常业务开发里面很少用到，但是如果你打算封装自己的开源组件库，则必须理解它们。
- 内容全面而系统，覆盖了与 DI 相关的所有 Decorator（装饰器）：@Inject、@Injectable、@Injector、@Self、@SkipSelf、@Optional、@Host。我阅读了大量的文档和资料，重新进行了校对和整理，并且把 demo 都升级到了当前最新版本，怎么说呢，这个小专题可能是目前市面上最全面的一份总结，你不需要自己到处寻寻觅觅浪费时间了。
适宜人群
- 已经熟悉 Angular 基础知识的开发者；
- 想深入理解 Angular 注射器玩法的开发者。
这个小专题里面讲的内容，在你日常的开发里面用得不多，特别是那些分析原理的内容。So，这个小专题是给那些好奇宝宝看的。
如果你是 Angular 初学者，推荐预先阅读 《Angular 初学者快速上手指南》系列，里面有 34 篇长文、数百个小 demo，由浅入深带你入门，该系列写得比较细，包括：开发环境 @angular/cli 的搭建、VS Code 调试插件的使用、基础概念的解释和示范等等。
以上基础内容在这个小专题里面不再重复，如果你有需要，请自己移步过去仔细阅读。再次强调：这个小专题不是入门材料！这个小专题不是入门材料！这个小专题不是入门材料！
内容列表
- 第01课：基础知识：注射器树
- 第02-1课：Angular 依赖注入的基本玩法
- 第02-2课：@Injectable 与 @Inject
- 第03课：@Self
- 第04课：@Optional
- 第05课：@SkipSelf
- 第06课：@Host
- 第07课：手动操作注射器实例
由于水平有限、错漏难免，欢迎指正，可以在读者圈里跟我沟通，也可以来论坛上发帖子提问。
参考资源
第01课：基础知识：注射器树
为了能更方便地理解后面的内容，需要预先理解以下两个概念：
- 组件树
- 注射器树
同时还要介绍一个调试神器 Augury，注意，这货读['ɔ:ɡjuri]，是“占卜”、“预言”的意思，不是angry，不是愤怒！
组件树
目前，几乎所有前端框架都在玩“组件化”，而且最近都不约而同地选择了“标签化”这种思路，Angular 也不例外。“标签化”会导致一个很自然的结果，组件之间会形成树形结构。例如，对于下面这样一个界面：
用 Angular 实现出来的组件树结构是这样的：
在线查看运行效果，请单击这里查看。
Injector Tree
如你所知，AngularJS 是第一个把“依赖注入”（Dependency Injection）思想带到前端开发领域的框架。
在《Angular 初学者快速上手教程》里面，关于“注射器树”这事儿我们没说太细，这里要说得更精确一点：如果一个 DOM 元素上面被创建了 Component 或者 Directive，Angular 就会创建一个对应的注射器实例。
对于上面的组件结构，形成的注射器结构是这样的：
很明显，这些 Injector 实例也构成了树形结构：
请记住这个树形结构，后续的所有内容都是以此为基础展开的。
利用 Augury 可视化查看注射器树
Augury 是一款 Chrome 插件，它是调试 Angular 应用的利器，利用它可以可视化展示组件树、路由树，以及服务依赖关系。
比如，对于 NiceFish 首页：
它的服务依赖关系是这样的：
组件依赖关系是这样的：
整体路由树是这样的：
小结
到这里为止，你知道了：在 Angular 应用运行时，组件之间会构成树形结构，Injector（注射器）的实例也会构成树形结构。
接下来，我们从易到难，把注射器玩儿出花来。
参考资源
第02-1课：Angular 依赖注入的基本玩法
第02-2课：@Injectable 与 @Inject
第03课：@Self
第04课：@Optional
第05课：@SkipSelf
第06课：@Host
第07课：手动操作注射器实例
阅读全文: http://gitbook.cn/gitchat/column/5a9e2d581bf25e5de3268ee9