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服务器,然后在中查看效果