摘要：官方支持微軟出品，是的超集，是的強(qiáng)類型版本作為首選編程語言，使得開發(fā)腳本語言的一些問題可以更早更方便的找到。第一個(gè)組件那么我們來為我們的增加一個(gè)吧，在命令行窗口輸入。引導(dǎo)過程通過在中引導(dǎo)來啟動應(yīng)用。它們的核心就是。

第一節(jié)：Angular 2.0 從0到1 （一）
第二節(jié)：Angular 2.0 從0到1 （二）
第三節(jié)：Angular 2.0 從0到1 （三）

Angular 2 是Google推出的一個(gè)跨平臺全終端的框架，和目前比較火的React和Vue.js相比，有如下優(yōu)點(diǎn)：

由于Google的目的是推出一個(gè)完整解決方案，所以官方默認(rèn)提供的類庫（比如routing，http，依賴性注入（DI）等）非常完整，無需自己選擇。React的一大痛點(diǎn)就是選擇太多導(dǎo)致在配置尋找組件和類庫的過程中消耗太多精力，當(dāng)然從另一方面看這也是其優(yōu)勢，選擇眾多且自由。

官方支持TypeScript（微軟出品，是JavaScript的超集，是 JavaScript 的強(qiáng)類型版本）作為首選編程語言，使得開發(fā)腳本語言的一些問題可以更早更方便的找到。

RxJS友好使得響應(yīng)式編程在Augular2中變得極為容易（Google開發(fā)的框架依賴這么多的微軟的產(chǎn)品，可見微軟的轉(zhuǎn)型還是很成功的）

支持NativeScript甚至ReactNative等進(jìn)行原生Android/iOS應(yīng)用開發(fā)（React支持React Native）

支持服務(wù)器端渲染（React也支持）

但總體來講，個(gè)人認(rèn)為Angular2更適合從原生App開發(fā)或后端Java/.Net等轉(zhuǎn)型過來開發(fā)前端的程序員，因?yàn)樗拈_發(fā)模型更接近于傳統(tǒng)強(qiáng)類型語言的模式，加上官方內(nèi)建的組件和類庫比較完整，有官方中文網(wǎng)站 https://angular.cn ，學(xué)習(xí)曲線要低一些。有過Angular 1.x 開發(fā)經(jīng)驗(yàn)的同學(xué)要注意了，雖然只有一個(gè)版本號的差距，但2.x和1.x是完全不同的，不要奢望1.x的應(yīng)用會平滑遷移到2.x。

Angular 支持大多數(shù)常用瀏覽器，包括下列版本：

Angular2需要node.js和npm，我們下面的例子需要node.js 6.x.x和npm 3.x.x，請使用 node -v 和 npm -v 來檢查。由于眾所周知的原因，http://npmjs.org 的站點(diǎn)訪問經(jīng)常不是很順暢，這里給出一個(gè)由淘寶團(tuán)隊(duì)維護(hù)的國內(nèi)鏡像 http://npm.taobao.org/ 。安裝好node后，請輸入npm config set registry https://registry.npm.taobao.org

和官方快速起步文檔給出的例子不同，我們下面要使用Angular團(tuán)隊(duì)目前正在開發(fā)中的一個(gè)工具--Angular CLI 。這是一個(gè)類似于React CLI和Ember CLI的命令行工具，用于快速構(gòu)建Angular2的應(yīng)用。它的優(yōu)點(diǎn)是進(jìn)一步屏蔽了很多配置的步驟、自動按官方推薦的模式進(jìn)行代碼組織、自動生成組件/服務(wù)等模板以及更方便的發(fā)布和測試代碼。由于目前這個(gè)工具還在beta階段，安裝時(shí)請使用 npm install -g angular-cli@latest 命令。

IDE的選擇也比較多，免費(fèi)的Visual Studio Code 和 Atom，收費(fèi)的有WebStorm。我們這里推薦采用 Visual Studio Code，可以到 https://code.visualstudio.com/ 下載 Windows/Linux/MacOS 版本。

安裝完以上這些工具，開發(fā)環(huán)境就部署好了，下面我們將開始Angular2的探險(xiǎn)之旅。

那么現(xiàn)在開啟一個(gè)terminal（命令行窗口），鍵入 ng new hello-angular

如上圖所示，這個(gè)命令為我們新建了一個(gè)名為“hello-angular”的工程，進(jìn)入該工程目錄，鍵入 code . 可以打開IDE看到如下目錄

使用Mac的用戶可能發(fā)現(xiàn)找不到我們剛才使用的命令行的 code，您需要通過IDE安裝一下，點(diǎn)擊F1，輸入install，即可看到“在Path中安裝code命令”，選擇之后就ok了。

大概了解了文件目錄結(jié)構(gòu)后，我們重新回到命令行，在應(yīng)用根目錄鍵入 ng serve 可以看到應(yīng)用編譯打包后server運(yùn)行在4200端口。

打開瀏覽器輸入 http://localhost:4200 即可看到程序運(yùn)行成功啦！

自動生成的太沒有成就感了是不是，那么我們動手改一下吧。保持運(yùn)行服務(wù)的命令窗口，然后進(jìn)入VSCode，打開 src/app/app.component.ts 修改title，比如： title = "This is a hello-angular app";，保存后返回瀏覽器看一下吧，結(jié)果已經(jīng)更新了，這種熱裝載的特性使得開發(fā)變得很方便。

那么我們來為我們的app增加一個(gè)Component吧，在命令行窗口輸入 ng generate component login --inline-template --inline-style 。 顧名思義，參數(shù)generate是用來生成文件的，參數(shù)component是說明我們要生成一個(gè)組件，login呢是我們的組件名稱，你可以自己想個(gè)其他有意思的名字。后面的兩個(gè)參數(shù)是告訴angular-cli：生成組件時(shí)，請把組件的HTML模板和CSS樣式和組件放在同一個(gè)文件中（其實(shí)分開文件更清晰，但第一個(gè)例子我們還是采用inline方式了）。

是不是感覺這個(gè)命令行太長了？幸運(yùn)的是Angular團(tuán)隊(duì)也這么想，所以你可以把上面的命令改寫成 ng g c login -it -is ,也就是說可以用generate的首字母g來代替generate，用component的首字母c來代替component，類似的--inline-template的兩個(gè)詞分別取首字母變成-it

angular-cli為我們在srcapp目錄下生成了一個(gè)新文件夾login，在login目錄下生成了2個(gè)文件，其中 login.component.spec.ts 是測試文件，我們這里暫時(shí)不提。另一個(gè)是 login.component.ts 這個(gè)就是我們新建的Component了。

Angular提倡的文件命名方式是這樣的：組件名稱.component.ts ，組件的HTML模板命名為： 組件名稱.component.html，組件的樣式文件命名為： 組件名稱.component.css,大家在編碼中盡量遵循Google的官方建議。

我們新生成的Login組件源碼如下

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

//@Component是Angular提供的裝飾器函數(shù)，用來描述Compoent的元數(shù)據(jù)
//其中selector是指這個(gè)組件的在HTML模板中的標(biāo)簽是什么
//template是嵌入（inline）的HTML模板，如果使用多帶帶文件可用templateUrl
//styles是嵌入（inline）的CSS樣式，如果使用多帶帶文件可用styleUrls
@Component({
  selector: "app-login",
  template: `
    

      login Works!
    
  `,
  styles: []
})
export class LoginComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

那么這個(gè)組件建成后，我們怎么使用呢？注意上面的代碼中@Component修飾配置中的 selector: "app-login"，這意味著我們可以在其他組件的template中使用 來引用我們的這個(gè)組件。

現(xiàn)在我們打開 hello-angularsrcappapp.component.html 加入我們的組件引用

  {{title}}

保存后返回瀏覽器，可以看到我們的第一個(gè)組件也顯示出來了。

這里我們粗略介紹一些Angular的基礎(chǔ)概念，這些基礎(chǔ)概念在后面的章節(jié)中會更詳細(xì)的講解。

簡單來說模塊就是提供相對獨(dú)立功能的功能塊，每塊聚焦于一個(gè)特定業(yè)務(wù)領(lǐng)域。Angular內(nèi)建的很多庫是以模塊形式提供的，比如FormsModule封裝了表單處理，HttpModule封裝了Http的處理等等。

每個(gè)Angular應(yīng)用至少有一個(gè)模塊類 —— 根模塊，我們將通過引導(dǎo)根模塊來啟動應(yīng)用。按照約定，根模塊的類名叫做AppModule，被放在 app.module.ts 文件中。我們這個(gè)例子中的根模塊位于 hello-angularsrcappapp.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { HttpModule } from "@angular/http";

import { AppComponent } from "./app.component";
import { LoginComponent } from "./login/login.component";

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule裝飾器用來為模塊定義元數(shù)據(jù)。declarations列出了應(yīng)用中的頂層組件，包括引導(dǎo)性組件AppComponent和我們剛剛創(chuàng)建的LoginComponent。在module里面聲明的組件在module范圍內(nèi)都可以直接使用，也就是說在同一module里面的任何Component都可以在其模板文件中直接使用聲明的組件，就想我們在AppComponent的模板末尾加上 一樣。

imports引入了3個(gè)輔助模塊：

BrowserModule提供了運(yùn)行在瀏覽器中的應(yīng)用所需要的關(guān)鍵服務(wù)（Service）和指令（Directive），這個(gè)模塊所有需要在瀏覽器中跑的應(yīng)用都必須引用；

FormsModule提供了表單處理和雙向綁定等服務(wù)和指令

HttpModule提供Http請求和響應(yīng)的服務(wù)

providers列出會在此模塊中“注入”的服務(wù)（Service），關(guān)于依賴性注入會在后面章節(jié)中詳細(xì)解釋。

bootstrap指明哪個(gè)組件為引導(dǎo)性組件（本案例中的AppComponent）。當(dāng)Angular引導(dǎo)應(yīng)用時(shí)，它會在DOM中渲染這個(gè)引導(dǎo)性組件，并把結(jié)果放進(jìn)index.html的該組件的元素標(biāo)簽中（本案例中的app-root）。

  
  
  

  
  


  Loading...

Angular2通過在main.ts中引導(dǎo)AppModule來啟動應(yīng)用。針對不同的平臺，Angular提供了很多引導(dǎo)選項(xiàng)。下面的代碼是通過即時(shí)（JiT）編譯器動態(tài)引導(dǎo)，一般在進(jìn)行開發(fā)調(diào)試時(shí)，默認(rèn)采用這種方式。

//main.ts
import "./polyfills.ts";

// 連同Angular編譯器一起發(fā)布到瀏覽器
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { enableProdMode } from "@angular/core";
import { environment } from "./environments/environment";
import { AppModule } from "./app/";

if (environment.production) {
  enableProdMode();
}
//Angular編譯器在瀏覽器中編譯并引導(dǎo)該應(yīng)用
platformBrowserDynamic().bootstrapModule(AppModule);

另一種方式是使用預(yù)編譯器（AoT - Ahead-Of-Time）進(jìn)行靜態(tài)引導(dǎo)，靜態(tài)方案可以生成更小、啟動更快的應(yīng)用，建議優(yōu)先使用它，特別是在移動設(shè)備或高延遲網(wǎng)絡(luò)下。使用static選項(xiàng)，Angular編譯器作為構(gòu)建流程的一部分提前運(yùn)行，生成一組類工廠。它們的核心就是AppModuleNgFactory。引導(dǎo)預(yù)編譯的AppModuleNgFactory的語法和動態(tài)引導(dǎo)AppModule類的方式很相似。

// 不把編譯器發(fā)布到瀏覽器
import { platformBrowser } from "@angular/platform-browser";

// 靜態(tài)編譯器會生成一個(gè)AppModule的工廠AppModuleNgFactory
import { AppModuleNgFactory } from "./app.module.ngfactory";

// 引導(dǎo)AppModuleNgFactory
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

本節(jié)代碼：https://github.com/wpcfan/awe...

下一節(jié)我們再繼續(xù)，記住大叔能學(xué)會的你也能。