一步一步学习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. 更多内容请查看官方示例->.<-