官网提供的是在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/ 就可以看到:

ng2-5-min

喔,对于,如果你想正确的运行还需要开个VPN,因为上面引用的库都是直接国外的。!@#¥%……&*()…………

这是我完整的代码,下载后按第8步安装 http-server 运行即可。