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