参考上一篇文章的步骤，重新把相关环境准备、目录结构走一遍。
这一次我们要开始创建真正的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)].