第一節：初識Angular-CLI
第二節：登入元件的構建
第三節：建立一個待辦事項應用
第四節：進化！模組化你的應用
第五節：多使用者版本的待辦事項應用
第六節：使用第三方樣式庫及模組優化用
第七節：給元件帶來活力
Rx--隱藏在Angular 2.x中利劍
Redux你的Angular 2應用
第八節：查缺補漏大合集(上)
第九節：查缺補漏大合集(下)
第一章：認識Angular 2.0
Angular2簡介
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等轉型過來開發前端的程式設計師，因為它的開發模型更接近於傳統強型別語言的模式，加上官方內建的元件和類庫比較完整，有官方中文網站 https://angular.cn ，學習曲線要低一些。有過Angular 1.x 開發經驗的同學要注意了，雖然只有一個版本號的差距，但2.x和1.x是完全不同的，不要奢望1.x的應用會平滑遷移到2.x。
Angular 支援大多數常用瀏覽器，包括下列版本：
| Chrome | Firefox | Edge | IE | Safari | iOS | Android | IE Mobile |
|---|---|---|---|---|---|---|---|
| 45以上 | 40以上 | 13以上 | 9以上 | 7以上 | 7以上 | 4.1以上 | 11以上 |
環境配置要求
Angular2需要node.js和npm，我們下面的例子需要node.js 6.x.x和npm 3.x.x，請使用 node -v 和 npm -v 來檢查。由於眾所周知的原因，npmjs.org 的站點訪問經常不是很順暢，這裡給出一個由淘寶團隊維護的國內映象 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的應用。它的優點是進一步遮蔽了很多配置的步驟、自動按官方推薦的模式進行程式碼組織、自動生成元件/服務等模板以及更方便的釋出和測試程式碼。目前這個工具已經正式釋出l，安裝時請使用 npm install -g @angular/cli 命令。這個安裝過程有些長，請務必等待命令列提示符重新出現。安裝好之後，我們就可以使用一個叫做 ng 的命令了，這個命令是我們後面經常要打交道的：包括建立新工程，啟動工程，編譯等。
IDE的選擇也比較多，免費的Visual Studio Code 和 Atom，收費的有WebStorm。我們這裡推薦採用 Visual Studio Code，可以到 code.visualstudio.com/ 下載 Windows/Linux/MacOS 版本。
安裝完以上這些工具，開發環境就部署好了，下面我們將開始Angular2的探險之旅。
第一個小應用 Hello Angular
那麼現在開啟一個terminal（命令列視窗），鍵入 ng new hello-angular
如上圖所示，這個命令為我們新建了一個名為“hello-angular”的工程，進入該工程目錄，鍵入 code . 可以開啟IDE看到如下目錄
使用Mac的使用者可能發現找不到我們剛才使用的命令列的 code，您需要通過IDE安裝一下，點選F1，輸入install，即可看到“在Path中安裝code命令”，選擇之後就ok了。
大概瞭解了檔案目錄結構後，我們重新回到命令列，在應用根目錄鍵入 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);複製程式碼本節程式碼：github.com/wpcfan/awes…
下一節我們再繼續，記住大叔能學會的你也能。
紙書出版了，比網上內容豐富充實了，歡迎大家訂購！
京東連結：item.m.jd.com/product/120…