从Angular1.x升级到Angular2入门之数据绑定

原则：

• 多人协做，逐步升级，采用ngUpgrade, 兼容Angularjs和Angular
• 一个文件，一个组件，控制器、service、template划分清晰
• 引入ts进行类型校验
• 逻辑功能划分清晰
• 使用webpack等构件工具，进行依赖管理

思路：

• 使用 ngUpgrade 时，你实际上在同时运行 AngularJS 和 Angular。
• 全部 Angular 的代码运行在 Angular 框架中，而 AngularJS 的代码运行在 AngularJS 框架中。
• 全部这些都是真实的、全功能的框架版本。 没有进行任何仿真

案例：

• NgModule，能够嵌套，可是只有一个Root NgModule。
  • 采用注解@NgModule

• NgModule，能够理解为功能模块html

  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。由于会被自动转义。vue

• HTML attribute vs. DOM propertywebpack

  • attribute 做用于html 初始化
  • property 做用于数据修改，初始化的attribute不会修改，也就是使用这种语法 [src] = 'src '

• 父子组件通讯 - 传递数据给子组件@Inputangularjs

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

• 数据绑定

• 模板语法、指令中的不一样

参考文献

• Angular
• AngularJS
• Angular Template Syntax