前言
上一节我们已经把环境给搭建起来了，现在我们通过一个快速案例把angular 2.0 初步了解一下，后续我们会深入每一个细节，这个案例主要是一个【英雄（Hero）】列表的展示，创建，编辑。这个案例我打算分五个章节来做,第一个章节我们可以学习到angular2.0一下内容：
- 单项数据绑定
- 双向数据绑定
组织代码
1.在app.component.ts 文件添加 如下内容
在 AppComponent 下添加两个属性
export class AppComponent{
public title: string = '英雄展示';
public hero: string = '英雄';
}
在@component 下 template 属性下更改我们的模板,我们用了typescript 的多行字符串
template: `<h1>{{title}}</h1><h2>{{hero}} 详情</h2>` //用了typescrip 多行字符串 ，要注意
这时候我们浏览会看到已经绑定上我们的数据。
2.创建单独的类实现绑定（单项数据绑定）
目前我们的 英雄 只有一个属性，我们直接在 类 AppComponent 无妨，但当我们属性慢慢增多的时候，我们可以从一个字面字符串转换成一个类。
在app.component.ts 文件添加如下内容
export class Hero{
id:number;
name:string;
}
这时候我们的hero 属性就可以修改成
hero:Hero = {
id:1,
name:'成龙'
}
模板文件修改成
template: `<h1>{{title}}</h1><h2>{{hero.name}} 详情</h2>`
为了显是更多的属性，我们来修改下模板，添加几个标签
<h2>{{hero.name}}详情!</h2>
<div><label>id:</label>{{hero.id}}</div>
<div>
<label>name:</label>
<input type="text" value="{{hero.name}}" placeholder="name" />
</div>
hero 的名字我们用了一个文本框，但是我们修改文本的时候没有看到 h2 标签的修改，难道我们写错了，不是，原来跟angular1.0 不一样，这不是双向数据绑定，而是单项数据绑定
3. 双向数据绑定
angular 的双向数据绑定是什么样子的呢，接下来我们会用到 angular 的内置指令 ngModel
我们只需修改我们的模板文件
<input type="text" [(ngModel)]="hero.name" placeholder="name" />
用上angular的内置指令，就实现了我们双向数据绑定。
结束语
到这里我们已经实现了简单的数据绑定，下一章节我么会做列表，先上一张效果图。
源码最后我会上传github，如有需要请私聊我。