AngularJS 2.0 尝鲜

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: '

Hello {{ name }} ' }) class MyAppComponent { constructor() { this.name = 'winstar'; } }
由示例代码可以看出， 一个component由两部分组成：标注部分和component控制器（controller）部分。

 

 

（5）启动引导程序

 

bootstrap(MyAppComponent);

在app.es6的底部，调用bootstrap()方法将新定义的component加载到页面。

 

 

（6）声明HTML

 

<script src="/winstar/angular2/quickstart/dist/es6-shim.js"></script> <script> System.paths = { 'angular2/*': '/winstar/angular2/quickstart/angular2/*.js', 'rtts_assert/*': '/winstar/angular2/quickstart/rtts_assert/*.js', 'app': 'app.es6' }; System.import('app'); </script>

 

（7）运行查看效果

运行本地的HTTP服务器，然后在浏览器中查看效果