本文爲原創文章，轉載請標明出處
目錄
- 架構
- 模板與數據綁定
- 生命週期
1. 架構
模塊
Angular 應用是模塊化的，並且 Angular 有自己的模塊系統，它被稱爲 Angular 模塊 或 NgModules。
Angular 模塊都是一個帶有 @NgModule 裝飾器的類。
NgModule 是一個裝飾器函數，它接收一個用來描述模塊屬性的元數據對象。其中最重要的屬性是：
`declarations` - 聲明本模塊中擁有的視圖類。Angular 有三種視圖類：組件、指令和管道。
`exports` - declarations 的子集，可用於其它模塊的組件模板。
`imports` - 本模塊聲明的組件模板需要的類所在的其它模塊。
`providers` - 服務的創建者，並加入到全局服務列表中，可用於應用任何部分。
`bootstrap` - 指定應用的主視圖（稱爲根組件），它是所有其它視圖的宿主。只有根模塊才能設置 `bootstrap` 屬性。組件
組件負責控制視圖，通過一些由屬性和方法組成的 API 與視圖交互。
模板
模板以 HTML 形式存在，告訴 Angular 如何渲染組件。
元數據
元數據告訴 Angular 如何處理一個類。
@Component 裝飾器能接受一個配置對象， Angular 會基於這些信息創建和展示組件及其視圖。
@Component 裏面的元數據會告訴 Angular 從哪裏獲取你爲組件指定的主要的構建塊。
@Component 的配置項包括：
`selector` - CSS 選擇器，它告訴 Angular 在父級 HTML 中查找標籤，創建並插入該組件。
`templateUrl` - 組件 HTML 模板的模塊相對地址。
`providers` - 組件所需服務的依賴注入提供商數組。數據綁定
Angular 支持數據綁定，一種讓模板的各部分與組件的各部分相互合作的機制。 往模板 HTML 中添加綁定標記，來告訴 Angular 如何把二者聯繫起來。
指令
Angular 模板是動態的。當 Angular 渲染它們時，它會根據指令提供的操作對 DOM 進行轉換。
服務
服務是一個廣義範疇，包括：值、函數，或應用所需的特性。
依賴注入
大多數依賴都是服務。 Angular 使用依賴注入來提供新組件以及組件所需的服務。
2. 模板與數據綁定
綁定的類型可以根據數據流的方向分成三類： 從數據源到視圖、從視圖到數據源以及雙向的從視圖到數據源再到視圖。
| 數據方向 | 語法 | 綁定類型 |
|---|---|---|
|
單向 從數據源到視圖目標 |
{{ expression }}
|
插值表達式 Property Attribute 類 樣式 |
|
單向 從視圖目標到數據源 |
(target)="statement"
|
事件 |
| 雙向 |
[(target)]="expression"
|
雙向 |
數據綁定的目標是 DOM 中的某些東西。 這個目標可能是（元素 | 組件 | 指令的）property、（元素 | 組件 | 指令的）事件，或(極少數情況下) attribute 名。 下面是的彙總表：
| 綁定類型 | 目標 | 範例 |
|---|---|---|
| Property |
元素的 property 組件的 property 指令的 property |
<img [src]="heroImageUrl">
|
| 事件 |
元素的事件 組件的事件 指令的事件 |
<button (click)="onSave()">Save</button>
|
| 雙向 | 事件與 property |
<input [(ngModel)]="name">
|
| Attribute | attribute |
<button [attr.aria-label]="help">help</button>
|
| CSS 類 | class property |
<div [class.special]="isSpecial">Special</div>
|
| 樣式 | style property |
<button [style.color]="isSpecial ? 'red' : 'green'"></button>
|
內置屬性型指令
- NgClass - 添加或移除一組CSS類
- NgStyle - 添加或移除一組CSS樣式
- NgModel - 雙向綁定到HTML表單元素
內置結構型指令
- NgIf - 根據條件把一個元素添加到DOM中或從DOM移除
- NgSwitch - 一組指令，用於切換一組視圖
- NgFor - 對列表中的每個條目重複套用同一個模板
模板引用變量
# var
3. 生命週期
ngOnChanges()
當 Angular 重新設置數據綁定輸入屬性時響應。該方法接受當前和上一屬性值的 SimpleChanges 對象。
當被綁定的輸入屬性的值發生變化時調用，首次調用一定會發生在 ngOnInit() 之前。
ngOnInit()
在 Angular 第一次顯示數據綁定和設置指令/組件的輸入屬性之後，初始化指令/組件。
在第一輪 ngOnChanges() 完成之後調用，只調用一次。
ngDoCheck()
檢測，並在發生 Angular 無法或不願意自己檢測的變化時作出反應。
在每個 Angular 變更檢測週期中調用，ngOnChanges() 和 ngOnInit() 之後。
ngAfterContentInit()
當把內容投影進組件之後調用。
第一次 ngDoCheck() 之後調用，只調用一次。
只適用於組件。
ngAfterContentChecked()
每次完成被投影組件內容的變更檢測之後調用。
ngAfterContentInit() 和每次 ngDoCheck() 之後調用。
只適合組件。
ngAfterViewInit()
初始化完組件視圖及其子視圖之後調用。
第一次 ngAfterContentChecked() 之後調用，只調用一次。
只適合組件。
ngAfterViewChecked()
每次做完組件視圖和子視圖的變更檢測之後調用。
ngAfterViewInit() 和每次 ngAfterContentChecked() 之後調用。
只適合組件。
ngOnDestroy
在 Angular 銷燬指令/組件之前調用。
如有不當之處，請予指正，謝謝～