AngularJS 2.0 尝鲜

浏览数：52 / 时间：2015年06月09日

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

技术分享