文档章节

angular2 学习一 注解/Annotation

王福林
 王福林
发布于 2016/12/01 10:37
字数 384
阅读 29
收藏 1

注解/Annotation

你一定好奇@Component@View到底是怎么回事。看起来像其他语言(比如python) 的装饰器,是这样吗?

ES6规范里没有装饰器。这其实利用了traceur的一个实验特性:注解。给一个类 加注解,等同于设置这个类的annotations属性:

 
  1. //注解写法
  2. @Component({selector:"ez-app"})
  3. class EzApp{...}

等同于:

 
  1. class EzApp{...}
  2. EzApp.annotations = [new Component({selector:"ez-app"})];

很显然,注解可以看做编译器(traceur)层面的语法糖,但和python的装饰器不同, 注解在编译时仅仅被放在annotation里,编译器并不进行解释展开 - 这个解释的工作是 Angular2完成的:

annotation

据称,注解的功能就是Angular2团队向traceur团队提出的,这不是traceur的默认选项, 因此你看到,我们配置systemjs在使用traceur模块时打开注解

 
  1. System.config({
  2. map:{traceur:"lib/traceur"},
  3. traceurOptions: {annotations: true}
  4. });

修改示例代码中的EzApp组件,不用注解实现同样的功能。

HT

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
    <title>hello,angular2</title>
    <!--模块加载器-->
    <script type="text/javascript" src="lib/system@0.16.11.js"></script>
    <!--Angular2模块库-->
    <script type="text/javascript" src="lib/angular2.dev.js"></script>
	<script>
    	//设置模块加载规则
    	System.baseURL = document.baseURI;
		System.config({
        	map:{traceur:"lib/traceur"},
			traceurOptions: {annotations: true}
		});
	</script>	    
</head>
<body>
	<!--组件渲染锚点-->
	<my-app></my-app>
    
    <!--定义一个ES6脚本元素-->
    <script type="module">
    	//从模块库引入三个类型定义
        import {Component,View,bootstrap} from "angular2/angular2";
        
        //组件定义
        @Component({selector:"my-app"})
        @View({template:"<h1>Hello,Annotation</h1>"})
        class EzApp{}       
                
        //渲染组件
        bootstrap(EzApp);
    </script>
</body>
</html>

CSS

h1{background:black;color:white;display:inline-block}

 

© 著作权归作者所有

共有 人打赏支持
王福林
粉丝 10
博文 94
码字总数 37444
作品 0
徐汇
程序员
私信 提问
AngularJS2.0 教程系列(一)

Why Angular2 Angular1.x显然非常成功,那么,为什么要剧烈地转向Angular2? 性能的限制 AngularJS当初是提供给设计人员用来快速构建HTML表单的一个内部工具。随着时间的推移,各种特性 被加...

笔阁
2015/07/22
0
1
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
11/09
0
0
ngular2 VS Angular4 深度对比:特性、性能

在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一。 Google的Angular团队已于3月23日发布了Angular4,而期待已久的Angular2版本则是之前版本的完全重构。 对于成熟的开发人员...

机器的心脏
06/02
0
0
AngularJS 中文资料+工具+库+Demo 大搜集

中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频。 http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html 翻译的官方的Guide http://www.ituring.com.cn/miniboo...

liaolzy2
2015/05/31
0
0
All About Angular 2.0

angular All About Angular 2.0Posted by Rob Eisenberg on November 6th, 2014. Have questions about the strategy for Angular 2.0? This is the place. In the following article I'll e......

Ethan_prog
2015/03/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Java二分查找代码案例

public static int binarySearch(Integer[] srcArray, int des) { //定义初始最小、最大索引 int low = 0; int high = srcArray.length - 1; //确保不会出现重复查找,越界 while (low <= hi......

绝地逢生
10分钟前
1
0
在JAVA中线程到底起到什么作用!

这是javaeye上非常经典的关于线程的帖子,写的非常通俗易懂的,适合任何读计算机的同学. 线程同步 我们可以在计算机上运行各种计算机软件程序。每一个运行的程序可能包括多个独立运行的线程(...

xtof
22分钟前
0
0
纹理与表面细节添加方法---帧映射

中国龙-扬科
39分钟前
0
0
vue学习:9、模块工具包收集

vue常用包收集 npm i webpack@3.6.0 -s 样式支持包 npm i css-loader -s npm i style-loader -s 图片支持 npm i url-loader file-loader -s 利用less操作图片 npm i less -s npm i less-loa......

轻轻的往前走
40分钟前
0
0
20181115上课截图

小丑鱼00
50分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部