摘要：首先，要確認安裝了，并且創(chuàng)建了目錄并執(zhí)行初始化。想必看見上面的那么多包會一臉懵逼，沒關系，我第一眼看見這些的那刻，和你現(xiàn)在的表情一樣，下面在適當?shù)臅r候我會逐個解釋的，你只需要相信我上面的包都是跑所必須的，缺一不可。

關于介紹，只說一句：Angular 2是一個強大、全面、龐大的MVVM框架。

安裝，也算是一個坎，因為你需要安裝一大堆東西，卻不知道每個東西是做什么的，盡管有Angular-cli全家桶，但是個人覺得：一開始學就安裝全家桶，就像你直接用自動擋學開車一樣，雖然上手快，但還是有些弊端的……

總之，我個人更傾向從底層學起。

首先，要確認安裝了NodeJS，并且創(chuàng)建了目錄并執(zhí)行npm init初始化。

npm i -S @angular/core @angular/common @angular/compiler @angular/platform-browser @angular/platform-browser @angular/platform-browser-dynamic rxjs core-js zone.js@^0.7.2

想必看見上面的那么多包會一臉懵逼，沒關系，我第一眼看見這些的那刻，和你現(xiàn)在的表情一樣，下面在適當?shù)臅r候我會逐個解釋的，你只需要相信我：上面的包都是跑Hello World所必須的，缺一不可。我們先盡快跑起可愛的Hello World。

我是2017年3月20日安裝的，各版本號如下：

需要額外說明一下的是zone.js這個庫，這對于Angular 2來說是個比較重要的庫，可以看到我上面的安裝命令里的最后一項，zone.js@^0.7.2, 它是取代臟檢查的一個很重要的庫，用于解決異步操作，這里就不詳述了。

Anyway，如果安裝這個庫的時候不帶版本號，它會報出以下錯誤。有心折騰的小伙伴盡管試試~

npm WARN @angular/core@2.4.10 requires a peer of zone.js@^0.7.2 but none was installed.

OK，我們安裝完運行時依賴了，現(xiàn)在安裝開發(fā)依賴。

npm i -D webpack webpack-dev-server typescript ts-loader @types/core-js@0.9.36

看上面的@types/core-js@0.9.36，是的，這是另一個坑，我默認安裝的最新版0.9.37會報錯，必須降低版本，在Github這里給出了答案。愿意折騰的小伙伴盡管試試。

OK，我們現(xiàn)在開始編寫配置文件

我們現(xiàn)在根目錄配置webpack.config.js，沒有它就沒法打包了！

// webpack.config.js
module.exports = {
  // 入口文件
  entry: "./src/main.ts",
  // 輸出目錄 
  output: {
    filename: "dist/bundle.js"
  },
  // 聲明解析上述格式的組件
  module: {
    loaders: [
      { test: /.ts$/, loader: "ts-loader" }
    ]
  }
};

然后是typescript的配置，畢竟我們的程序是用ts寫的。這個配置文件就不講解了，因為基本每個項目的配置都完全一樣。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "./node_modules/@types/"
    ]
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules"
  ]
}

我們再加一個index.html文件，你總要有個頁面看效果是不是？

    
    
    
    


    加載中……
    

我們先創(chuàng)建一個文件夾叫src, 源碼都會被放進這個文件夾里，現(xiàn)在我們再創(chuàng)建一個main.ts文件，粘貼以下代碼，這是Typescript的寫法，看不懂的話就用心看注釋:

import "core-js";
import "zone.js";
import {Component, NgModule} from "@angular/core";

import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";
import {BrowserModule} from "@angular/platform-browser";

@Component({
    selector: "hello-world",
    template: `
Hello World
`
})
class AppComponent { }

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

platformBrowserDynamic()
    .bootstrapModule(AppModule);
    

現(xiàn)在需要創(chuàng)建的文件都創(chuàng)建完了，怕路徑搞錯了，來貼張圖：

OK，我們來逐行講解

首先是import的導入部分。

core-js - 為全局上下文(window)打的補丁，提供了ES2015(ES6)的很多基礎特性。主要是提供es6-shim，雖然Typescript是ES6的超集，但畢竟ES6才是Javascript的正根，Typescript還是不得不向著ES6靠攏，如Promise及Generator這種ES6的專有特性，ts無法轉(zhuǎn)譯。

zone.js - 用來幫助處理瀏覽器異步事件的工具庫，Angular2的變化檢測機制基于這個庫實現(xiàn)的。

{Component, NgModule} - 這兩個是Angular 2自己定義好的修飾器，或者叫裝飾器，Component是組件，一個或多個組件可以組成一個模塊，模塊就是NgModule。

@angular/core - 我們看到組件和模塊都是來自于這個包，angular/core是框架中的核心模塊，每一個應用都需要它。 包括所有的裝飾器、指令、變化監(jiān)測、依賴注入、渲染等核心功能，以及組件生命周期鉤子。

{platformBrowserDynamic} - 這是動態(tài)引導，用于將你寫的所有程序編譯的組件，編譯完后才能啟動應用并渲染界面，可以說是打包前的最后一步，該組件來自于angular/platform-browser-dynamic。此外，還有個靜態(tài)引導，名曰{platformBrowser}，來自于angular/platform-browser。
二者的區(qū)別是：動態(tài)引導是在瀏覽器執(zhí)行編譯，靜態(tài)引導則省掉了瀏覽器編譯的這一步，體積更小、速度更快，直接可以啟動應用。相當高深的說！

{BrowserModule} - 這是在瀏覽器運行時的一些工具庫，將某些模塊打包導出，總之是必不可少的。@angular/platform-browser - 與DOM和瀏覽器相關的每樣東西，特別是幫助往DOM中渲染的那部分。

帶有platform字樣的包，包含的都是引導啟動的相關工具。

呃……我們終于可以講解正式的代碼了。

@Component({
    selector: "hello-world",
    template: `
Hello World
`
})
class AppComponent { }

這段代碼的意思是：我現(xiàn)在要解析一個組件了。
它的名字叫hello-world，或者說叫，這個組件是個類哦，它的類名叫AppComponent。

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

這段代碼的意思是：我現(xiàn)在要解析一個模塊了。
declarations - 導入本模塊所依賴的組件——AppComponent;
imports - 導入本模塊所需的其他模塊，這里的BrowserModule就是每個應用的根模塊都要導入的，當前它的名字叫AppModule；
bootstrap - 標記出引導組件，也就是要渲染的那個。

platformBrowserDynamic().bootstrapModule(AppModule);最后一步，編譯啟動！

OK, 最后我們還需要配置一下package.json,找到scripts這一項：

"scripts": {
    "dev": "webpack-dev-server --inline --colors --progress --port 3000"
},

現(xiàn)在在終端輸入命令：npm run dev

在瀏覽器打開本地3000端口，即可看到結(jié)果，不知道你有沒有跑起來，反正我是跑起來了！(^__^)

回頭看終端，會報出兩個警告：

WARNING in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
71:15-36 Critical dependency: the request of a dependency is an expression

WARNING in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
87:15-102 Critical dependency: the request of a dependency is an expression

如果你心大，可以忽略它，如果想解決這兩個警告，可以配置一下webpack自帶的webpack.ContextReplacementPlugin插件！具體怎么做很容易谷歌到，我就不演示了。

另外還有個很簡單的方法，在webpack.config.js里面的module里加一句exprContextCritical: false，就會忽略所有的警告了。

我們再看看package.json,噢，好像有個叫rxjs的依賴包我們并沒有用到哦，那是不是跑Hello World不需要它呢？

No, 你如果刪掉它，會報錯的哦！愿意折騰的同學盡管試試！

在網(wǎng)上看其他Angular 2 的教程，可能會看見配置項中有typings這樣的東西，是的，它跟Typescript相關，但是在Typescript2.0之后已經(jīng)不需要這個東西了。

這次是為了簡單，所以將組件和模塊以及渲染寫在同一個文件里，但幾乎所有的Angular教程都不會這么做，因為這不是最佳實踐，在實際的開發(fā)中，組件、模塊和引導都是分開的。

我們看一下終端的輸出，哇塞，打包之后的JS文件才3M而已哦！

沒辦法，誰讓人家組件多呢？本來體積就不小。

首先這是開發(fā)環(huán)境，打包出來大是正常的，如果你在package.json里添加一個命令：

"scripts": {
    "dev": "webpack-dev-server --inline --colors --progress --port 3000",
    "build": "webpack -p"
},

在終端執(zhí)行npm run build

是不是就小了很多？這才是放進瀏覽器的代碼，不過這也是挺大的，如果你不用gzip壓縮，我真的不知道是否有別的辦法進一步壓縮它了。

希望通過這篇文章，能把你從一頭霧水的狀態(tài)，提升為略懂吧！