[翻译]angularjs 2.0官方新手入门教程(2)

http://alvinwei.blog.163.com/blog/static/21466611020161595925332/

2016-02-05 11:02:10| 分类：

AngularJS2.0 | 标签：前端 angular angularjs2.0 javascript 入门教程

前面的话：继续翻译官方入门教程，这回要做的是一个稍微复杂点的网页，里面算是涉及到了angularjs 2.0很多常用的功能了，而本篇教程是这个网页教程的第一部分。本次要写的代码承接上一篇教程，这里配置npm、包依赖等步骤和之前的代码都不再重复，需要的话可以到第一篇教程（点我）里去看。

先放个gif看一下当所有内容做完后的最终效果：



正文开始

1、首先找到上回做的网页所在的文件夹angular2-quickstart，将这个文件夹重命名为angular2-tour-of-heroes，然后打开命令行到这个目录下，输入npm start，之后不要关掉命令行，浏览器会自动打开你上回做好的页面，留着它别动。

2、打开app.component.ts文件，在AppComponent这个类里面添加两个变量，如下所示：

export class AppComponent {
public title = 'Tour of Heroes';
public hero = 'Windstorm';
}

3、修改@Component里的template，以便我们刚才添加的变量显示在这个h1标签里，如下所示：

template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>'

做完以后，稍等一会儿，你应该会发现第一步里打开的网页已经自动刷新为更新以后的内容。这里解释一下，这块用到的是data binding，你在class里定义好的变量，通过{{变量名}}的方式传到了template里，并显示到了网页上。

4、接下来要做一些更有趣的事情，现在的hero只是个名字，我们可以给他添加更多的属性。还是在app.component.ts文件里，将以下代码添加到文件的最上面

interface Hero {
id: number;
name: string;
}

也许有人会有疑问为什么定义这个Hero要用interface而不是class，这里我就直接放出官方原文的解释了，懒得翻。（逃

Interface or Class?

Why a

Hero

interface and not a

Hero

class?
We want a strongly typed

Hero

. We get strong typing with either option. Our choice depends on how we intend to use the

Hero

.

If we need a

Hero

that goes beyond simple properties, a

Hero

with
logic and behavior, we must define a class. If we only need type checking, the interface is sufficient and lighter weight.

Lighter weight? Transpiling a class to JavaScript produces code. Transpiling an interface produces — nothing. If the class does nothing (and there is nothing for a

Hero

class
to do right now), we prefer an interface.

大概理解一下意思就是，如果我们不仅需要定义一个hero的属性还需要定义他的行为和逻辑，那么我们需要写个class，但现在只需要做变量类型检查，所以interface就足够了。

5、现在我们有了这个hero的接口，就可以重新修改一下之前的hero变量了，把他从一个单纯的字符串改为如下所示：

public hero: Hero = {
id: 1,
name: 'Windstorm'
};

因为我们修改了hero这个变量，那么template里的{{hero}}也需要修改了。因为过去他就是一个字符串，现在这个hero包含了两个属性，按着过去的写法哪个都显示不出来，所以要改成下面这个样子：

template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'

see？很简单吧。等待一会儿，浏览器会自动刷新到修改以后的样子。

6、接下来，我们继续修改template以增加更多的html内容，比如把hero的id也显示出来，修改如下：

template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label>{{hero.name}}</div>'

这时候我们应该会想到，这么写下去，这个template岂不是越来越长？难道不能正常的换行缩进吗？想到这里你也许已经试过直接把这些html代码换行，但是发现这样不行。当然，这个事情是有解决办法的，只需要做一点点修改就行，那就是将template包在外面的(')即英文单引号换成(`)Tab键上面的点，然后你就可以按着正常编辑html网页的方式进行换行缩进了，效果如下：

template:`
<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div><label>name: </label>{{hero.name}}</div>
`

7、接下来我们不仅仅是要让hero的name和id显示出来了，我们还想对它进行修改，那么我们就需要在网页上显示一个输入框，这样我们输入什么，hero的name就改成什么，那么我们可以试试将template改成这样：

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>标签里的hero.name并没有跟着发生变化。原因在于我们现在的数据绑定是one-way（单向）的，也就是说，我们只是让hero.name的值传到了<input>标签的value里，而没能让输入框把值传给hero.name，所以我们需要一个two-way（双向）的绑定。那么这里我们就需要一个叫ngModel的东西来实现这个目的，让我们把<input>标签里的内容修改如下：

<input [(ngModel)]="hero.name" placeholder="name">

这里解释一下，其实这个[]中括号和()小括号的分别代表了两种方向的data binding，()小括号代表view target to data source，即将input里的值传出去，[]中括号代表data source to view target，即将class
AppComponent中的hero.name传进来。这里[()]写一起的效果就是，输入框中输入的文字赋给了class AppComponent中hero对象的name属性，而这个hero对象的name属性被修改以后又传进来修改了页面上所有的hero.name。

改完以后等页面自动刷新，我们就可以发现我们在输入框里输入什么内容<h2>标签都会跟着变化了。

接下来的内容下篇再继续……