參考上一篇文章的步驟，重新把相關環境准備、目錄結構走一遍。
這一次我們要開始創建真正的Angularjs項目了。
顯示我們的英雄
我們要在應用中顯示英雄數據
我們來為 AppComponent 添加兩個屬性： title 屬性表示應用的名字，而 hero 屬性表示一個名叫“ Windstorm ”的英雄。
export class AppComponent { title = 'Tour of Heroes'; hero = 'Windstorm'; }
現在，我們為這些新屬性建立數據綁定，以更新 @Component 裝飾器中指定的模板
template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>'
Hero 對象
此時此刻，我們的英雄還只有一個名字。顯然，它 / 她應該有更多屬性。 讓我們把 hero 從一個字符串字面量換成一個類。
創建一個 Hero 類，它具有 id 和 name 屬性。 現在，把下列代碼放在 app.component.ts 的頂部，僅次於 import 語句。
在app.component.ts中添加代碼以創建Hero類。
export class Hero { id: number; name: string; }
現在，有了一個 Hero 類，我們就要把組件 hero 屬性的類型換成 Hero 了。 然后以 1 為 id 、以“ Windstorm ”為名字，初始化它。
在AppComponent類中添加：
hero: Hero = { id: 1, name: 'Windstorm' };
我們把 hero 從一個字符串換成了對象，所以也得更新模板中的綁定表達式，來引用 hero 的 name 屬性。
template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'
添加更多的 HTML
能顯示名字雖然不錯，但我們還想看到這位英雄的所有屬性。 我們將添加一個 <div> 來顯示英雄的 id 屬性，用另一個 <div> 來顯示英雄的 name 屬性。
template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label>{{hero.name}}</div>'
多行模板字符串
我們可以通過字符串加法來制作更可讀的模板，但這樣仍然太難看了——難於閱讀，容易拼錯。 這樣不行！我們要借助 ES2015 和 TypeScript 提供的模板字符串來保持清爽。
把模板的雙引號改成反引號，並且讓 <h1> ， <h2> 和 <div> 標簽各占一行。
template:` <h1>{{title}}</h1> <h2>{{hero.name}} details!</h2> <div><label>id: </label>{{hero.id}}</div> <div><label>name: </label>{{hero.name}}</div> `
編輯我們的英雄
我們想在一個文本框中編輯英雄的名字。
把英雄的名字從單純的 <label> 重構成 <label> 和 <input> 元素的組合，就像下面這樣：
template:` <h1>{{title}}</h1> <h2>{{hero.name}} details!</h2> <div><label>id: </label>{{hero.id}}</div> <div> <label>name: </label> <input value="{{hero.name}}" placeholder="name"> </div> `
在瀏覽器中，我們看到英雄的名字顯示成一個 <input> 文本框。但看起來還是有點不太對勁。 當修改名字時，我們的改動並沒有反映到 <h2> 中。使用單向數據綁定，我們沒法實現所期望的這種行為。
雙向綁定
我們的期望是：在 <input> 中顯示英雄的名字，修改它，並且在所有綁定到英雄名字的地方看到這些修改。 簡而言之，我們需要雙向數據綁定。
在我們讓 表單輸入 支持雙向數據綁定之前，我們得先導入 FormsModule 模塊。 只要把它添加到 NgModule 裝飾器的 imports 數組中就可以了，該數組是應用中用到的外部模塊列表。 這樣我們就引入了表單包，其中包含了 ngModel 。
我們的模塊app.module.ts就成了
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
FormsModule
],
declarations: [
AppComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
接下來更新模板，加入用於雙向綁定的內置指令 ngModel 。
把 <input> 替換為下列 HTML
<input [(ngModel)]="hero.name" placeholder="name">
瀏覽器刷新。又見到我們的英雄了。我們可以編輯英雄的名字，也能看到這個改動立刻體現在 <h2> 中。
好了，在終端中輸入 npm start盡情瀏覽吧。
回顧一下我們剛才的操作；
我們從創建對象開始，再到在模板中顯示對象的屬性。以及雙休綁定，關鍵字（ngModel），注意要寫完整[(ngModel)].