Angular 2 技能圖譜skill-map

# Angular 2 技能圖譜

## 模塊

### 自定義模塊

- 根模塊

- 特性模塊

- 共享模塊

- 核心模塊

### 內置模塊

- ApplicationModule 模塊

- CommonModule 模塊

- BrowserModule 模塊

- FormsModule 模塊

- ReactiveFormsModule 模塊

- RouterModule 模塊

- HttpModule 模塊

### 元數據

- providers

- declarations

- imports

- exports

- bootstrap

- id

- schemas

- entryComponents

## 指令

### 組件

### 結構指令

- 改變 DOM 樹的結構，如 NgIf

### 屬性指令

- 改變元素的外觀和行爲，如 NgStyle

### 生命週期鉤子

- OnInit

- OnChanges

- DoCheck

- OnDestroy

### 內置指令

- 通用指令

* NgClass

* NgStyle

* NgIf

* NgSwitch

* NgFor

* NgTemplateOutLet

* NgPlural

- 表單指令

* FormsModule 模塊

+ NgForm

+ NgModelGroup

+ NgModel

+ InternalFormsSharedModule 模塊

* ReactiveFormsModule 模塊

+ FormControlDirective

+ FormGroupDirective

+ FormControlName

+ FormGroupName

+ FormArrayName

+ InternalFormsSharedModule 模塊

* InternalFormsSharedModule 模塊

+ 表單元素訪問器指令

+ 表單選擇框選項指令

+ 表單驗證指令

+ 控件狀態指令

- 路由指令

* RouterLink

+ RouterLinkWithHref（a[routerLink]）

+ RouterLink（:not(a)[routerLink]）

* RouterLinkActive

* RouterOutlet

### 自定義指令

## 組件

### 元數據

- selector

- moduleId

- inputs

- outputs

- host

- exportAs

- providers

- viewProviders

- changeDetection

- queries

- entryComponents

- templateUrl

- template

- encapsulation

- styles

- styleUrls

- animations

- interpolation

### 生命週期鉤子

- OnChanges

- OnInit

- DoCheck

- AfterContentInit

- AfterContentChecked

- AfterViewInit

- AfterViewChecked

- OnDestroy

### 模板

## 模板

### 表達式操做符

- 管道（|）

* 內置管道

* 自定義管道

* 純管道

* 非純管道

- 安全導航（?.）

### 數據綁定

- 屬性綁定 - []

* 插值 - {{}}

* Property 綁定

* Attribute、 class 與 style 綁定

- 事件綁定 - ()

- 雙向綁定 - [()]

### 表單

- 模板局部變量（# 或 ref-）

- 表單校驗

* 內置校驗器

* 自定義檢驗器

- 表單狀態

- 表單指令

### 內置元素標籤

- \<ng-container>

- \<ng-content>

## 路由

### 路由指令

### 路由策略

- PathLocationStrategy

- HashLocationStrategy

- PreloadingStrategy

* PreloadAllModules

* NoPreloading（默認）

* 自定義預加載策略

### 路由攔截

- CanActivate（激活攔截）

- CanActivateChild（激活子路由配置項）

- CanDeactivate（反激活攔截）

- CanLoad（模塊加載攔截）

- Resolve（數據預加載攔截）

### 路由跳轉

- 指令跳轉

* RouterLink

- 代碼跳轉

* navigateByUrl()

* navigate()

### 路由狀態

- ActivatedRouteSnapshot

- RouterStateSnapshot

## 依賴注入

### 注入器（樹）

### Provider

- 類 Provider（useClass）

- 值 Provider（useValue）

- 別名 Provider （useExisting）

- 工廠 Provider（useFactory）

### forwardRef()

### 可選依賴 - @Optional

## 服務

### 內置服務

- JsonpModule 模塊

* Jsonp

* BrowserJsonp

* RequestOptions

* ResponseOptions

* JSONPBackend

- HttpModule 模塊

* HTTP

* BrowserXhr

* XHRBackend

* XSRFStrategy

* RequestOptions

* ResponseOptions

### 自定義服務

## RxJS

### Observable

### Observer

### Subscription

### Subject

### operators

- 建立操做符

- 轉化操做符

- 過濾操做符

- 組合操做符

- 錯誤處理操做符

- 工具操做符

- 條件操做符

### Scheduler

## 裝飾器

### 類裝飾器

- @Component

- @Directive

- @Pipe

- @Injectable

- @NgModule

### 屬性裝飾器

- @Input

- @Output

- @HostBinding

- @HostListener

- @ContentChild

- @ContentChildren

- @ViewChild

- @ViewChildren

### 參數裝飾器

- @Inject

- @Optional

- @Self

- @SkipSelf

- @Host

- @Attribute

## 動畫

- AnimationKeyframe

- AnimationPlayer

- AnimationSequencePlayer

- AnimationGroupPlayer

- AnimationQueue

- AnimationTransition

- AnimationTransitionEvent

## 變化檢測

### Zone.js

- ngZone

* onUnstable

* onMicrotaskEmpty

* onStable

* onError

### 異步操做

- 用戶事件：Click/Change...

- 通訊：XHR/WebSocket

- 定時任務：setTimeout/requestAnimationFrame

### ChangeDetectorRef

## 測試

### 單元測試

- Jasmine 測試框架

- Karma 管理工具

### 端到端測試

- Protractor

- Benchpress

###  內置工具集

- TestBed

- inject

- ComponentFixture

- fakeAsync

- flushMicrotasks

- tick

- discardPeriodicTasks

## 升級

- UpgradeAdapter

- UpgradeAdapterRef

## 模板編譯器

- 動態 - JIT

- 靜態 - AoT

+ ngc

## 調試

- Augury

- 斷點調試

## 質量檢查工具

- TSLint

- Codelyzer

## 構建工具

- webpack

- Gulp

- RollUp

- System.js

## 編碼工具

- VS Code

- WebStorm

- Atom

- Sublime Text 

- Vim

## 開發語言

- TypeScript

- ES6 / ES5

- Dart

## 周邊生態圈

- Angular Material 2

- Universal

- Angular-CLI

- Ionic 2

- NativeScript

- Angular Mobile Toolkit

- AngularFire 2

- Angular Electron