[翻译]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看一下当所有内容做完后的最终效果:

[翻译]angularjs 2.0官方新手入门教程(2)_第1张图片

正文开始

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 theHero.

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 Heroclass 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>标签都会跟着变化了。

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


你可能感兴趣的:([翻译]angularjs 2.0官方新手入门教程(2))