Angular 4.x 修仙之路

查看新版教程，請訪問前端修仙之路

近期回答了 SF 上和 QQ 羣裏面的一些問題，發現一些問題對初學者來講，均可能會遇到。我的時間有限，但願建個羣，藉助你們的力量，記錄彙總每一個遇到的問題，而後整理成 Angular FAQ！ 有興趣的朋友能夠加一下 QQ 羣：Angular 修仙之路 - 153742079 (羣名稱規則：城市 + 暱稱)

相較於以前分享的修仙之路目錄，增長了較多新的內容。首先自我介紹一下：我不是"大神"，由於還在修仙中哈。下面是在學習 Angular 2 過程當中整理的學習筆記，但願對你們能有所幫助，更詳細和更權威的學習資源，請你們閱讀官方文檔。另外，本系列的出發點是從點到面的思路，把 Angular 2 中的知識點打散掉，而後逐一介紹，儘可能會使用簡單的示例，讓你們基礎掌握每一個知識點，最後纔會經過具體實例把知識點串起來。(不喜歡該方式的讀者，請見諒哈)

工做須要咱們擼起了 Ionic 2，爲了方便的記錄學習資料，我整理了一份 Angular 2 和 Ionic 2 的學習資料，放到了 GitHub 上，有興趣的童鞋，能夠了解一下(有好的學習資源，幫忙推薦哈)。

更新時間 - 2017-05-05

Angular 4.x 組件學習線路 (僅供參考)

對於剛從 Angular 1.x 轉到 Angular 4.x 的用戶，建議先閱讀一下 Angular 4.x vs Angular 1.x 章節 (目前還不夠完善)。下面提供的學習線路僅供參考，讀者能夠自行選讀。該學習線路基本包含 Angular 4.x 組件相關知識，若是有遺漏，歡迎你們指出。(友情提示：初學者不用完整了解每一個部分的內容，特別是設計源碼分析的部分，只需瞭解基本用法，而後多實踐哈)

• Angular 4.x Template Syntax & Common Directives
  • 瞭解 Angular 4.x 模板語法和經常使用內建指令 (更新ngIf...Else)
• Angular 4.x Directive
  • 瞭解指令與組件的區別及Metadata信息
• Angular 4.x Directive Lifecycle
  • 瞭解經常使用的 ngOnInit、ngOnChanges、ngAfterViewInit、ngAfterContentInit 聲明週期鉤子和觸發順序
• Angular 4.x constructor & ngOnInit
  • 瞭解 constructor 與 ngOnInit 鉤子的應用場景
• Angular 4.x ViewEncapsulation
  • 瞭解 ViewEncapsulation 三種封裝模式的區別
• Angular 4.x Input
  • 瞭解 @Input() 裝飾器的用法，掌握如何實現父 -> 子組件通訊
• Angular 4.x Output
  • 瞭解 @Output() 裝飾器的用法，掌握如何實現子 -> 父組件通訊
• Angular 4.x ViewChild & ViewChildren
  • 瞭解 @ViewChild()、@ViewChildren() 裝飾器用法，掌握如何獲取子組件
• Angular 4.x ContentChild & ContentChildren
  • 瞭解 @ContentChild()、@ContentChildren() 裝飾器用法及與@ViewChild()、@ViewChildren() 裝飾器的區別
• Angular 4.x HostListener & HostBinding
  • 瞭解宿主元素的概念及 @HostListener()、@HostBinding() 裝飾器的做用
• Angular 4.x ElementRef
  • 瞭解 ElementRef 的做用、定義及應用、Renderer API 經常使用方法
• Angular 4.x TemplateRef & ViewContainerRef
  • 瞭解 TemplateRef 及 ViewContainerRef 的應用
• Angular 4.x Components Communicate
  • 瞭解組件通訊的經常使用方式
• Angular 4.x Component Inheritance
  • 瞭解面向對象中類和繼承的概念及Angular 4.x 組件繼承的應用
• Angular 4.x Change Detection - 1、Angular 4.x Change Detection - 2
  • 瞭解 Angular 4.x 變化檢測、組件變化檢測器及OnPush 策略、Mutable & Immutable、ChangeDetectorRef、Observables 等內容

Angular 4.x vs Angular 1.x

• Angular 4.x NgModule vs Angular 1 module

  • 涉及 Angular 1.x 根模塊、子模塊及 Angular 4.x 根模塊、根組件、子組件的定義使用

• Angular 4.x Service vs Angular 1 Service

  • 涉及 Angular 4.x 和 Angular 1 如何定義 service及使用方式

• Angular 4.x Pipe vs Angular 1 filter

  • 涉及 Angular 自定義管道(過濾器)、管道(過濾器)傳參、管道對象($filter) 服務的使用

• Angular 4.x ngFor vs Angular 1 ng-repeat

  • 涉及 Angular *ngFor(ng-repeat) 指令使用、index($index)、trackBy(track by ) 的應用的區別

Provider

• Angular 4.x Provider
  • 涉及 useClass、useValue、useExisting、useFactory 及 Provider 使用方式
• Angular 4.x Multi Providers
  • 涉及 multi provider 做用及 Angular 4.x 內部應用
• Angular 4.x Forward Reference
  • 涉及 forwardRef 的做用及內部工做原理，同時解釋 JavaScript 解釋器不能自動提高 Class
• Angular 4.x OpaqueToken & InjectionToken
  • 涉及使用字符串做爲 Token存在問題，詳細介紹如何使用 OpaqueToken、InjectionToken 解決問題

Directive(指令)

• Angular 4.x Template Syntax & Common Directives
  • 涉及模板語法、經常使用指令簡介及 NgStyle 指令解析、*ngFor trackBy 應用等
• Angular 4.x Directive
  • 涉及指令分類、Angular 4.x 內置屬性指令、結構指令、*directive 結構指令語法糖、自定義屬性指令、結構指令等
• Angular 4.x Directive Lifecycle
  • 涉及指令與組件的區別、指令生命週期鉤子的做用及調用順序、生命週期鉤子詳解、Angular 4.x LifecycleHooks、SimpleChanges 相關接口等
• Angular 4.x Components Communicate
  • 涉及組件通訊的經常使用方式：@Input、@Output、@ViewChild、模板變量、MessageService、Broadcaster (Angular 1.x on、$broadcast ) 和 Pub - Sub 模式、RxJS Subject 存在的問題
• Angular 4.x Pass Async Data
  • 涉及父子組件通訊時，處理異步輸入屬性的方案
• Angular 4.x Component Inheritance
  • 涉及面向對象中類和繼承的概念及Angular 4.x 組件繼承的應用及注意事項
• Angular 4.x Dynamically Creating Components
  • 涉及 Angular 中如何動態建立組件及介紹 <ng-container> 指令的做用

Decorator(裝飾器)

• Angular 4.x Decorator - 1
  • 涉及裝飾器定義和分類、TypeScript 類裝飾器、屬性裝飾器、方法裝飾器、參數裝飾器等
• Angular 4.x Decorator - 2
  • 涉及 Angular 4.x 類裝飾器、屬性裝飾器、方法裝飾器、參數裝飾器示例
• Angular 4.x Decorator - 3
  • 涉及 Angular 4.x Metadata 分類：annotations、design:paramtypes、propMetadata、parameters 及映射關係
• Angular 4.x Input
  • 涉及 @Input、@Input('bindingPropertyName')、@Component() - inputs、setter & getter 、ngOnChanges 等
• Angular 4.x Output
  • 涉及 @Output、@Output('bindingPropertyName')、@Component() - outputs、Two-Way Data Binding、[()] 語法示例、ngModel 等
• Angular 4.x Inject Decorator
  • 涉及 @Inject 裝飾器的做用、實際應用及內部實現，並解釋了非 Type 類型的參數只能用 @Inject(Something) 的方式注入的緣由，此外還介紹了 @Injectable、Reflect API 等
• Angular 4.x ViewChild & ViewChildren
  • 涉及 @ViewChild、@ViewChildren 裝飾器使用及 @ViewChild 裝飾器原理詳解
• Angular 4.x ContentChild & ContentChildren
  • 涉及 @ContentChild、@ContentChildren 裝飾器使用及 @ContentChild 接口及裝飾器，同時介紹了 Content Projection (內容投影) 的概念及 @ContentChild 與 @ViewChild 裝飾器的區別等
• Angular 4.x HostListener & HostBinding
  • 涉及 Host Element、HostListener 裝飾器定義及應用、Host Event Listener、HostBinding 裝飾器定義及應用、Host Property Bindings 等

Pipe(管道)

• Angular 4.x Pipe
  • Angular 4.x 內建管道分類及使用示例、管道參數、管道鏈、自定義管道、管道分類、管道探祕等
• Angular 4.x AsyncPipe
  • 涉及 AsyncPipe with Promise、AsyncPipe with Observables、使用 AsyncPipe 重複發送請求的解決方案及 AsyncPipe 內部執行流程 (源碼解析)

Dependency Injection(依賴注入)

• Angular 4.x IoC & DI
  • 涉及 IoC 和 DI、DI 在 AngularJS 1.x 中的應用、內部工做原理及存在的問題等
• Angular 4.x Injector
  • 涉及依賴注入的概念及Angular 4.x 注入器的內部實現

Change Detection(變化檢測)

• Angular 4.x Change Detection - 1
  • 涉及變化和變化觸發源、Zones、NgZone 及如何訪問 Zone 打補丁前的方法，如 setTimeout、clearTimeout 等
• Angular 4.x Change Detection - 2
  • 涉及組件和變化檢測器、OnChanges、變化檢測性能優化、OnPush 策略、Mutable & Immutable、ChangeDetectorRef、Observables 等

Http

• Angular 4.x Http Module - HTTP
  • 涉及 B/S、URI、MIME、HTTP請求和響應報文、HTTP 請求方法和狀態碼，並收錄了 HTTP 經典教程和相關工具，如 Cookie 與 Session、HTTP 緩存、CORS、HTTP/二、HTTPS及經常使用的HTTP抓包工具、Chrome相關插件、各平臺HTTP包、壓力測試工具等
• Angular 4.x Http Module - XMLHttpRequest
  • 涉及 AJAX、XMLHTTP、XMLHttpRequest詳解、XMLHttpRequest Level 一、Level 2 詳解、XHR 上傳、下載數據、XHR 流式傳輸、XHR 定時輪詢和長輪詢區別與優缺點、XMLHttpRequest 經常使用代碼片斷、常見問題等
• Angular 4.x HttpModule 腦圖(思惟導圖)
• Angular 4.x HttpModule Reveal(源碼揭祕)
  • 涉及 HTTP 協議、HTTP 請求報文、HTTP 響應報文、HttpModule Request、Response、RequestOptions、ResponseOptions、XHRBackend 對象等
• Angular 4.x Http Interceptor (未完成)

Form(表單)

• Angular 4.x Template Driven Forms
  • 涉及 ngModel、[ngModel]、[(ngModel)]、ngModelGroup、Template-Driven error validation
• Angular 4.x Reactive Forms
  • 涉及 FormControl、FormGroup、Reactive Submit、Reactive Forms error validation、FormBuilder
• Angular 4.x 基於AbstractControl自定義表單驗證
  • 涉及 FormGroup、FormBuilder與FormGroup源碼、AbstractControl、自定義驗證規則等
• Angular 4.x Custom Form Control
  • 涉及 ControlValueAccessor、自定義驗證規則等
• Angular 4.x Custom Validator Directive
  • 涉及 required、email、minlength 等內建 validators、自定義驗證指令
• Angular 4.x Forms patchValue and setValue
  • 涉及 FormControl 和 FormGroup 類 patchValue() 和 setValue() 方法的使用和區別
• Angular 4.x ngModel 雙向綁定原理揭祕
  • 涉及 ngModel 使用示例(單向綁定、雙向綁定、ngModelOptions、disabled等)及ngModel 雙向綁定實現原理
• Angular 4.x Creating Dynamic Form
  • 涉及動態建立表單的相關內容

Router

• Angular 4.x 路由快速入門

  • 涉及路由配置、動態路由、子路由、routerLink、routerLinkActive 指令及 Router API。

• Angular 4.x LocationStrategy

  • 涉及 History 對象、Hash 模式和 HTML 5模式及 Angular 中的HashLocationStrategy 和 PathLocationStrategy 策略。

• Angular 4.x Router Link Directives

  • 涉及 Angular 4.x Router 中 RouterLink、RouterLinkWithHref 及 RouterLinkActive 指令的相關內容

Events

• Angular 4.x Events Bubbling
  • 涉及 Angular 4.x 中事件冒泡機制及介紹如何基於 Angular 指令系統，實現阻止冒泡指令
• Angular 4.x EventManager & Custom EventManagerPlugin
  • 涉及 Angular 4.x 中 EventManager (事件管理器) 工做原理及介紹如何自定義 EventManagerPlugin 插件

Compiler(編譯器)

• Angular 4.x JIT vs AOT
  • 涉及 Just-In-Time & Ahead-Of-Time、JIT vs AOT 、AOT 詳解、AOT 實戰等
• Angular 4.x Compiler (未完成)

Reference Object(引用對象)

• Angular 4.x ElementRef
  • 涉及 ElementRef 的做用、定義及應用、Renderer API 經常使用方法
• Angular 4.x TemplateRef & ViewContainerRef
  • 涉及 HTML 5 template、TemplateRef 及 ViewContainerRef 的應用，此外介紹了 Angular 4.x 視圖類型、ViewRef 與 EmbeddedViewRef 之間的關係等

RxJS

• Functional Programming

  • 涉及函數式編程概念、基礎條件、重要特性、優點、經常使用方法等

• Observable

  • 涉及觀察者、迭代器模式、Observable提案、自定義Observable、Create Operators、Observer、Pull vs Push、Observable vs Promise 等

• Operators

  • 涉及 Marble diagrams、Create Operators、Transformation Operators、Filtering Operators、Combination Operators、Utility Operators 等

• Subject

  • 涉及觀察者模式定義、結構及實戰、Observable subscribe、自定義 Subject、RxJS Subject、Angular 4.x RxJS Subject 應用、BehaviorSubject、ReplaySubject、AsyncSubject 等

Others(其餘)

• Angular 4.x ViewEncapsulation
  • 涉及 Web Components、Shadow DOM 及 ViewEncapsulation 三種封裝模式的區別
• Angular 4.x constructor & ngOnInit
  • 涉及 constructor、ngOnInit、constructor & ngOnInit 應用場景等
• Angular 4.x DomSanitizer
  • 涉及 Cross-site scripting、Angular 4.x XSS 防禦、DomSanitizer、自定義 keepHtml 指令等