Angular2入门（三）

最新推荐文章于 2025-09-05 14:01:23 发布

转载最新推荐文章于 2025-09-05 14:01:23 发布 · 79 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gett/p/5036311.html

文章标签：

#python #javascript #ViewUI

本文详细解析了Angular2中使用的注解/Annotation机制，并通过示例对比了注解写法与非注解写法的区别。同时介绍了如何通过配置SystemJS来启用Traceur的注解功能。

注解/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完成的：

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

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

例如：

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>hello,angular2</title>
 6     <!--模块加载器-->
 7     <script type="text/javascript" src="lib/system@0.16.11.js"></script>
 8     <!--Angular2模块库-->
 9     <script type="text/javascript" src="lib/angular2.dev.js"></script>
10     <script>
11         //设置模块加载规则
12         System.baseURL = document.baseURI;
13         System.config({
14             map:{traceur:"lib/traceur"},
15             traceurOptions: {annotations: true}
16         });
17     </script>        
18 </head>
19 <body>
20     <!--组件渲染锚点-->
21     <ez-app></ez-app>
22     
23     <!--定义一个ES6脚本元素-->
24     <script type="module">
25         //从模块库引入三个类型定义
26         import {Component,View,bootstrap} from "angular2/angular2";
27         
28         //组件定义 （注解写法）
29         //@Component({selector:"ez-app"})
30         //@View({template:"<h1>Hello,Annotation</h1>"})
31         //class EzApp{} 
32         
33         //组件定义 （非注解写法）
34         class EzApp{} 
35         EzApp.annotations = [new Component({selector:"ez-app"}),
36         new View({template:"<h1>Hello,Annotation</h1>"})];
37                 
38         //渲染组件
39         bootstrap(EzApp);
40     </script>
41 </body>
42 </html>