[翻译]angularjs 2.0官方新手入门教程(2)
来源:互联网 发布:新浪财经数据库 编辑:程序博客网 时间:2024/06/06 02:28
http://alvinwei.blog.163.com/blog/static/21466611020161595925332/
2016-02-05 11:02:10| 分类:AngularJS2.0 | 标签:前端 angular angularjs2.0 javascript 入门教程
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.
因为我们修改了hero这个变量,那么template里的{{hero}}也需要修改了。因为过去他就是一个字符串,现在这个hero包含了两个属性,按着过去的写法哪个都显示不出来,所以要改成下面这个样子:public hero: Hero = { id: 1, name: 'Windstorm'};
see?很简单吧。等待一会儿,浏览器会自动刷新到修改以后的样子。template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'
这时候我们应该会想到,这么写下去,这个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>{{hero.name}}</div> `
改完以后,我们发现<h2>标签里的hero.name并没有跟着发生变化。原因在于我们现在的数据绑定是one-way(单向)的,也就是说,我们只是让hero.name的值传到了<input>标签的value里,而没能让输入框把值传给hero.name,所以我们需要一个two-way(双向)的绑定。那么这里我们就需要一个叫ngModel的东西来实现这个目的,让我们把<input>标签里的内容修改如下: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> `
<input [(ngModel)]="hero.name" placeholder="name">
- [翻译]angularjs 2.0官方新手入门教程(2)
- [翻译]angularjs 2.0官方新手入门教程(1)
- [翻译]angularjs 2.0官方新手入门教程(3)
- [翻译]angularjs 2.0官方新手入门教程(4)
- AngularJS Eclipse——新手入门【翻译+整理】
- AngularJS Eclipse——新手入门【翻译+整理】
- 【Git官方文档翻译】1. 新手入门
- jdbc基础2--翻译sun官方教程
- 2D Toolkit官方教程翻译
- 2D Toolkit官方教程翻译
- angularjs官方教程 -- 环境部署
- Openbravo官方教程: 翻译Openbravo
- solr官方指南翻译 教程
- caffe2官方教程翻译整理
- matplotlib.pyplot官方翻译教程
- matterport Mask_RCNN官方教程翻译
- 【opencv 官方教程】翻译2 核心功能 上
- angularjs官方教程中的两处错误
- angularjs 20160421
- 1013-A strange lift
- 怎样设置log4j日志保存路径为相对路径
- java中volatile关键字的含义
- SpringMVC学习总结(2)——SpringMVC返回json配置
- [翻译]angularjs 2.0官方新手入门教程(2)
- solr-in-action-ch1-Introduction to solr
- hdu 1176 免费馅饼
- HashMap嵌套HashMap嵌套HashMap(三层嵌套)
- js动态添加datagrid表头&批量保存实战研究
- [leetcode 77] Combinations
- Java 重写与重载区别 Java父类的Object方法 要重写tostring原因,多个catch处理逻辑
- UE4:编辑器中显示物体包围框
- [翻译]angularjs 2.0官方新手入门教程(3)