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

作者：王芃 wpcfan@gmail.com

第一節：初識Angular-CLI
第二節：登錄組件的構建
 第三節：建立一個待辦事項應用
 第四節：進化！模塊化你的應用
 第五節：多用戶版本的待辦事項應用
 第六節：使用第三方樣式庫及模塊優化用
 第七節：給組件帶來活力
 Rx--隱藏在Angular 2.x中利劍
 Redux你的Angular 2應用
 第八節：查缺補漏大合集(上)
第九節：查缺補漏大合集(下)

第一節：認識Angular 2.0

前言

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

由于Google的目的是推出一個完整解決方案，所以官方默認提供的類庫（比如routing，http，依賴性注入（DI）等）非常完整，無需自己選擇。React的一大痛點就是選擇太多導致在配置尋找組件和類庫的過程中消耗太多精力，當然從另一方面看這也是其優勢，選擇眾多且自由。
官方支持TypeScript（微軟出品，是JavaScript的超集，是 JavaScript 的強類型版本）作為首選編程語言，使得開發腳本語言的一些問題可以更早更方便的找到。
RxJS友好使得響應式編程在Augular2中變得極為容易（Google開發的框架依賴這么多的微軟的產品，可見微軟的轉型還是很成功的）
支持NativeScript甚至ReactNative等進行原生Android/iOS應用開發（React支持React Native）
支持服務器端渲染（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后，請打開命令行窗口（ Windows 用戶推薦使用 PowerShell，其它平臺打開 Terminal 即可）輸入npm config set registry https://registry.npm.taobao.org 。或者直接使用淘寶團隊的 cnpm，使用下面的命令安裝 cnpm : npm install -g cnpm --registry=https://registry.npm.taobao.org。

和官方快速起步文檔給出的例子不同，我們下面要使用Angular團隊目前正在開發中的一個工具--Angular CLI 。這是一個類似于React CLI和Ember CLI的命令行工具，用于快速構建Angular2的應用。它的優點是進一步屏蔽了很多配置的步驟、自動按官方推薦的模式進行代碼組織、自動生成組件/服務等模板以及更方便的發布和測試代碼。由于目前這個工具已經release了，安裝時請使用 npm install -g @angular/cli 命令。這個安裝過程有些長，請務必等待命令行提示符重新出現。安裝好之后，我們就可以使用一個叫做 ng 的命令了，這個命令是我們后面經常要打交道的：包括創建新工程，啟動工程，編譯等。

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

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

第一個小應用 Hello Angular

那么現在開啟一個terminal（命令行窗口），鍵入 ng new hello-angular --skip-install , 然后進入 hello-angular 目錄執行 cnpm install。由于很多童鞋遇到安裝問題，推薦在新建 project 時忽略安裝 ( 加 --skip-install 參數)，然后用 cnpm 執行依賴安裝。

c1_s1_ng_new_hello-angular.png-51.7kB

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

c1_s1_vscode_project_struct.png-300.1kB

c1_s1_ng_serve.png-42.5kB

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

c1_s1_project_1st_browser.png-135.7kB

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

c1_s1_project_1st_browser_update.png-146.5kB

第一個組件

那么我們來為我們的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

image_1b27r02qlo6f11f19qg1q9k1fclm.png-30.3kB

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>

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

image_1b27qsmhp1nlrb8g1uh6cp71qcj9.png-19kB

一些基礎概念

這里我們粗略介紹一些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 視頻課上線： http://coding.imooc.com/class/123.html?mc_marking=1fdb7649e8a8143e8b81e221f9621c4a&mc_channel=banner

有問題的童鞋可以加入我的小密圈討論： http://t.xiaomiquan.com/jayRnaQ (該鏈接7天內(5月14日前)有效)

紙書出版了，比網上內容豐富充實了，歡迎大家訂購！
京東鏈接：https://item.m.jd.com/product/12059091.html?from=singlemessage&isappinstalled=0

Angular從零到一

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

Angular 從0到1 （一）

Angular 從0到1 （一）

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

第一節：認識Angular 2.0

前言

環境配置要求

第一個小應用 Hello Angular

第一個組件

一些基礎概念

什么是模塊？

引導過程

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

Angular 從0到1 （一）

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

第一節：認識Angular 2.0

前言

環境配置要求

第一個小應用 Hello Angular

第一個組件

一些基礎概念

什么是模塊？

引導過程

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

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

什么是模塊？