Angular 4+ 修仙之路

Angular 4.x 快速入門

• Angular 4 快速入門

  • 涉及 Angular 簡介、環境搭建、插件表達式、自定義組件、表單模塊、Http 模塊等

• Angular 4 基礎教程

  • 涉及 Angular CLI 使用、建立組件、事件、自定義服務、 ngFor 指令、Input、Output 裝飾器等

• Angular 4 指令快速入門

  • 涉及如何建立指令、定義輸入屬性、事件處理、如何獲取宿主元素屬性值、如何建立結構指令等

• Angular 4 表單快速入門

  • 涉及如何建立表單、表單驗證、表單控件狀態、單選控件、多選控件的使用等

• Angular 表單簡介

  • 涉及 Template-driven 表單與 Reactive 表單的特色、表單控件狀態、Reactive 表單簡介等

• Angular 4.x 路由快速入門

  • 涉及路由簡介、如何配置路由、動態路由、子路由、路由指令及路由相關 API 等

• TypeScript 簡介

  • 涉及 TypeScript 數據類型、複合類型、箭頭函數、可選參數、默認參數、對象解構、數組解構等

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 2.x 結構指令

  • 涉及結構指令定義、* 號語法及具體應用示例

• Angular 4.x Directive Lifecycle

  • 涉及指令與組件的區別、指令生命週期鉤子的做用及調用順序、生命週期鉤子詳解、Angular 4.x LifecycleHooks、SimpleChanges 相關接口等

• Angular 4.x NgIf

  • 涉及 NgIf 指令做用、語法、基礎用法及 NgIf 指令源碼分析

• Angular 4.x NgForOf

  • 涉及 NgForOf 指令做用、語法、基礎用法及 NgForOf 指令源碼分析

• Angular 4.x NgTemplateOutlet

  • 涉及 NgTemplateOutlet 指令做用、語法、基礎用法及 NgTemplateOutlet 指令源碼分析

• Angular 中自定義 Debounce Click 指令

  • 涉及 Directive API 來建立自定義 debounce click 指令，用於處理指定時間內屢次點擊事件

• Angular 4.x Components Communicate

  • 涉及組件通訊的經常使用方式：@Input、@Output、@ViewChild、模板變量、MessageService、Broadcaster (Angular 1.x $rootScope 中 $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 類裝飾器、屬性裝飾器、方法裝飾器、參數裝飾器等

• Angualr 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 依賴注入教程之一 依賴注入簡介

  • 涉及依賴注入的基礎知識及在 Angular 中的應用

• Angular 4 依賴注入教程之二 組件服務注入

  • 涉及 Angular 服務的定義及組件中服務的注入方式

• Angular 4 依賴注入教程之三 ClassProvider的使用

  • 涉及 Angular 中 ClassProvider 的基礎知識及使用

• Angular 4 依賴注入教程之四 FactoryProvider的使用

  • 涉及 Angular 中 FactoryProvider 的基礎知識及使用

• Angular 4 依賴注入教程之五 FactoryProvider配置依賴對象

  • 涉及 Angular 中 FactoryProvider 如何配置依賴對象

• Angular 4 依賴注入教程之六 Injectable 裝飾器

  • 涉及 Angular 中 Injectable 裝飾器的做用

• Angular 4 依賴注入教程之七 ValueProvider的使用

  • 涉及 Angular 中 ValueProvider 的基礎知識及使用

• Angular 4 依賴注入教程之八 InjectToken的使用

  • 涉及 Angular 中 InjectToken 的基礎知識及做用

• 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 對象等

• 使用 RxJS 處理多個 Http 請求

  • 涉及使用 RxJS mergeMap 和 forkJoin 操做符處理多個 Http 請求

• 激動人心的 Angular HttpClient

  • 涉及 Angular 4.3 版本中 HttpClient 的主要特性，如默認 JOSN 解析、支持攔截器和進度事件等

• Angular HTTP Client 快速入門

  • 涉及 Angular 4.3 版本中 HttpClient 的使用示例，如發送 Get 請求、設置查詢參數、設置請求頭、發送其它 Http 請求、並行發送多個請求、順序發送 Http 請求、異常處理、攔截器和進度事件等

Form(表單)

• Angular 表單控件示例

  • 涉及 Template-driven 表單經常使用控件，如 text、radio、select (基本類型、對象)、multi select、cascading select (級聯)、multi checkbox 等控件的使用

• 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 Reactive Form 表單驗證

  • 涉及 Reactive 表單內建驗證規則、動態調整驗證規則、自定義驗證器、跨字段驗證等

• 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 等

• RxJS - Observables, observers 和 operators 簡介

  • 涉及自定義 Observable、Operators 的相關知識

• 自定義 toJSON 操做符

  • 涉及 RxJS 中自定義操做符的相關知識

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 指令等

• Angular NgModule 做用域相關問題

  • 涉及 Angular NgModule 做用域的相關問題

• Angular CLI 終極指南

  • 涉及 Angular CLI 簡介及詳細介紹了 Angular CLI 支持的功能，如新建項目、單元測試、項目構建等

• ng-conf-2017 - Angular Form Validation

  • 涉及表單驗證概述、同步驗證、異步驗證及表單驗證執行流程等

• Angular 中什麼時候取消訂閱

  • 涉及 Angular 需手動釋放資源和無需手動釋放資源的場景

• Angular 開發者常犯的錯誤

  • 涉及 Angular 開發過程當中，常犯的錯誤，如 ngOnChanges vs ngDoCheck、未及時釋放資源、額外取消訂閱操做等內容

• ng-content 中隱藏的內容

  • 涉及 targeted projection、ngProjectAs 及 ng-content 使用過程當中可能遇到的問題及解決方案。

• Angular Renderer (渲染器)

  • 涉及 Angular 中平臺和渲染器的概念、Angular 渲染器工做原理、DefaultDomRenderer2 及 DomRendererFactory2 內部應用

• TypeScript 資源集

  • 涉及 TypeScript 技術選型、教程、項目實戰、中英文視頻教程和中英文書籍等