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

技术分享

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。