天天看點
傳回

Angular2的五分鐘入門在Windows下的實作

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/[email protected]/traceur-runtime.js"></script>
    <script src="https://jspm.io/[email protected]"></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 運作即可。

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/[email protected]/traceur-runtime.js"></script>
    <script src="https://jspm.io/[email protected]"></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 運作即可。

上一篇: Angular2 快速入門（TypeScript + Webpack） - Jean-Xu
下一篇: Angular2 學習第一天