[]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官方新手入门教程(2) - 线数老师 - 线数老师](http://img1.ph.126.net/jjLqNmEa3tZMOjj-XKPNGA==/6631397619192165136.gif)
export class AppComponent { public title = 'Tour of Heroes'; public hero = 'Windstorm'; }
template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>'
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 Hero
class
to do right now), we prefer an interface.
public hero: Hero = { id: 1, name: 'Windstorm' };
因为我们修改了hero这个变量,那么template里的{{hero}}也需要修改了。因为过去他就是一个字符串,现在这个hero包含了两个属性,按着过去的写法哪个都显示不出来,所以要改成下面这个样子:template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'
see?很简单吧。等待一会儿,浏览器会自动刷新到修改以后的样子。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">