angular2是什么？我猜不容我贅述，各位一定略有耳聞，無(wú)論是曾經(jīng)AngularJS的擁躉，亦或是React的粉絲，都或多或少的對(duì)她有過(guò)一點(diǎn)了解。未見(jiàn)其物、先聞其聲，angular2在問(wèn)世之前已經(jīng)做足了宣傳，想必諸位也一定被下面各種詞匯所震懾，什么：TypeScript、 ES5、 ES6、 Dart、 Immutable、 Unidirectional Data Flow、 Reactive Programming、 Decorators、 System.js、 webpack...，天花亂墜，美不勝收！但我們不禁要問(wèn)，“都說(shuō)AngularJS學(xué)習(xí)曲線陡峭，也沒(méi)陡出這些個(gè)莫名詞匯！”，angular2究竟該如何上手？看了這些個(gè)知識(shí)點(diǎn)，有木有嚇得手抖，都搞不清從何處入手了！？

本教程主旨：多些操作、少點(diǎn)說(shuō)教(理論是進(jìn)階必須的，千萬(wàn)不要誤讀)，讓我們從實(shí)踐中追尋真理吧！

本章源碼：environment

本章使用angular2版本為：2.4.5, webpack版本為: 2.2.0

這里我推薦使用vscode(原諒我變了，之前推薦的是atom)。很爽的哦！

mkdir environment
cd environment
npm init

根據(jù)npm init提問(wèn)，創(chuàng)建package.json文件，創(chuàng)建后去掉不必要的字段，像這樣即可：

{
  "name": "environment",
  "version": "1.0.0",
  "description": "I will show you how to set up angular2 development environment",
  "keywords": [
    "angular2",
    "environment"
  ],
  "scripts": {
    "start": "webpack-dev-server --hot--host 0.0.0.0"
  },
  "author": "Howard.Zuo",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "^2.4.5",
    "@angular/compiler": "^2.4.5",
    "@angular/core": "^2.4.5",
    "@angular/platform-browser": "^2.4.5",
    "@angular/platform-browser-dynamic": "^2.4.5",
    "@angular/forms": "^2.4.5",
    "core-js": "^2.4.1",
    "rxjs": "5.0.3",
    "zone.js": "^0.7.6"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.35",
    "ts-loader": "^2.0.0",
    "typescript": "^2.1.5",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0"
  }
}

npm install

@angular: 這個(gè)必須的，沒(méi)意見(jiàn)吧？之所以分了多個(gè)包，這是最新2.1.2的變化，可以按需引入，增加靈活性

core-js: javascript的一個(gè)標(biāo)準(zhǔn)庫(kù)實(shí)現(xiàn)，包含了大量ES2015, ES2016的ES5實(shí)現(xiàn)

rxjs: 一個(gè)Reactive Programming的JavaScript實(shí)現(xiàn)。這里對(duì)她的依賴是因?yàn)?b>angular2支持多種數(shù)據(jù)更新模式，比如：flux、Rx.js

zone.js: 用來(lái)對(duì)異步任務(wù)提供Hooks支持，使得在異步任務(wù)運(yùn)行之前/之后做額外操作成為可能。在angular2里的主要應(yīng)用場(chǎng)景是提高臟檢查效率、降低性能損耗。

webpack: 我們這里使用webpack2對(duì)源碼進(jìn)行編譯、打包，而不是用官網(wǎng)介紹的System.js的運(yùn)行時(shí)加載、解釋、執(zhí)行。合并打包的好處不用我多說(shuō)吧？減少請(qǐng)求數(shù)、uglify、預(yù)檢查...

webpack-dev-server: 一個(gè)輕量級(jí)的，支持webpack編譯的靜態(tài)服務(wù)器(調(diào)試工具)，本章節(jié)我們就用它啟動(dòng)程序

ts-loader: TypeStrong出品的TypeScript加載器，通過(guò)該加載器，TypeScript源碼可以順利被編譯成ES5代碼

typescript: angular2官方推薦的開(kāi)發(fā)語(yǔ)言，我們?cè)诮坛汤镆矊⑹褂迷撜Z(yǔ)言進(jìn)行代碼編寫(xiě)

@types/core-js: 自typescript 2.0.0以后，使用@types管理聲明文件，由于angular2依賴ES2015的諸多特性，譬如：Promise、Map等，所以需要引入這些API的聲明

touch index.html

向剛才創(chuàng)建的index.html里添加如下內(nèi)容：

mkdir ts
touch ts/app.ts

向剛才創(chuàng)建的ts/app.ts里添加如下內(nèi)容：

import {Component} from "@angular/core";

//聲明第一個(gè)Component
@Component({
    selector: "my-app",
    template: "
My First Angular 2 App
"
})
export class AppComponent { }

touch ts/index.ts

向剛才創(chuàng)建的ts/index.ts里添加如下內(nèi)容：

//不顯示引入，你會(huì)得到"Uncaught reflect-metadata shim is required when using class decorators"的錯(cuò)誤
import "core-js/es6";
import "core-js/es7/reflect";
import "zone.js/dist/zone";

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

//引入瀏覽器模塊
import { BrowserModule } from "@angular/platform-browser";

//引入啟動(dòng)器
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

//引入我們剛才創(chuàng)建的第一個(gè)component
import { AppComponent }  from "./app";

//聲明一個(gè)應(yīng)用模塊
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
class AppModule { }

//啟動(dòng)應(yīng)用
platformBrowserDynamic().bootstrapModule(AppModule);

touch webpack.config.js

向剛才創(chuàng)建的webpack.config.js里添加如下內(nèi)容：

const {resolve} = require("path");

module.exports = {
    entry: {
        index: "./ts/index.ts"
    },
    output: {
        path: resolve(__dirname, "dist"),
        filename: "bundle.js",
        publicPath: "dist/"
    },
    module: {
        exprContextCritical: false,
        rules: [
            {
                test: /.ts$/,
                use: ["ts-loader"]
            }
        ]
    },
    resolve: {
        extensions: [
            ".js",
            ".ts"
        ]
    }
};

touch tsconfig.json

向剛才創(chuàng)建的tsconfig.json里添加如下內(nèi)容：

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "moduleResolution": "node",
        "noImplicitAny": true,
        "removeComments": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true,
        "declaration": false
    },
    "buildOnSave": false,
    "compileOnSave": false,
    "exclude": [
        "node_modules"
    ]
}

好了，到目前為止，我們第一個(gè)示例的開(kāi)發(fā)/運(yùn)行環(huán)境就基本搭好了，現(xiàn)在啟動(dòng)試試看：

npm start

你會(huì)看到：

下回預(yù)告：牛刀小試component