Angular 2.0 目前还处在制定完善中，尚未正式发布。
本文通过AngularJS官网的一个例子，介绍AngularJS的一些新特性、新写法（这些内容到正式发布时可能会有改动）。
（1）创建一个Angular 2工程目录， 如创建一个文件夹并命名为angular2
（2）从GitHub repository上clone一份项目种子，该种子提供了快速开发所需的资源，包括Angular 2及其依赖
git clone https://github.com/angular/quickstart.git
（3）在工程目录根路径下，创建两个文件分别为index.html和app.es6
扩展名".es6"表示该文件采用ES6语法的意思。
在app.es6文件里，导入Angular所需的相关模块：
import {Component, Template, bootstrap} from 'angular2/angular2';
上述语句使用的是ES6的模块语法，用以导入Angular的三个模块。这些模块将在运行时加载。
（4）定义component
@Component({
selector: 'my-app'
})
@Template({
inline: '<h1>Hello {{ name }}</h1>'
})
class MyAppComponent {
constructor() {
this.name = 'winstar';
}
}
由示例代码可以看出， 一个component由两部分组成：标注部分和component控制器（controller）部分。
（5）启动引导程序
bootstrap(MyAppComponent);
在app.es6的底部，调用bootstrap()方法将新定义的component加载到页面。
（6）声明HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Angular 2 Quickstart</title>
<script src="/winstar/angular2/quickstart/dist/es6-shim.js"></script>
</head>
<body>
<my-app></my-app>
<script>
System.paths = {
'angular2/*': '/winstar/angular2/quickstart/angular2/*.js',
'rtts_assert/*': '/winstar/angular2/quickstart/rtts_assert/*.js',
'app': 'app.es6'
};
System.import('app');
</script>
</body>
</html>
（7）运行查看效果
运行本地的HTTP服务器，然后在浏览器中查看效果
时间： 2024-10-13 17:20:12