初识Angular2
写一个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/[email protected]"></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/[email protected]"></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>