Angular2 快速入門（TypeScript + Webpack）

本文轉載自查看原文 2016-11-02 12:02 6540 angular/ angular2入門

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

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

project-directory

如果在運行 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 顯示：

git-bash

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

angular2-quickstart-preview

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

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