一步一步學習Angular2(02.示例 Hero Editor)

今天學習跟隨官網學習我的下一個Angular2示例.
工程的目錄結構與快速入門中的示例完全相同,所以我們複製上一個示例並改名爲 angular2-tour-of-heroes, 讓我們先把這個應用跑起來.

npm start

啓動應用並監視應用的所有改變.

展示Hero

首先我們看一下這個例子的最終效果.

從上到下分別是我們的應用名字,一個顯示英雄名字的標題, 下面是這個英雄的詳細信息.

第一步我們只顯示應用的名字,和一個標題.爲此我們需要在AppComponent增加兩個屬性title,hero

export class AppComponent { 
    public title:string = 'Tour of Heroes.';
    public hero:string = 'weiq';
}

並且修改我們註解中的模板屬性把它展示到瀏覽器中

template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>'

保存後,過一會兒瀏覽器自已會刷新頁面,並看到我們修改後的效果.

看模板中的html元素,我們會發現兩個大括號括起來的屬性,這個屬性就是我們在AppComponent中新增的兩個屬性.

Angular就是使用{{ }}來映射我們組件的屬性到視圖的.這樣就實現了單向的一個數據綁定.

Hero對象

現在我們的英雄只有一個名字,隨着英雄屬性的增多,我們需要單爲Hero定義一個接口,用來描述Hero對象.
這節我們暫時爲Hero增加兩個屬性id和name,
在app.component.ts中定義一個接口.

interface Hero{
    id: number;
    name: string;
}

爲什麼不把Hero定義爲一個 Class?
1. 因爲我們只是需要對Hero進行類型檢查,而不需要增加額外的業務邏輯及行爲.
2. 因爲接口比類更輕量,它在最終生成的JavaScript腳本中是不存在的,可以避免過多的無用代碼.

讓我們用這個接口類型

public hero:Hero = {
   id: 1,
   name: 'Wiqi'
};

同樣的模板也需要修改一下

template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'

格式化的模板HTML

隨着模板內容越來越多,它看起來可能會是這樣的

template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label>{{hero.name}}</div>'

這樣一長串的HTML是難以理解的.所以我們可以寫一個格式化的模板, 同時增加一個可以輸入的文本框

template: `
  <h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div>
    <label>name: </label>
    <div><input value="{{hero.name}}" placeholder="name"></div>
  </div>
    `

這時在瀏覽器中查看效果,試着改變文本框中的名字,發現標題中<h2></h2>的內容不會改變, 正如上面所說現在還只是單向數據綁定, 下面我們看一下如何爲其增加一個聯動效果.

雙向數據綁定

雙向綁定需要使用ngModel指令, 現在讓我們在改造一下我們的input標籤.

<input [(ngModel)]='hero.name'>

好了.在瀏覽器中可以實驗一下雙向綁定的效果了.

回顧一下我們學到了什麼
1. 使用雙大括號實現數據的單向綁定.
2. 格式化我們的模板,讓它更容易閱讀.
3. 使用指令ngModel實現數據的雙向綁定.會同步所綁定的hero.name.

現在app.component.ts看起來是這樣的

import {Component} from 'angular2/core';

interface Hero{
    id:number;
    name:string;
}

@Component({
    selector: 'my-app',
    template: `
        <h1>{{title}}</h1>
        <h2>{{hero.name}} details!</h2>
        <div>
            <label>id:</label> {{hero.id}}
        </div>
        <div>
            <label>name:</label> 
            <input [(ngModel)]='hero.name'>
        </div>
    `
})
export class AppComponent { 
    public title:string = 'Tour of Heroes.';
    public hero:Hero = {
        id:1,
        name: 'Wiqi'
    };
}

End. 更多內容請查看官方示例->.<-