angularjs 2.0 快速案例(1)

前言

上一节我们已经把环境给搭建起来了，现在我们通过一个快速案例把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，如有需要请私聊我。