Angular2的五分钟入门在Windows下的实现

官网提供的是在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 运行即可。

本文链接：https://www.cnblogs.com/smallstupidwife/p/4850749.html

Angular2的五分钟入门在Windows下的实现