标签:angularjs
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';
(4)定义component
@Component({ selector: 'my-app' }) @Template({ inline: '<h1>Hello {{ name }}</h1>' }) class MyAppComponent { constructor() { this.name = 'winstar'; } }
(5)启动引导程序
bootstrap(MyAppComponent);
(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服务器,然后在浏览器中查看效果
标签:angularjs
原文地址:http://blog.csdn.net/winstar1688/article/details/44701227