Angular2 快速入門（TypeScript + Webpack）

2016年9月底，谷歌釋出了 Angular2 的正式版，可謂衆望所歸。相比 Angular1.x，Angular2 有了質的改變，元件化（Component）是它的核心靈魂。

本文将從一個簡單的 QuickStart 開始，帶你進入 Angular2 的世界。内容以 Angular 官網的快速指南為準，不同之處是我們在這裡使用了 webpack 作為子產品加載器對源碼編譯打包，而不是官網使用的 System.js，如果你有選擇困難症千萬别糾結，隻要達到目的盡管使用你熟悉的子產品加載器吧。

下面我們一起來搭建這個 QuickStart 應用，讓頁面顯示一條消息：”My First Angular App”。整個示例過程需要你有一些耐心，打開你的編輯器開始 coding 吧。

本文源碼：angular2-quickstart

1. 開發環境和工具準備

關于 IDE，我用的是公認的前端開發神器 Webstrom，當然 Atom 或 Sublime 也很不錯。指令行工具推薦使用 git-bash。

環境方面需要 node v5.x.x 或更高版本以及 npm 3.x.x 或更高版本，

如果你還沒有安裝 node.js，去 node.js官網下載下傳。

2. 建立本地項目目錄

mkdir angular2-quickstart
cd angular2-quickstart

3. 建立 package.json

npm init

npm init 指令會建立一個預設的 package.json 檔案，如果你沒用過，沒關系隻需要根據指令行提示一步一步填上相關資訊，或直接每次按回車就行。

在IDE裡修改預設的 package.json 内容，如下：

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "postinstall": "./node_modules/.bin/typings install"
  },
  "author": "Your Name",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~2.1.0",
    "@angular/compiler": "~2.1.0",
    "@angular/core": "~2.1.0",
    "@angular/forms": "~2.1.0",
    "@angular/http": "~2.1.0",
    "@angular/platform-browser": "~2.1.0",
    "@angular/platform-browser-dynamic": "~2.1.0",
    "@angular/router": "~3.1.0",
    "@angular/upgrade": "~2.1.0",

    "angular-in-memory-web-api": "~0.1.5",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "ts-loader": "^0.8.2",
    "typescript": "^2.0.3",
    "typings": "^1.4.0",
    "path": "^0.12.7",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.1"
  }
}

簡單解釋下，dependencies 是運作時所需要的依賴，devDependencies 是開發時所需要的依賴，@angular 是 Angular 的核心庫，Angular2 将它分成了很多包，這樣友善開發者靈活的按需引入。

reflect-metadata、rxjs、zone.js 這些都是為 Angular 提供核心功能支援，這裡就不做詳細說明了。

webpack-dev-server 是支援 webpack 的靜态伺服器調試工具，它可以實時監控項目中檔案，檔案改動後使浏覽器自動重新整理或進行熱替換。

ts-loader 是 webpack 将 TypeScript 編譯成 ES5 的編譯器，本文裡我們使用 TypeScript 來寫例子，它也是 Angular 官方推薦的開發語言。

typings 是 TypeScript 定義的檔案管理系統

4. 建立其他配置檔案：tsconfig.json 和 typings.json

建立 tsconfig.json（定義 TypeScript 編譯成 ES5 的參數）：

touch tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": true,
    "declaration": false
  }
}

建立 typings.json

touch typings.json

{
  "globalDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160602141504"
  }
}

5. 安裝所有依賴包

OK，現在運作 npm install 安裝 package.json 裡所有的依賴包，過程可能會有些慢（如果你開了 VPN 就不存在這問題），這裡推薦使用淘寶鏡像指令加快安裝速度 cnpm install

npm install

安裝完後，你的項目目錄應該是這樣：

如果在運作 npm install 之後沒有出現 typings 目錄，你就需要通過指令手動安裝它：

npm run typings install

6. 建立應用入口

NgModules 把 Angular 應用組織成了一些功能相關的代碼塊。 Angular 本身也被拆成了一些獨立的 Angular 子產品。這讓你可以隻導入你應用中所需的 Angular 部件，以得到較小的檔案體積。每個 Angular 應用都至少有一個子產品：根子產品，在這裡它叫做 AppModule 。

在項目目錄中建立 app 子目錄，接着在 app 目錄下建立 app.module.ts

mkdir app
touch app/app.module.ts

在剛建立的 app.module.ts 檔案中添加下面代碼：

// zone 為異步任務提供hook支援，主要應用于提高髒檢查效率和降低性能損耗
// reflect-metadata 為Decorator提供反應射API，注意:Decorator是ES6的提案
import \'zone.js/dist/zone\';
import \'reflect-metadata\';

// 引入NgModule裝飾器
import { NgModule } from \'@angular/core\';

// 引入浏覽器子產品
import { BrowserModule } from \'@angular/platform-browser\';

@NgModule({
    imports: [ BrowserModule ]
})

export class AppModule {}

這個檔案是整個應用的入口，由于應用需要運作在浏覽器中，是以需要從 @angular/platform-browser 中導入BrowserModule，并将它添加到 imports 數組中。

7. 建立元件，并添加到應用中

每個 Angular 應用都至少有一個根元件，整個應用由一個個元件組成，而元件化（Component）則是 Angular 的核心靈魂。

建立元件 AppComponent，即檔案 app.component.ts，在其中添加代碼：

touch app/app.component.ts

import { Component } from \'@angular/core\';

// 為 AppComponent 元件類添加注解
@Component({
  selector: \'my-app\',
  template: \'<h1>My First Angular App</h1>\'
})

export class AppComponent {}

@Component 裝飾器會把一份中繼資料關聯到 AppComponent 元件類上

selector 用來為該元件的 HTML 元素指定簡單的 CSS 選擇器
template 用來告訴 Angular 如何渲染該元件的視圖

class AppComponent 之是以是空的，因為我們的例子不需要應用邏輯。

編輯 app.module.ts 檔案，導入 AppComponent ，并把它添加到 NgModule 裝飾器中的 declarations 和 bootstrap 字段：

// zone 為異步任務提供hook支援，主要應用于提高髒檢查效率和降低性能損耗
// reflect-metadata 為Decorator提供反應射API，注意:Decorator是ES6的提案
import \'zone.js/dist/zone\';
import \'reflect-metadata\';

// 引入NgModule裝飾器
import { NgModule } from \'@angular/core\';

// 引入浏覽器子產品
import { BrowserModule } from \'@angular/platform-browser\';

// 引入元件AppComponent
import { AppComponent } from \'./app.component\';

@NgModule({
    imports: [ BrowserModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})

export class AppModule {}

8. 啟動應用

建立 main.ts 讓 Angular 加載這個根元件，在其中添加如下代碼：

touch app/main.ts

// 引入啟動器
import { platformBrowserDynamic } from \'@angular/platform-browser-dynamic\';

// 引入入口檔案
import { AppModule } from \'./app.module\';

// 啟動應用
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

為什麼要分别建立 main.ts 、應用子產品和應用元件的檔案呢？

因為應用的引導過程與建立子產品或者展現視圖是互相獨立的關注點。如果該元件不會試圖運作整個應用，那麼測試它就會更容易。

9. 建立應用的宿首頁面 index.html

在目錄下建立 index.html 檔案：

touch index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Angular2 QuickStart</title>
</head>
<body>
    <!-- 對應 @Component({ selector: \'my-app\', ... }) -->
    <my-app></my-app>

    <!-- 編譯打包後的檔案 -->
    <script src="dist/bundle.js"></script>
</body>
</html>

10. 建立 webpack.config.js

我們使用 webpack 作為編譯打包工具，就需要建立 webpack.config.js

touch webpack.config.js

在 webpack.config.js 中添加代碼：

var path = require(\'path\');

module.exports = {
    entry: {
        main: \'./app/main.ts\'
    },
    output: {
        path: path.resolve(__dirname, \'dist\'),
        publicPath: \'/dist/\',
        filename: \'bundle.js\'
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loader: \'ts\'
            }
        ]
    },
    // require 檔案時可省略字尾 .js 和 .ts
    resolve: {
        extensions: [\'\', \'.js\', \'.ts\']
    },
    // 配置 webpack-dev-server
    devServer:{
        historyApiFallback: true,
        hot: true,
        inline: true,
        port: 9090 // 修改端口，一般預設是8080
    }
};

修改 package.json 在其中添加 start 指令：

( package.json 的其他部分這裡做了省略 )

{
  "scripts": {
    "start": "webpack-dev-server --inline --hot --colors --progress",
    "postinstall": "./node_modules/.bin/typings install"
  },
}

一切就緒，先不急着啟動 webpack-dev-server，初學者經常遇到的坑，關于 webpack-dev-server 無法讓浏覽器在代碼修改後進行熱替換，首頁要確定是否全局安裝了 webpack-dev-server，如果沒有就運作下面指令：

npm install webpack-dev-server -g

更重要的是 webpack-dev-server 隻會将靜态檔案打包在記憶體中而非你的磁盤裡這是為了友善開發環境調試，是以初學者會疑惑為什麼運作了 webpack-dev-server，dist 檔案夾下确無檔案産生，想産生檔案就運作 webpack。

10. 大工告成，走起！

在指令行輸入：

npm start

git-bash 顯示：

在浏覽器打開 http://localhost:9090/index.html，就會看到我們的第一個 angular2 應用了：

你也可以嘗試在 app.component.ts 中将 “My First Angular App” 修改成别的文字，浏覽器會自動進行熱替換，是不是有一些成就感。

相信通過這個快速指南，你已經對 Angular2 産生了興趣。

Angular2 快速入門（TypeScript + Webpack） - Jean-Xu