标签：
$ npm install -g tsd@^0.6.0
$ tsd install angular2 es6-promise rx rx-lite
$ npm install -g typescript@^1.5.0-beta
$ tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts
$ tsc --watch -m commonjs -t es5 --emitDecoratorMetadata --experimentalDecorators app.ts
/// <reference path="typings/angular2/angular2.d.ts" />
import {Component, View, bootstrap} from ‘angular2/angular2‘;
// Annotation section
@Component({
selector: ‘my-app‘ //定义一个自定义标签，在html中对应为<my-app></my-app>
})
@View({
template: ‘<h1>Hello {{ name }}</h1>‘ //给这个自定义组件指定的html模板代码
})
// Component controller
class MyAppComponent {
name: string;
constructor() {
this.name = ‘Alice‘;
}
}
bootstrap(MyAppComponent);
<!-- index.html -->
<html>
<head>
<title>Angular 2 Quickstart</title>
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
<script src="https://jspm.io/system@0.16.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script>
</head>
<body>
<!-- The app component created in app.ts -->
<my-app></my-app>
<script>System.import(‘app‘);</script>
</body>
</html>
System.js这货是一个开源的第三方库，给浏览器扩展添加ES6模块加载的，所以你看到上面的代码中有System.import(‘app‘)这行代码，通俗讲就是加载app.ts编译生成的app.js。
System is a third-party open-source library that adds ES6 module loading functionality to browsers.
# From the directory that contains index.html: npm install -g http-server # Or sudo npm install -g http-server http-server # Creates a server at localhost:8080 # In a browser, visit localhost:8080/index.html
angularjs2.0 五分钟入门教程之typescript版本
标签：
原文地址：http://www.cnblogs.com/zhouzone/p/4834923.html
