标签：
写一个Angular2的Hello World应用相当简单，分三步走：
1. 引入Angular2预定义类型
1 import {Component,View,bootstrap} from "angular2/angular2";
import是ES6的关键字，用来从模块中引入类型定义。在这里，我们从angular2模块库中引入了三个类型： Component类、View类和bootstrap函数。
2. 实现一个Angular2组件
实现一个Angular2组件也很简单，定义一个类，然后给这个类添加注解：
1 @Component({selector:"ez-app"}) 2 @View({template:"<h1>Hello,Angular2</h1>"}) 3 class EzApp{}
class也是ES6的关键字，用来定义一个类。@Component和@View都是给类EzApp附加的元信息， 被称为注解/Annotation。
@Component最重要的作用是通过selector属性（值为CSS选择符），指定这个组件渲染到哪个DOM对象上。 @View最重要的作用是通过template属性，指定渲染的模板。
3. 渲染组件到DOM
将组件渲染到DOM上，需要使用自举/bootstrap函数：
1 bootstrap(EzApp);
这个函数的作用就是通知Angular2框架将EzApp组件渲染到DOM树上。
注：HTML DOM是HTML Document Object Model(文档对象模型)的缩写，HTML DOM则是专门适用于HTML/XHTML的文档对象模型。熟悉软件开发的人员可以将HTML DOM理解为网页的API。它将网页中的各个元素都看作一个个对象，从而使网页中的元素也可以被计算机语言获取或者编辑。 例如Javascript就可以利用HTML DOM动态地修改网页。HTML DOM 定义了访问和操作HTML文档的标准方法。HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。
例：把@Component的selector属性改为"ez-app"，还应该改哪里可以获得和示例同样的结果？
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 <my-app></my-app> 22 23 <!--定义一个ES6脚本元素--> 24 <script type="module"> 25 //从模块库引入三个类型定义 26 import {Component,View,bootstrap} from "angular2/angular2"; 27 28 //组件定义 29 @Component({selector:"my-app"}) 30 @View({template:"<h1>Hello,Angular2</h1>"}) 31 class EzApp{} 32 33 //渲染组件 34 bootstrap(EzApp); 35 </script> 36 </body> 37 </html>
修改为：
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,Angular2</h1>"}) 31 class EzApp{} 32 33 //渲染组件 34 bootstrap(EzApp); 35 </script> 36 </body> 37 </html>
标签：
原文地址：http://www.cnblogs.com/gett/p/5036197.html
