官网提供的是在linux的步骤，而实际直接拿这些步骤在windows下也可以实现，但唯一就是无法 --watch TypeScript文件，那就是扯蛋，改一下代码就要重新编译，谁受得了。
那么我来尝试一下直接使用Gulp来搭建。
一、创建项目
虽然Angular2允许我们使用TypeScript、Dart、ES5、ES6来写代码，但是出于Angular2也拥抱TypeScript，那么变成我们唯一最好的选择也是TypeScript。
首先创建一个空文件夹，然后通过TSD（什么是TSD见我之前的文章）来安装Angular2包。
tsd install angular2 es6-promise rx rx-lite
接着分别创建 app.ts和index.html 两个空文件。
二、tsc 编译TypeScript
tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts
这是官网提供的命令，意思是说使用 tsc.exe 把 app.ts 编译为ES5标准的JavaScript，其中 –watch 是关键，他可以直接对 app.ts 进行监听，一但app.ts发生变化就立即重新编译。
而正是这一步，在windows下是无法监听的。因此我这里尝试用Gulp来编译TypeScript代码。
三、Gulp 编译TypeScript
首先我们更改一下之前创建的两个文件存放路径，新建立一个 src 文件夹用来存放所有 *.ts 文件。
其次需要安装相应的node组件，采用 gulp-typescript 来编译TypeScript代码。
npm install --save-dev gulp gulp-typescript
最后我们整体的目录结构看起来像这样子：
ng2
├─dist
├─node_modules
├─src
└─app.ts
├─typings
├─angular2
├─es6-promise
└─rx
├─gulpfile.js
├─index.html
├─package.json
└─tsd.json
最后的重点就是 gulpfile.js 配置，这里我写两个Gulp任务，一个是编译、一个是监听。
var gulp = require(‘gulp‘),
ts = require(‘gulp-typescript‘);
// 编译任务
gulp.task(‘default‘, function() {
var tsResult = gulp.src(‘src/*.ts‘)
.pipe(ts({
noImplicitAny: true,
module: ‘commonjs‘,
target: ‘ES5‘ // 按ES5标准输出
}));
return tsResult.js.pipe(gulp.dest(‘dist/‘));
});
// 监听任务
gulp.task(‘watch‘, [‘default‘], function() {
gulp.watch(‘src/*.ts‘, [‘default‘]);
});
这样，我们可以直接使用命令 gulp watch 运行gulp，一但我们的 src 文件夹有什么变动，就会立即重新编译，并把结果以 app.js 命名输出在 dist 文件夹中。
四、导入Angular
在 app.ts 里引用 angular2 包，同时这种引用在VS当中还可以起到对angular2的智能提醒作用。
/// <reference path="../typings/angular2/angular2.d.ts" />
注：好像这里的path无法使用 / 来表示根目录，只能以 ../ 的形式一点点查。
导入 angular2 的核心模块。
import { Component, View, bootstrap } from ‘angular2/angular2‘;
假设这些代码是在VS下，那么你们还会发现在 Component 上按F12都可以直接跳转到他的所在的文件，不亏是和M$合作，所以如果在VS下开发NG2，体验就不用多说了。
五、定义一个组件
在NG2中，应用基于组件的结构用其来表示UI，以下是创建一个完整的 <my-app> 组件。
// Annotation section
@Component({
selector: ‘my-app‘
})
@View({
template: ‘<h1>Hello {{ name }}</h1>‘
})
// Component controller
class MyAppComponent {
name: string;
constructor() {
this.name = ‘Alice‘;
}
}
假设你完全没有TypeScript知识的话，那看这一段实时会头疼。
一个Angular2组件包含两部分，用ES6的class来表示组件的Controller（有Angular1.x经验的知道，它是用于组件控制器）和以注解的方式告诉组件应该放在页面的什么地方和什么内容。怎么看都有点像ReactJS。
@Component 和 @View 注解
在Angular2当中会有大量使用TypeScript的注解，也是TypeScript1.5的一个新功能，它是将额外的数据附加到类当中，相当于配置元数据，就拿上面的来说，@Component 它把界面上某个DOM元素选择器关联起来，以便于Angular知道应该把结果插入到哪？熟悉1.x的人知道，当插入组件到页面时也会一并产生一个的注释代码，而在2.x里面就没有这些。
此外注解其实也有可能出现在ES7的标准当中。在VS IDE下是允许被智能感知的，开发起来杠杠的。
六、Bootstrap
在1.x当中我们启动一个Angular程序有两种方式 ng-app="" 和 angular.bootstrap()，在2.x中只能用后者。我们在 app.ts 最底部加上：
bootstrap(MyAppComponent);
七、定义HTML
<!-- 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(‘dist/app‘);</script>
</body>
</html>
其中引用了 traceur-runtime.js 和 angular2.dev.js，前者是ES6编译器，后者是angular核心包，而 system.js 就是个万能的模块加载器（就像require.js一样）。
八、运行
需要有一个HTTP服务，来运行我们的angular2。这里直接使用 npm install -g http-server安装，最后：
http-server
在浏览器里访问 http://localhost:8080/ 就可以看到：
喔，对于，如果你想正确的运行还需要开个VPN，因为上面引用的库都是直接国外的。！@#￥%……&*（）…………
这是我完整的代码，下载后按第8步安装 http-server 运行即可。
