Angular2 從0到1 （一）

史上最簡單Angular2教程，大叔都學會了

作者：王芃 [e-mail]

第一節：Angular 2.0 從0到1 （一）
第二節：Angular 2.0 從0到1 （二）
第三節：Angular 2.0 從0到1 （三）
第四節：Angular 2.0 從0到1 （四）
第五節：Angular 2.0 從0到1 （五）
第六節：Angular 2.0 從0到1 （六）
第七節：Angular 2.0 從0到1 （七）
第八節：Angular 2.0 從0到1 （八）
番外：Angular 2.0 從0到1 （八）
番外：Angular 2.0 從0到1 Rx—Redux你的Angular 2應用

第一節：認識Angular 2.0

前言

Angular 2 是Google推出的一個跨平台全終端的框架，和目前比較火的React和Vue.js相比，有如下優點：

1. 由於Google的目的是推出一個完整解決方案，所以官方默認提供的類庫（比如routing，http，依賴性注入（DI）等）非常完整，無需自己選擇。React的一大痛點就是選擇太多導致在配置尋找組件和類庫的過程中消耗太多精力，當然從另一方面看這也是其優勢，選擇眾多且自由。
2. 官方支持TypeScript（微軟出品，是JavaScript的超集，是 JavaScript 的強類型版本）作為首選編程語言，使得開發腳本語言的一些問題可以更早更方便的找到。
3. RxJS友好使得響應式編程在Augular2中變得極為容易（Google開發的框架依賴這么多的微軟的產品，可見微軟的轉型還是很成功的）
4. 支持NativeScript甚至ReactNative等進行原生Android/iOS應用開發（React支持React Native）
5. 支持服務器端渲染（React也支持）

但總體來講，個人認為Angular2更適合從原生App開發或后端Java/.Net等轉型過來開發前端的程序員，因為它的開發模型更接近於傳統強類型語言的模式，加上官方內建的組件和類庫比較完整，有官方中文站點，學習曲線要低一些。有過Angular 1.x 開發經驗的同學要注意了，雖然只有一個版本號的差距，但2.x和1.x是完全不同的，不要奢望1.x的應用會平滑遷移到2.x。

環境配置要求

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

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

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

安裝完以上這些工具，開發環境就部署好了，下面我們將開始Angular2的探險之旅。

第一個小應用 Hello Angular

那么現在開啟一個terminal（命令行窗口），鍵入 ng new hello-angular
如上圖所示，這個命令為我們新建了一個名為“hello-angular”的工程，進入該工程目錄，鍵入 code . 可以打開IDE看到如下目錄

|— .editorconfig //通用的編輯器配置文件，以后換IDE時可以保持一些設置的平滑遷移
|— .gitignore //需要Git忽略的文件列表
|— angular-cli.json //Angular-CLI配置文件
|— karma.conf.js //Karma單元測試配置文件
|— package.json //node打包文件
|— protractor.conf.js //端到端測試配置文件（集成測試）
|— README.md
|— tslint.json //代碼Lint靜態檢查的配置
|— e2e //端到端測試代碼目錄
| |— app.e2e-spec.ts
| |— app.po.ts
| |— tsconfig.json
|— src //源碼
|— favicon.ico //站點收藏圖標
|— index.html //入口頁面
|— main.ts //入口ts文件
|— polyfills.ts //針對瀏覽器能力增強的polyfills引用文件
|— styles.css //全局樣式文件
|— test.ts //測試入口文件
|— tsconfig.json //TypeScript配置文件
|— typings.d.ts //項目中使用的TypeScript類型定義引用文件
|— app //應用目錄
| |— app.component.css //引導性組件的樣式文件
| |— app.component.html //引導性組件的HTML模板
| |— app.component.spec.ts //引導性組件測試文件
| |— app.component.ts //系統引導性組件
| |— app.module.ts //應用根模塊
| |— index.ts //應用入口
|— assets //站點資源文件夾
| |— .gitkeep
|— environments
|— environment.prod.ts //生產環境配置文件
|— environment.ts //環境配置
大概了解了文件目錄結構后，我們重新回到命令行，在應用根目錄鍵入 ng serve 可以看到應用編譯打包后server運行在4200端口。

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

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

第一個組件

那么我們來為我們的app增加一個Component吧，在命令行窗口輸入 ng generate component login --inline-template --inline-style 。 顧名思義，參數generate是用來生成文件的，參數component是說明我們要生成一個組件，login呢是我們的組件名稱，你可以自己想個其他有意思的名字。后面的兩個參數是告訴angular-cli：生成組件時，請把組件的HTML模板和CSS樣式和組件放在同一個文件中（其實分開文件更清晰，但第一個例子我們還是采用inline方式了）。是不是感覺這個命令行太長了？幸運的是Angular團隊也這么想，所以你可以把上面的命令改寫成 ng g c login -it -is ,也就是說可以用generate的首字母g來代替generate，用component的首字母c來代替component，類似的--inline-template的兩個詞分別取首字母變成-it

angular-cli為我們在\src\app目錄下生成了一個新文件夾login，在login目錄下生成了2個文件，其中 login.component.spec.ts 是測試文件，我們這里暫時不提。另一個是 login.component.ts 這個就是我們新建的Component了。Angular提倡的文件命名方式是這樣的：組件名稱.component.ts ，組件的HTML模板命名為： 組件名稱.component.html，組件的樣式文件命名為： 組件名稱.component.css,大家在編碼中盡量遵循Google的官方建議。

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

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

//@Component是Angular提供的裝飾器函數，用來描述Compoent的元數據
//其中selector是指這個組件的在HTML模板中的標簽是什么
//template是嵌入（inline）的HTML模板，如果使用單獨文件可用templateUrl
//styles是嵌入（inline）的CSS樣式，如果使用單獨文件可用styleUrls
@Component({
  selector: 'app-login',
  template: `
    <p>
      login Works!
    </p> `, styles: [] }) export class LoginComponent implements OnInit { constructor() { } ngOnInit() { } }

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

現在我們打開 hello-angular\src\app\app.component.html 加入我們的組件引用

<h1>
  {{title}}
</h1>
<app-login></app-login>

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

一些基礎概念

這里我們粗略介紹一些Angular的基礎概念，這些基礎概念在后面的章節中會更詳細的講解。

什么是模塊？

簡單來說模塊就是提供相對獨立功能的功能塊，每塊聚焦於一個特定業務領域。Angular內建的很多庫是以模塊形式提供的，比如FormsModule封裝了表單處理，HttpModule封裝了Http的處理等等。每個Angular應用至少有一個模塊類 —— 根模塊，我們將通過引導根模塊來啟動應用。按照約定，根模塊的類名叫做AppModule，被放在 app.module.ts 文件中。我們這個例子中的根模塊位於 hello-angular\src\app\app.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裝飾器用來為模塊定義元數據。declarations列出了應用中的頂層組件，包括引導性組件AppComponent和我們剛剛創建的LoginComponent。在module里面聲明的組件在module范圍內都可以直接使用，也就是說在同一module里面的任何Component都可以在其模板文件中直接使用聲明的組件，就想我們在AppComponent的模板末尾加上 <app-login></app-login> 一樣。

imports引入了3個輔助模塊：

• BrowserModule提供了運行在瀏覽器中的應用所需要的關鍵服務（Service）和指令（Directive），這個模塊所有需要在瀏覽器中跑的應用都必須引用；
• FormsModule提供了表單處理和雙向綁定等服務和指令
• HttpModule提供Http請求和響應的服務

providers列出會在此模塊中“注入”的服務（Service），關於依賴性注入會在后面章節中詳細解釋。
bootstrap指明哪個組件為引導性組件（本案例中的AppComponent）。當Angular引導應用時，它會在DOM中渲染這個引導性組件，並把結果放進index.html的該組件的元素標簽中（本案例中的app-root）。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>HelloAngular</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

引導過程

Angular2通過在main.ts中引導AppModule來啟動應用。針對不同的平台，Angular提供了很多引導選項。下面的代碼是通過即時（JiT）編譯器動態引導，一般在進行開發調試時，默認采用這種方式。

//main.ts
import './polyfills.ts';

// 連同Angular編譯器一起發布到瀏覽器
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編譯器在瀏覽器中編譯並引導該應用
platformBrowserDynamic().bootstrapModule(AppModule);

另一種方式是使用預編譯器（AoT - Ahead-Of-Time）進行靜態引導，靜態方案可以生成更小、啟動更快的應用，建議優先使用它，特別是在移動設備或高延遲網絡下。使用static選項，Angular編譯器作為構建流程的一部分提前運行，生成一組類工廠。它們的核心就是AppModuleNgFactory。引導預編譯的AppModuleNgFactory的語法和動態引導AppModule類的方式很相似。

// 不把編譯器發布到瀏覽器
import { platformBrowser } from '@angular/platform-browser';

// 靜態編譯器會生成一個AppModule的工廠AppModuleNgFactory
import { AppModuleNgFactory } from './app.module.ngfactory';

// 引導AppModuleNgFactory
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

本節代碼：https://github.com/wpcfan/awesome-tutorials/tree/chap01/angular2/ng2-tut

下一節我們再繼續，記住大叔能學會的你也能。

第一節：Angular 2.0 從0到1 （一）
第二節：Angular 2.0 從0到1 （二）
第三節：Angular 2.0 從0到1 （三）
第四節：Angular 2.0 從0到1 （四）
第五節：Angular 2.0 從0到1 （五）
第六節：Angular 2.0 從0到1 （六）
第七節：Angular 2.0 從0到1 （七）
第八節：Angular 2.0 從0到1 （八）
番外：Angular 2.0 從0到1 （八）
番外：Angular 2.0 從0到1 Rx—Redux你的Angular 2應用

​