從Angular1.x升級到Angular2入門之數據綁定

原則：

• 多人協做，逐步升級，採用ngUpgrade, 兼容Angularjs和Angular
• 一個文件，一個組件，控制器、service、template劃分清晰
• 引入ts進行類型校驗
• 邏輯功能劃分清晰
• 使用webpack等構件工具，進行依賴管理

思路：

• 使用 ngUpgrade 時，你實際上在同時運行 AngularJS 和 Angular。
• 全部 Angular 的代碼運行在 Angular 框架中，而 AngularJS 的代碼運行在 AngularJS 框架中。
• 全部這些都是真實的、全功能的框架版本。 沒有進行任何仿真

案例：

• NgModule，能夠嵌套，可是隻有一個Root NgModule。
  • 採用註解@NgModule

• NgModule，能夠理解爲功能模塊

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppComponent } from './app.component';
  
  // @NgModule decorator with its metadata
  @NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
  })
  export class AppModule {}
  複製代碼

• Component,能夠理解爲一個視圖、相關業務邏輯的封裝,採用@Component添加元數據。

@Component({
   	selector:    'app-hero-list',
   	templateUrl: './hero-list.component.html',
   	providers:  [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}
複製代碼

• 組件可複用，可是不拘泥於同一個NgModule。不一樣的NgModule之間，也能夠複用Component組件。
• 一個Component，對應一個HTML頁面。html頁面，中能夠清晰的觀察到組件之間的視圖層次結構關係。
• 組件視圖修改，除了經常使用的指令、事件觸發修改外，還能夠經過管道提早修改。

• 組件，HTML模板中，不可放入script。由於會被自動轉義。

• HTML attribute vs. DOM property

  • attribute 做用於html 初始化
  • property 做用於數據修改，初始化的attribute不會修改，也就是使用這種語法 [src] = 'src '

• 父子組件通訊 - 傳遞數據給子組件@Input

import { Component, Input } from '@angular/core'; // First, import Input
export class ItemDetailComponent {
 @Input() item: string; // decorate the property with @Input()
}
<p>
 Today's item: {{item}} </p> 複製代碼

<app-item-detail [item]="currentItem"></app-item-detail>  
複製代碼

export class AppComponent {
 currentItem = 'Television';
}
複製代碼

• 父子組件通訊 - 傳遞數據給父組件@Output, 與vue 相似,子組件發射事件，父組件監聽事件

import { Output, EventEmitter } from '@angular/core';

export class ItemOutputComponent {

   	@Output() newItemEvent = new EventEmitter<string>();

   	addNewItem(value: string) {
   		this.newItemEvent.emit(value);
   	}
}
<label>Add an item: <input #newItem></label>
<button (click)="addNewItem(newItem.value)">Add to parent's list</button> 複製代碼

export class AppComponent {
   	items = ['item1', 'item2', 'item3', 'item4'];

   	addItem(newItem: string) {
   		this.items.push(newItem);
   	}
}
<app-item-output (newItemEvent)="addItem($event)"></app-item-output>
<ul>
 <li *ngFor="let item of items">{{item}}</li>
</ul>
複製代碼

• 循環

<app-item-detail *ngFor="let item of items" [item]="item"></app-item-detail>
<div *ngFor="let item of items; let i=index">{{i + 1}} - {{item.name}}</div>
複製代碼

<div *ngFor="let item of items; trackBy: trackByItems">
  ({{item.id}}) {{item.name}}
</div>
trackByItems(index: number, item: Item): number { return item.id; }
複製代碼

• switch

<div [ngSwitch]="currentItem.feature">
 <app-stout-item    *ngSwitchCase="'stout'"    [item]="currentItem"></app-stout-item>
 <app-device-item   *ngSwitchCase="'slim'"     [item]="currentItem"></app-device-item>
 <app-lost-item     *ngSwitchCase="'vintage'"  [item]="currentItem"></app-lost-item>
 <app-best-item     *ngSwitchCase="'bright'"   [item]="currentItem"></app-best-item>
 <app-unknown-item  *ngSwitchDefault           [item]="currentItem"></app-unknown-item>
</div>
複製代碼

• 取值

<p>The item name is: {{item?.name}}</p>
<p *ngIf="item">The item's color is: {{item!.color}}</p> --! 來告訴類型檢查器不要拋出錯誤 複製代碼

• [] 、() 使用場景：
  • []

    <img [src]="heroImageUrl"> 
    <app-hero-detail [hero]="currentHero"></app-hero-detail>  // 組件屬性
    <div [ngClass]="{'special': isSpecial}"></div>
    <button [attr.aria-label]="help">help</button>
    <div [class.special]="isSpecial">Special</div>
    <button [style.color]="isSpecial ? 'red' : 'green'">
    複製代碼

• ()

<button (click)="onSave()">Save</button>
<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>   // 組件事件 
<div (myClick)="clicked=$event" clickable>click me</div>
複製代碼

• 操做dom

<input #phone placeholder="phone number" />
<!-- lots of other elements -->
<!-- phone refers to the input element; pass its `value` to an event handler -->
<button (click)="callPhone(phone.value)">Call</button>
複製代碼

<input ref-fax placeholder="fax number" />
<button (click)="callFax(fax.value)">Fax</button>
複製代碼

• 模板語句 ()=statement

<button (click)="onSave($event)">Save</button>
<button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button>
<form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>
複製代碼

• 模板$event對象，模板輸入變量（let hero）和模板引用變量（#heroForm）
• 模板語句不能引用全局名稱空間中的任何內容。他們沒法引用window或document、console.log或Math.max

• 數據綁定

類型	語法	類別
插值	{{}}	單向
class、style	[target]="expression" or bind-target="expression"	單向
事件	(click)="expression" or on-click = "expression"	單向
雙向	[(target)] = "expression" or bindon-target = "expression"	雙向

• 模板語法、指令中的不一樣

Desc	AngularJS	Angular
1. module	angular.module	NgModule，其中配置bootstrap標記爲root Module
2.bootstrap	angular.bootstrap	NgModule中屬性bootstrap
3.scope	ng-app	app.module.ts中AppModule默認爲根視圖
4.controller	ngng-controller	@Component等 metadata方式綁定組件、業務邏輯、視圖
5.數據綁定	{{user.name}}	{{user.name}} ，支持模板表達式，先計算，在轉爲字符串展現
6.input value	ng-value	[value]=
7.雙向數據綁定	ng-model	([ngModel]) =
8.其他屬性綁定	ng-attr-title="title"	[attr.title]="actionName" or [title] = '' ,動態修改屬性
9.if	ng-if	*ngIf
10.for	ng-repeat	*ngFor
11	ng-bind	[hero]
12	ng-bind-html	[innerHTML]=
13	ng-blur
14	ng-change
15	ng-class	[ngClass]
16	ng-class-even
17	ng-class-odd
18	ng-click	(click) or on-click
19	ng-cloak
20	ng-copy
21	ng-focus
22	ng-keydown
23	ng-keyup
24	ng-mouseenter
25	ng-mouseleave
26	ng-mouseover
27	ng-mousemove
28	ng-required
29	ng-selected
30	ng-show	[class.hidden] or [hidden]
31	ng-src	[src] or bind-src , [src]="itemImageUrl"> 與 src="{{itemImageUrl}}" 等效
32	ng-style	*ngStyle 、[style.display]
33	ng-disabled	[disabled]

參考文獻

• Angular
• AngularJS
• Angular Template Syntax