標籤：
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 編譯TypeScripttsc --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 檔案夾中。
在 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 controllerclass 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);<!-- 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 運行即可。
Angular2的五分鐘入門在Windows下的實現
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
