文档章节

angular2 学习二 directives - 使用组件

王福林
 王福林
发布于 2016/12/01 11:19
字数 378
阅读 28
收藏 0

directives - 使用组件

在Angular2中,一个组件的模板内除了可以使用标准的HTML元素,也可以使用自定义的组件!

这是相当重要的特性,意味着Angular2将无偏差地对待标准的HTML元素和你自己定义的组件。这样, 你可以建立自己的领域建模语言了,这使得渲染模板和视图模型的对齐更加容易,也使得模板的语义性 更强:

component-template

声明要在模板中使用的组件

不过,在使用自定义组件之前,必需在组件的ViewAnnotation中通过directives属性声明这个组件:

 
  1. @View({
  2. directives : [EzComp],
  3. template : "<ez-comp></ez-comp>"
  4. })

你应该注意到了,directives属性的值是一个数组,这意味着,你需要在这里声明所有你需要在模板 中使用的自定义组件。

修改示例代码:
1. 增加一个EzLogo组件
2. 在EzCard组件的模板中使用这个组件

 

HTML

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
    <title>template - component </title>
    <script type="text/javascript" src="lib/system@0.16.11.js"></script>
    <script type="text/javascript" src="lib/angular2.dev.js"></script>
    <script type="text/javascript" src="lib/system.config.js"></script>
</head>
<body>
	<ez-app></ez-app>
    <script type="module">
    	import {Component,View,bootstrap} from "angular2/angular2";
        
        @Component({selector:"ez-app"})
        @View({
        	directives:[EzCard,EzLogo],
        	template:`
            	<div class="ez-app">
                    <h1>EzApp</h1>
                    <ez-card></ez-card>
                    <ez-logo></ez-logo>
                </div>`
        })
        class EzApp{}
        
        @Component({selector : "ez-card"})
        @View({
        	template : `
            	<div class="ez-card">
            		<h1>EzCard</h1>
                </div>`
        })
        class EzCard{}
        
        @Component({selector : "ez-logo"})
        @View({
        	template : `
            	<div class="ez-logo">
            		<h1>EzLogo</h1>
                </div>`
        })
        class EzLogo{}
        
        bootstrap(EzApp);
    </script>
</body>
</html>

CSS

div.ez-app{background:red;padding:10px;}
div.ez-card{background:green;padding:10px;}
div.ez-logo{background:blue;padding:10px;}

 

© 著作权归作者所有

共有 人打赏支持
王福林
粉丝 10
博文 94
码字总数 37444
作品 0
徐汇
程序员
私信 提问
AngularJS - Top 6 Concepts that Developers Loved

This article represents top 6 popular AngularJS topics that has been used most by the AngularJS developer community to date. The inference is derived based on number of tagged d......

perfectspr
2014/12/03
0
0
angular-async-loader 1.3.1 发布

angular-async-loader 是一个为 angular.js 1.x 应用添加异步加载modules/controllers/services/filters/directives等模块功能组件。 2016-05-22 angular-async-loader 1.3.1 发布 修复 app.......

Sub
2016/05/23
1K
1
现在就开始使用AngularJS的三个重要原因

日期:2013-1-21 来源:GBin1.com 在线演示 如果你不熟悉什么是Angular.js的话,小编我强烈推荐你阅读 Javascript教程:AngularJS的五个超酷特性。简单来说Angular.js是google开发者设计和开...

gbin1
2013/01/21
18
0
JavaScript MVW 框架 - AngularJS

Angular JS (Angular.JS) 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程,提供 Web 应用的架构,无需进行手工 DOM 操作。 AngularJS 很小,只有 60K,...

匿名
2011/01/20
0
44
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878
2018/05/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud搭建微服务架构----流量回放

前言 系统微服务化后,传统的自测/测试方式都变得比较困难: 依赖的服务可能不稳定。 服务无法提供期望的响应数据。 缺少场景构造标准。 随着整体业务越来越复杂,微服务依赖的越来越多,测试...

春哥大魔王的博客
23分钟前
3
0
记一次springboot模块配置问题导致读取Apollo配置中心配置文件始终错误的问题

现在正在做的一个项目采用的是微服务,主框架是spring cloud,配置中心用的是携程的Apollo。 项目下有多个服务,在测试服务器上启动用户服务的时候发现在eureka中心另一个服务被启动了,尝试...

zcqshine
24分钟前
6
0
流处理和批处理框架的异同

分布式流处理需求日益增加,包括支付交易、社交网络、物联网(IOT)、系统监控等。业界对流处理已经有几种适用的框架来解决,下面我们来比较各流处理框架的相同点以及区别。 分布式流处理是对...

hblt-j
28分钟前
3
0
spring cloud 面试题

什么是springboot 用来简化spring应用的初始搭建以及开发过程 使用特定的方式来进行配置(properties或yml文件) 创建独立的spring引用程序 main方法运行 嵌入的Tomcat 无需部署war文件 简化...

狼王黄师傅
29分钟前
4
0
前嗅ForeSpider教程:采集黄页88

以黄页88为例,采集当前列表页新闻的正文数据: 第一步:新建任务 ①点击左上角“加号”新建任务,如图1: 【图1】 ②在弹窗里填写采集地址,任务名称,如图2: 【图2】 ③点击下一步,选择进...

forespider
34分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部