注解/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>