| Bootstrapping | import {bootstrap} from 'angular2/angular2'; |
|---|---|
bootstrap(MyAppComponent, [MyService, provide(...)]); |
將MyAppComponent做爲根組價來初始化整個應用，而且配置依賴注入的容器 |
| Template syntax | |
|---|---|
<input [value]="firstName"> |
將value屬性綁定到firstName表達式的計算結果 |
<div [attr.role]="myAriaRole"> |
將屬性 role 綁定到表達式 myAriaRole的值 |
<div [class.extra-sparkle]="isDelightful"> |
將CSS類 extra-sparkle 是否有效綁定到表達式 isDelightful的結果 |
<div [style.width.px]="mySize"> |
將樣式屬性 width 綁定到表達式 mySize ，默認的是PX，也可使用單位 |
<button (click)="readRainbow($event)"> |
當該組件或者其子元素被點擊時調用readRainbow方法，而且傳遞一個event對象 |
<div title="Hello {{ponyName}}"> |
將屬性綁定到某個內插值字符串，等價於<div [title]="'Hello' + ponyName"> |
Hello {{ponyName}} |
將文本內容綁定到某個內插值字符串，譬如. "Hello Seabiscuit". |
<my-cmp [(title)]="name"> |
創建一個雙向綁定，等價於: <my-cmp [title]="name" (title-change)="name=$event"> |
<video **#movieplayer** ...></video><button (click)="movieplayer.play()"> |
建立一個本地變量 movie player 能夠被後續用來操做該 video 元素實例在數據綁定與事件綁定中，注意，該變量的做用域限於當前模板。 |
<p *my-unless="myExpression">...</p> |
這個 * 符號意味着當前的元素會被轉化到一個內置的模板中，譬如: <template [myless]="myExpression"><p>...</p></template> |
| `Card No.: {{cardNumber \ | myCreditCardNumberFormatter}}` |
Employer:{{employer?.companyName}} |
有點相似於可選項(?) 意思是若是 employer 域沒有被定義，便是undefined時, 餘下的部分會直接被忽略 |
| Built-in directives | import {NgIf, ...} from 'angular2/angular2'; |
|---|---|
<section *ng-if="showSection"> |
根據showSection表達式的結果，移除或者從新建立一個DOM樹 |
<li *ng-for="#item of list"> |
遍歷列表，而且爲每一項根據內在建立一個元素 |
<div [ng-switch]="conditionExpression"><template [ng-switch-when]="case1Exp">...</template><template ng-switch-when="case2LiteralString">...</template><template ng-switch-default>...</template></div> |
根據條件選擇展現合適的元素項目 |
<div [ng-class]="{active: isActive, disabled: isDisabled}"> |
將CSS類綁定到關聯的映射的值中。 右邊的表達式應該返回 {class-name: true/false} 這種格式的map |
| Forms | import {FORM_DIRECTIVES} from 'angular2/angular2'; |
|---|---|
<input [(ng-model)]="userName"> |
提供了雙向綁定，解析以及數據驗證 |
| Class decorators | import {Directive, ...} from 'angular2/angular2'; |
|---|---|
@Component({...})class MyComponent() {} |
將某個類聲明爲組件，而且提供合適的元數據聲明 |
@Pipe({...})class MyPipe() {} |
聲明某個類爲管道，而且提供一些關於該管道的元數據 |
@Injectable()class MyService() {} |
聲明某個類的依賴，而且在構造函數中自動注入 |
| Directive configuration | @Directive({ property1: value1, ... }) ) |
|---|---|
selector: '.cool-button:not(a)' |
這是一個特定的CSS選擇器，支持: element, [attribute], .class, 以及 :not()，不支持父子關係的選擇器 |
providers: [MyService, provide(...)] |
一組依賴注入的提供者 |
| Component configuration | @Component extends @Directive, so the @Directiveconfiguration applies to components as well |
|---|---|
viewProviders:[MyService, provide(...)] |
將一系列的依賴注入的對象的做用域合併到該類中 |
template: 'Hello {{name}}'templateUrl: 'my-component.html' |
內置或者外鏈的視圖 |
styles: ['.primary {color: red}']styleUrls: ['my-component.css'] |
一系列內置或者外連的CSS樣式 |
directives:[MyDirective, MyComponent] |
一系列用於本模板中的指令 |
pipes: [MyPipe, OtherPipe] |
一系列用於本模板中的管道 |
| Class field decorators for directives and components | import {Input, ...} from 'angular2/angular2'; |
|---|---|
@Input() myProperty; |
聲明一個輸入屬性，而且綁定到模板，譬如： <my-cmp [my-property]="someExpression"> |
@Output() myEvent = new EventEmitter(); |
聲明一個輸出口屬性，綁定到某個能夠綁定的事件： <my-cmp (my-event)="doSomething()"> |
@HostBinding('[class.valid]') isValid; |
將某個元素屬性綁定到某個指令或者組件的屬性 |
@HostListener('click', ['$event']) onClick(e) {...} |
將某個事件綁定到組件 |
@ContentChild(myPredicate) myChildComponent; |
將第一個能夠查到的組件內容對象綁定到當前屬性 |
@ContentChildren(myPredicate) myChildComponents; |
將組件內容查詢的結果綁定到當前元素 |
@ViewChild(myPredicate) myChildComponent; |
將第一個組件視圖查詢獲得的子組件綁定到當前元素 |
@ViewChildren(myPredicate) myChildComponents; |
將當前根據視圖查詢到的子組件的列表綁定到當前元素 |
| Directive and component change detection and lifecycle hooks | (implemented as class methods) |
|---|---|
constructor(myService: MyService, ...) { ... } |
類的構造器會在其餘的生命週期函數前調用。主要是在該方法中完成依賴注入，注意要避免將複雜的工做放在這裏。 |
onChanges(changeRecord) { ... } |
會在任何輸入屬性的變化前被調用，在內容處理與子視圖處理以前 |
onInit() { ... } |
會在構造函數以後調用，在該方法中完成輸入屬性的處理，以及第一次對onChanges方法的調用 |
doCheck() { ... } |
在任何一個組件或者指令的輸入屬性被檢查前調用，主要用於在進行自定義的檢查前擴展變化的檢查 |
afterContentInit() { ... } |
在onInit方法以後被調用，主要是當組件或者指令的內容被初始化完成後 |
afterContentChecked() { ... } |
在對於組件或者指令的內容檢查以後被調用 |
afterViewInit() { ... } |
在 afterContentInit方法被調用以後調用，僅僅適用於組件 |
afterViewChecked() { ... } |
每次進行組件的視圖檢查以後被調用，僅僅適用於組件 |
onDestroy() { ... } |
僅僅會被調用一次，主要在實例被摧毀前調用 |
| Dependency injection configuration | import {provide} from 'angular2/angular2'; |
|---|---|
provide(MyService, {useClass: MyMockService}) |
provide\ |
provide(MyService, {useFactory: myFactory}) |
provide\ |
provide(MyValue, {useValue: 41}) |
provide\ |
| Routing and navigation | import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, ...} from 'angular2/router'; |
|---|---|
@RouteConfig([ { path: '/:myParam', component: MyComponent, as: 'MyCmp' }, { path: '/staticPath', component: ..., as: ...}, { path: '/*wildCardParam', component: ..., as: ...}])class MyComponent() {} |
設置完整的路由表 |
<router-outlet></router-outlet> |
將這個位置設置做爲激活組件的注入位置 |
<a [router-link]="[ '/MyCmp', {myParam: 'value' } ]"> |
構造一個連接用於跳轉到其餘的視圖，主要依賴於上面路由配置中的路由名稱以及可選參數。添加'/'前綴能夠匹配根路由，添加'./'前綴能夠用於匹配子路由 |
@CanActivate(() => { ... })class MyComponent() {} |
利用組件的修飾器定義了一個方程，路由器會在是否要激活該組件前進行調用。該方程應該返回true或者false或者一個promise結果 |
onActivate(nextInstruction, prevInstruction) { ... } |
在導航到一個組件以後，路由會首先調用組件的onActicate方法 |
canReuse(nextInstruction, prevInstruction) { ... } |
路由會根據組件的canReuse方法來決定是直接重用該組件仍是先銷燬再從新建立一個新的實例 |
onReuse(nextInstruction, prevInstruction) { ... } |
路由會在重用一個組件的實例的時候調用該onReuse方法 |
canDeactivate(nextInstruction, prevInstruction) { ... } |
路由經過調用canDeactivate方法來判斷是否應該在一次導航以後移除該組件，該方法應該返回一個true或者false或者promise對象 |
onDeactivate(nextInstruction, prevInstruction) { ... } |
在路由狀態發生變化而且該組件被銷燬時調用 |