注入 - Injector在前一节的示例代码中,组件EzAlgo直接在构造函数中实例化了一个EzAlog对象,这造成了EzApp和EzAlgo的强耦合,我们可以使用Angular2的注入器/Injector进行解耦:注入器就像婚姻介绍所,男方在婚介所登记心仪的女性特点,约好见面地点,然后, 坐等发货...
分类:
其他好文 时间:
2015-12-16 21:02:40
阅读次数:
240
服务 - 封装可复用代码在Angular2中,服务用来封装可复用的功能性代码。比如Http服务,封装了ajax请求的细节,在不同的组件中,我们只需要调用Http服务的API接口就可以给组件增加ajax请求的功能了:Angular2中实现一个服务非常简单直接 : 定义一个类,然后,它就是服务了:1 c...
分类:
其他好文 时间:
2015-12-16 19:29:34
阅读次数:
250
NgFormModel - 绑定已有控件组NgFormModel指令类似于NgControlGroup指令,都是为控件提供容器。但区别在于,NgFormModel指令将已有的控件组绑定到DOM对象上: 1 @View({ 2 template : ` 3 4 ...
分类:
其他好文 时间:
2015-12-16 19:18:04
阅读次数:
239
NgFormControl - 绑定已有控件对象与NgControlName指令不同,NgFormControl将已有的控件/Control对象绑定到DOM元素 上。当需要对输入的值进行初始化时,可以使用NgFormControl指令。下面的代码中,使用NgFormControl指令将DOM元素绑定...
分类:
其他好文 时间:
2015-12-16 17:06:06
阅读次数:
121
NgControlGroup - 命名控件组NgControlGroup指令的选择符是[ng-control-group],如果模板中的某个元素具有这个属性, Angular2框架将自动创建一个控件组对象,并将这个对象以指定的名称与DOM对象绑定。控件组可以嵌套,方便我们在语义上区分不同性质的输入:...
分类:
其他好文 时间:
2015-12-16 16:57:33
阅读次数:
150
属性声明 - 暴露成员变量属性是组件暴露给外部世界的调用接口,调用者通过设置不同的属性值来定制组件的行为与外观:在Angular2中为组件增加属性接口非常简单,只需要在Component注解的properties属性中声明组件的成员变量就可以了:1 //EzCard 2 @Component({3 ...
分类:
其他好文 时间:
2015-12-16 12:08:00
阅读次数:
171
ShadowDom - 封装私有样式Angular2采用ShadowDom作为组件的渲染基础,这意味着组件被渲染到独立的Shadow Tree上,这很好,可以实现DOM对象和样式的良好封装:但问题是,除了Chrome之外的大多数的浏览器目前还不支持ShadowDom,因此,Angular2 提供了三...
分类:
其他好文 时间:
2015-12-15 14:22:57
阅读次数:
228
styles - 设置模板样式组件既然处于UI层,就应当好看些,好看是构造良好用户体验的一部分。Angular2的 组件模板基于HTML,那么显然,我们需要通过样式表/CSS来调整组件的外观。和模板类似,我们有两种方法为组件设置CSS样式:1. 内联样式可以使用组件View注解的styles属性来设...
分类:
其他好文 时间:
2015-12-15 12:16:22
阅读次数:
124
NgFor- 循环逻辑如果希望利用一组可遍历的数据动态构造模板,那么应当使用NgFor指令。 例如示例中的EzStar组件,用来展示演员的作品列表:迭代NgFor指令应用在template元素上,对ngForOf属性指定的数据集中的每一项 实例化一个template的内容:1 2 -----...
分类:
其他好文 时间:
2015-12-15 10:19:48
阅读次数:
142
使用分支逻辑如果组件的模板需要根据某个表达式的不同取值展示不同的片段,可以使用NgSwitch系列指令来动态切分模板。比如右边示例中的广告组件EzPromotion,需要根据来访者性别的不同推送不同的广告:NgSwitch包含一组指令,用来构造包含多分支的模板:NgSwitchNgSwitch指令可...
分类:
其他好文 时间:
2015-12-14 21:26:19
阅读次数:
236