經過前面的學習，基本瞭解了Angular2.0的使用，所有的Module都是一個Component，甚至一個事件響應也是一個Component，或者表單驗證也可以是一個Component。

Angular的運作機制圖

新增Bootstrapping 元件

import{bootstrap}from'angular2/angular2';

常見的模板語法

在Angular中 元件中的資料和Template中的表示式進行資料繫結，表示式可以是一個常量值 ，也可以是boolean表示式。

1. <input [value]="firstName"> 繫結元件中的value屬性到input的表示式firstName。

2. <div [attr.role]="myAriaRole"> 繫結元件中物件的屬性到html表示式myAriaRole

3. <div [class.extra-sparkle]="hero === selectedHero"> ----當hero === selectedHero表示式為真時使用樣式extra-sparkle。

4. <div [style.width.px]="mySize"> 繫結樣式的width屬性到mysize（例如 10*20）表示式，單位是可選的。

5. <button (click)="readRainbow($event)">

   繫結click事件，readRainbow($event)是元件中事件處理函式，$event是傳入引數。

6. <div title="Hello {{ponyName}}"> 將一個屬性繫結到一個元件字串變數 。

7. <p>Hello {{ponyName}}</p> 將文字內容繫結到一個元件字串變數

8. <my-cmp [(title)]="name"> 設定雙向資料繫結 相當於<my-cmp [title]="name" (titleChange)="name=$event">

9. <video #movieplayer ...><button (click)="movieplayer.play()"></video>

   
   建立一個本地變數movieplaye 用於接收當前模板中的資料繫結和事件繫結表示式中的視訊元素例項

10. <p *myUnless="myExpression">...</p> *符號意味著將當前元素嵌入到模板myExpression中 ,等價於<template [myUnless]="myExpression"><p>...</p></template>

11. <p>Card No.: {{cardNumber | myCreditCardNumberFormatter}}</p> 將表示式cardNumber的值用myCreditCardNumberFormatter格式化

12. <p>Employer: {{employer?.companyName}}</p> "?"表示當employer沒有定義或者為空時忽略。

內建指令

內建指令匯入的方式：import {NgIf, ...} from 'angular2/common'

1. <section *ngIf="showSection"> 根據表示式showSection刪除或重新建立一個DOM樹section元素

2. <li *ngFor="#item of list"> 將li元素及其內容轉為模板，並使用For迴圈顯示列表中的每個專案。

3. switch指令

   <div [ngSwitch]="conditionExpression"><template [ngSwitchWhen]="case1Exp">...</template><templatengSwitchWhen="case2LiteralString">...</template><templatengSwitchDefault>...</template></div>

   根據表示式conditionExpression來判斷嵌入哪個模板

4. 選擇樣式指令

   <div [ngClass]="{active: isActive, disabled: isDisabled}">

   繫結一個存在的樣式，右邊map表示式運算結果例如這樣{active: true, disabled: false}

表單指令

匯入方式：import {FORM_DIRECTIVES} from 'angular2/common'

<input [(ngModel)]="userName"> 雙向資料繫結。

類註解。

匯入樣式：import {Directive, ...} from 'angular2/core'

1. 註解當前類為一個元件

   @Component({...})classMyComponent(){}

2. 註解一個管道元件

   @Pipe({...})classMyPipe(){}

3. 註解一個Injectable元件,Injectable元件一般是服務類元件，單例模式。

   @Injectable()classMyService(){}

   元件配置

1.作用於元件檢視範圍 依賴注入的一組provider元件。

viewProviders: [MyService, provide(...)]

2.元件的內聯模板/外部模板檢視。

template:'Hello {{name}}'
     templateUrl:'my-component.html'

3.內聯CSS樣式/外部樣式表的URL列表。

     styles:['.primary {color: red}']
     styleUrls:['my-component.css']

4.配置元件模板中使用的指令列表。

directives: [MyDirective, MyComponent]

5.配置元件的管道元件列表

pipes: [MyPipe, OtherPipe]

用於指令和元件類欄位修飾符

1. @Input() myProperty ：

   宣告一個輸入屬性，屬性是雙向繫結

2. @Output() myEvent = new EventEmitter() ：

   宣告一個輸出屬性，繫結一個觸發事件。

3. @HostBinding('[class.valid]') isValid

   結合主元素的屬性（例如CSS類有效）指令/元件的屬性（如 isValid）。

4. @HostListener('click', ['$event']) onClick(e) {...}

   監聽主元素事件（如單擊事件）通過指令/元件的方法（如onclick），可以傳遞一個引數（$event）。

5. @ContentChild(myPredicate) myChildComponent

   繫結元件的內容查詢的第一個結果（mypredicate）到類屬性:mychildcomponent

6. @ContentChildren(myPredicate) myChildComponents

   繫結元件的所以查詢內容（mypredicate）到類的mychildcomponent屬性上。

7. @ViewChild(myPredicate) myChildComponent

   繫結元件的檢視查詢的第一個結果（mypredicate）到類的mychildcomponent屬性上。（對指令無效）。

8. @ViewChildren(myPredicate) myChildComponents

   繫結元件的檢視查詢的所有結果（mypredicate）到類的mychildcomponent屬性上。（對指令無效）。

指令和元件變化檢測和生命週期鉤

1. constructor(myService: MyService, ...) { ... }

   在任何其他生命週期鉤前，該類建構函式被呼叫。用它來注入依賴關係，為了避免任何發生錯誤。

2. ngOnChanges(changeRecord) { ... }

   更改任何輸入屬性之後呼叫和在內容處理或者子檢視之前呼叫

3. ngOnInit() { ... }

   建構函式之後呼叫，初始化輸入屬性時呼叫，呼叫一次ngOnChanges。

4. ngDoCheck() { ... }

   每次校驗元件或者指令的輸入屬性是呼叫。使用它來執行一個自定義校驗來擴充套件更改預設校驗。

5. ngAfterContentInit() { ... }

   當元件或指令的內容已經被初始化ngOnInit後呼叫。

6. ngAfterContentChecked() { ... }

   當元件或指令的內容校驗後呼叫

7. ngAfterViewInit() { ... }

   當元件的檢視已初始化,ngaftercontentinit方法後呼叫。僅適用於元件。

8. ngAfterViewChecked() { ... }

   當元件的檢視校驗完成後呼叫。僅適用於元件。

9. ngOnDestroy() { ... }

   在元件銷燬之前呼叫一次。

依賴注入配置

1. provide(MyService, {useClass: MyMockService})

   設定或用Class型別的元件MyMockService重寫MyService類的provide配置。

2. provide(MyService, {useFactory: myFactory})

   設定或用Factory模式的元件myFactory重寫MyService的provide配置。

3. provide(MyValue, {useValue: 41})

   設定或MyValue設定值為41。

路由與導航

指令匯入方式：

import{RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS,...}from'angular2/router';

1. 路由配置格式：

   @RouteConfig([{ path:'/:myParam', component:MyComponent,as:'MyCmp'},{ path:'/staticPath', component:...,as:...},{ path:'/*wildCardParam', component:...,as:...}])classMyComponent(){}

   配置元件的路由。支援靜態配置，引數配置，和萬用字元的路由配置。

2. <router-outlet></router-outlet>

   使用當前元件啟用的路由

3. <a [routerLink]="[ '/MyCmp', {myParam: 'value' } ]">

   建立一個連結到一個不同的檢視的，檢視是基於路由指令組成的路由名稱和可選引數。路由名稱與配置路由的屬性相匹配。以"/"為字首表示從根路由訪問，以"./"為字首表示從子路由訪問。

4. @CanActivate(() => { ... })class MyComponent() {}

   在元件裝飾中，定義一個函式，該函式用於向路由器確定是否應該啟用該元件。返回一個布林值或一個承諾。

5. routerOnActivate(nextInstruction, prevInstruction) { ... }

   在訪問到一個元件時，路由器呼叫元件的routerOnActivate方法（如果定義了）。

6. routerCanReuse(nextInstruction, prevInstruction) { ... }

   路由器呼叫一個元件的routerCanReuse方法（如果定義了）來確定是否使用例項或銷燬它並建立一個新的例項。應該返回一個布林值或一個承諾。

7. routerCanDeactivate(nextInstruction, prevInstruction) { ... }

   路由器呼叫每個元件的routerCanDeactivate方法（如果定義了），訪問後將移除。如果所有這些方法返回的是true或者承諾，則表示訪問已被處理。

8. routerOnDeactivate(nextInstruction, prevInstruction) { ... }

   在該指令被刪除作為路由改變的結果之前呼叫。可能會返回一個承諾，暫停刪除指令，直到承諾解決。