Angular2 - 随笔分类 - X-USER

Angular2版本更新

摘要：2.0.0-beta.0 somnambulant-inauguration (2015-12-15)Enjoy!2.0.0-alpha.55 (2015-12-15)Bug Fixesrouter:export ROUTER_LINK_DSL_PROVIDER and hide MockPopSt... 阅读全文

posted @ 2015-12-21 17:46 X-USER 阅读(2433) 评论(2) 推荐(1)

Angular2组件开发—调用服务（三）

摘要：注入一个复杂的服务EzAlgo相当简单，使用new或者使用Injector来获得一个实例看起来差别不大。那如果我们的EzApp组件要使用Http服务呢？第一眼看上去，Http服务显然是一个真正有用的服务 - 因为看起来相当的复杂 -Http依赖于XHRBackend和BaseRequestOptio... 阅读全文

posted @ 2015-12-17 19:12 X-USER 阅读(2522) 评论(2) 推荐(2)

Angular2组件开发—调用服务（二）

摘要：注入 - Injector在前一节的示例代码中，组件EzAlgo直接在构造函数中实例化了一个EzAlog对象，这造成了EzApp和EzAlgo的强耦合，我们可以使用Angular2的注入器/Injector进行解耦：注入器就像婚姻介绍所，男方在婚介所登记心仪的女性特点，约好见面地点，然后，坐等发货... 阅读全文

posted @ 2015-12-16 19:47 X-USER 阅读(1116) 评论(0) 推荐(1)

Angular2组件开发—调用服务（一）

摘要：服务 - 封装可复用代码在Angular2中，服务用来封装可复用的功能性代码。比如Http服务，封装了ajax请求的细节，在不同的组件中，我们只需要调用Http服务的API接口就可以给组件增加ajax请求的功能了：Angular2中实现一个服务非常简单直接：定义一个类，然后，它就是服务了：1 c... 阅读全文

posted @ 2015-12-16 17:51 X-USER 阅读(1700) 评论(2) 推荐(1)

Angular2组件开发—表单输入（五）

摘要：NgFormModel - 绑定已有控件组NgFormModel指令类似于NgControlGroup指令，都是为控件提供容器。但区别在于，NgFormModel指令将已有的控件组绑定到DOM对象上： 1 @View({ 2 template : ` 3 4 ... 阅读全文

posted @ 2015-12-16 17:40 X-USER 阅读(533) 评论(0) 推荐(0)

Angular2组件开发—表单输入（四）

摘要：NgFormControl - 绑定已有控件对象与NgControlName指令不同，NgFormControl将已有的控件/Control对象绑定到DOM元素上。当需要对输入的值进行初始化时，可以使用NgFormControl指令。下面的代码中，使用NgFormControl指令将DOM元素绑定... 阅读全文

posted @ 2015-12-16 16:32 X-USER 阅读(369) 评论(0) 推荐(0)

Angular2组件开发—表单输入（三）

摘要：NgControlGroup - 命名控件组NgControlGroup指令的选择符是[ng-control-group]，如果模板中的某个元素具有这个属性， Angular2框架将自动创建一个控件组对象，并将这个对象以指定的名称与DOM对象绑定。控件组可以嵌套，方便我们在语义上区分不同性质的输入：... 阅读全文

posted @ 2015-12-16 16:22 X-USER 阅读(463) 评论(0) 推荐(0)

Angular2组件开发—表单输入（二）

摘要：NgControlName - 命名控件指令如前所述，NgControlName指令必须作为NgForm或NgFormModel的后代使用，因为这个指令需要将创建的控件对象添加到祖先（NgForm或NgFormModel）所创建的控件组中。NgControlName指令的选择符是[ng-contr... 阅读全文

posted @ 2015-12-16 15:46 X-USER 阅读(405) 评论(0) 推荐(0)

Angular2组件开发—表单输入（一）

摘要：NgForm - 表单指令NgForm指令为表单元素/form建立一个控件组对象，作为控件的容器；而NgControlName指令为则为宿主input元素建立一个控件对象，并将该控件加入到NgForm指令建立的控件组中：局部变量通过使用#符号，我们创建了一个引用控件组对象（注意，不是form元素！... 阅读全文

posted @ 2015-12-16 14:43 X-USER 阅读(2697) 评论(0) 推荐(0)

Angular2组件开发—属性与事件（二）

摘要：事件声明 - 暴露事件源与属性相反，事件从组件的内部流出，用来通知外部世界发生了一些事情：在Angular2中为组件增加事件接口也非常简单：定义一个事件源/EventEmitter，然后通过Component注解的events接口包括出来：1 //EzCard2 @Component({3 ... 阅读全文

posted @ 2015-12-16 13:10 X-USER 阅读(4240) 评论(0) 推荐(0)

Angular2组件开发—属性与事件（一）

摘要：属性声明 - 暴露成员变量属性是组件暴露给外部世界的调用接口，调用者通过设置不同的属性值来定制组件的行为与外观：在Angular2中为组件增加属性接口非常简单，只需要在Component注解的properties属性中声明组件的成员变量就可以了：1 //EzCard 2 @Component({3 ... 阅读全文

posted @ 2015-12-16 11:28 X-USER 阅读(2448) 评论(0) 推荐(0)

Angular2组件开发—为模板应用样式（三）

摘要：设置ShadowDom策略在Angular2中，ShadowDom的三种策略对应于三个类，这三个类继承自ShadowDomStrategy：Angular2的内核引用的是父类ShadowDomStrategy，我们只需要从三个继承类中选择一个与之绑定就可以实现不同策略的选择。下面的示例意味着选择N... 阅读全文

posted @ 2015-12-15 13:56 X-USER 阅读(947) 评论(0) 推荐(0)

Angular2组件开发—模板的逻辑控制（三）

摘要：NgFor- 循环逻辑如果希望利用一组可遍历的数据动态构造模板，那么应当使用NgFor指令。例如示例中的EzStar组件，用来展示演员的作品列表：迭代NgFor指令应用在template元素上，对ngForOf属性指定的数据集中的每一项实例化一个template的内容：1 2 -----... 阅读全文

posted @ 2015-12-15 09:56 X-USER 阅读(708) 评论(0) 推荐(0)

Angular2组件开发—模板的逻辑控制（二）

摘要：使用分支逻辑如果组件的模板需要根据某个表达式的不同取值展示不同的片段，可以使用NgSwitch系列指令来动态切分模板。比如右边示例中的广告组件EzPromotion，需要根据来访者性别的不同推送不同的广告：NgSwitch包含一组指令，用来构造包含多分支的模板：NgSwitchNgSwitch指令可... 阅读全文

posted @ 2015-12-14 20:36 X-USER 阅读(1945) 评论(0) 推荐(0)

Angular2组件开发—模板的逻辑控制（一）

摘要：使用条件逻辑有时我们需要模板的一部分内容在满足一定条件时才显示，比如右边示例中的EzReader组件，对于试用用户，它将在正文之上额外显示一个广告：这是指令NgIf发挥作用的场景，它评估属性ngIf的值是否为真，来决定是否渲染template元素的内容：1 @View({2 templat... 阅读全文

posted @ 2015-12-14 19:56 X-USER 阅读(863) 评论(0) 推荐(0)

Angular2组件开发—模板语法（六）

摘要：#var - 局部变量有时模板中的不同元素间可能需要互相调用，Angular2提供一种简单的语法将元素映射为局部变量：添加一个以#或var-开始的属性，后续的部分表示变量名，这个变量对应元素的实例。在下面的代码示例中，我们为元素h1定义了一个局部变量v_h1，这个变量指向该元素对应的DOM对象... 阅读全文

posted @ 2015-12-11 17:43 X-USER 阅读(857) 评论(0) 推荐(0)

Angular2组件开发—模板语法（五）

摘要：(event) - 监听事件在模板中为元素添加事件监听很简单，使用一对小括号包裹事件名称，并绑定到表达式即可：上面的代码实例为DOM对象h1的click事件添加监听函数onClick()。另一种等效的书写方法是在事件名称前加on-前缀：1 @View({template : `HELLO`})例如... 阅读全文

posted @ 2015-12-11 13:39 X-USER 阅读(390) 评论(0) 推荐(0)

Angular2组件开发—模板语法（四）

摘要：[property] - 绑定属性在模板中，也可以使用一对中括号将HTML元素或组件的属性绑定到组件模型的某个表达式，当表达式的值变化时，对应的DOM对象将自动得到更新：等价的，你也可以使用bind-前缀进行属性绑定：1 @View({template:``})很容易理解，通过属性，应用相关的数据... 阅读全文

posted @ 2015-12-11 10:18 X-USER 阅读(719) 评论(0) 推荐(0)

Angular2组件开发—模板语法（三）

摘要：{{model}} - 文本插值在模板中使用可以{{表达式}}的方式绑定组件模型中的表达式，当表达式变化时， Angular2将自动更新对应的DOM对象：上图的示例中，模板声明了h1的内容将绑定到组件实例的title变量。Angular2 框架将实时检测title的变化，并在其变化时自动更新DOM树... 阅读全文

posted @ 2015-12-10 20:58 X-USER 阅读(506) 评论(0) 推荐(0)

Angular2组件开发—模板语法（二）

摘要：directives - 使用组件在Angular2中，一个组件的模板内除了可以使用标准的HTML元素，也可以使用自定义的组件！这是相当重要的特性，意味着Angular2将无偏差地对待标准的HTML元素和你自己定义的组件。这样，你可以建立自己的领域建模语言了，这使得渲染模板和视图模型的对齐更加容易... 阅读全文

posted @ 2015-12-10 20:36 X-USER 阅读(622) 评论(0) 推荐(0)

X-USER

随笔分类 - Angular2

公告