內容簡介
《Angular 2開發實戰 基於TypeScript》幫助熟練使用Angular 1或其他Web框架的開發者掌握Angular 2的使用。首先從一個線上拍賣應用程式開始,探索Angular 2是如何工作的。隨著學習的深入,將學習如何使用TypeScript編寫能夠類型自我感知(type-aware)的類、接口以及泛型。《Angular 2開發實戰 基於TypeScript》注重實踐,涵蓋了在真實套用場景中進行開發所需要關注的問題,例如數據和視圖、用戶與表單的互動、與伺服器端通信以及如何測試和部署Angular 2應用程式。
圖書目錄
第1章 Angular 2介紹 1
1.1 JavaScript框架和庫的示例1
1.1.1 重量級框架 2
1.1.2 輕量級框架 2
1.1.3 庫 2
1.1.4 什麼是Node.js 4
1.2 AngularJS高級概述4
1.3 Angular高級概述 7
1.3.1 簡化代碼 7
1.3.2 性能提升 12
1.4 Angular開發者工具 13
1.5 如何使用Angular 16
1.6 線上拍賣示例介紹 17
1.7 本章小結 19
第2章 Angular入門 20
2.1 第一個Angular應用程式 20
2.1.1 TypeScript版本的Hello World 21
2.1.2 ES5版本的Hello World 24
2.1.3 ES6版本的Hello World 26
2.1.4 啟動應用程式 27
2.2 Angular應用程式的構建塊 28
2.2.1 模組 28
2.2.2 組件 29
2.2.3 指令 31
2.2.4 數據綁定簡介 32
2.3 通用模組載入器SystemJS 32
2.3.1 模組載入器概覽 33
2.3.2 模組載入器與<script>標籤 33
2.3.3 SystemJS入門 34
2.4 選擇包管理器 39
2.4.1 對比npm和jspm 40
2.4.2 使用npm開始一個Angular項目 41
2.5 動手實踐:開始線上拍賣應用程式 47
2.5.1 初始化項目設定 48
2.5.2 開發首頁 49
2.5.3 啟動線上拍賣應用程式 56
2.6 本章小結 57
第3章 使用Angular路由導航 58
3.1 路由基礎 58
3.1.1 定位策略 60
3.1.2 客戶端導航的構建塊 61
3.1.3 使用navigate( )導航到路由 67
3.2 向路由傳遞數據 69
3.2.1 從ActivatedRoute對象中提取參數 69
3.2.2 傳遞靜態數據給路由 72
3.3 子路由 73
3.4 守護路由 79
3.5 開發一個具有多個路由插座的單頁面套用 84
3.6 將應用程式分解到模組中 87
3.7 延遲載入模組 89
3.8 實踐:為線上拍賣應用程式添加導航 91
3.8.1 創建ProductDetailComponent 92
3.8.2 創建HomeComponent和代碼重構 93
3.8.3 簡化ApplicationComponent 94
3.8.4 將RouterLink添加到ProductItemComponent95
3.8.5 修改根模組,添加路由 97
3.8.6 運行線上拍賣應用程式 97
3.9 本章小結 98
第4章依賴注入 99
4.1 依賴注入模式和控制反轉模式 99
4.1.1 依賴注入模式 100
4.1.2 控制反轉模式 100
4.1.3 依賴注入的好處 100
4.2 注入器和provider 103
4.3 使用Angular DI的示例應用程式 106
4.3.1 注入產品服務 106
4.3.2 注入Http服務 109
4.4 輕鬆切換可注入(組件/對象) 110
4.4.1 使用useFactory和useValue屬性聲明providers 113
4.4.2 使用OpaqueToken 116
4.5 注入器的層級結構 117
4.6 實踐:在線上拍賣應用程式中使用DI 119
4.6.1 更改代碼,將產品ID作為參數傳遞 122
4.6.2 修改ProductDetailComponent 122
4.7 本章小結 126
第5章 綁定、observable和管道 127
5.1 數據綁定 127
5.1.1 事件綁定 128
5.1.2 屬性綁定和特性綁定 129
5.1.3 模板中的綁定 133
5.1.4 雙向數據綁定 136
5.2 回響式編程和observable 138
5.2.1 什麼是observable和觀察者 139
5.2.2 observable事件流 141
5.2.3 取消observables 145
5.3 管道 148
5.4 實踐:線上拍賣應用程式中
產品的過濾功能 151
5.5 本章小結 154
第6章 實現組件通信 156
6.1 組件間通信 156
6.1.1 輸入和輸出屬性 157
6.1.2 Mediator模式 163
6.1.3 使用ngContent在運行時修改模板 167
6.2 組件生命周期 172
6.3 變更檢測高級概述 178
6.4 如何暴露子組件中的API 180
6.5 實踐:為線上拍賣應用程式添加評分功能 182
6.6 本章小結 189
第7章使用表單 190
7.1 HTML表單概述191
7.1.1 標準瀏覽器功能 191
7.1.2 Angular Forms API 193
7.2 模板驅動表單 194
7.2.1 指令概述 194
7.2.2 豐富HTML表單 196
7.3 回響式表單 198
7.3.1 表單模型 198
7.3.2 表單指令 199
7.3.3 重構示例表單 203
7.3.4 使用FormBuilder 204
7.4 表單驗證 205
7.5 動手實踐:給搜尋表單添加驗證 214
7.5.1 修改根模組以添加Forms API支持 214
7.5.2 將一個類別列表添加到SearchComponent 215
7.5.3 創建表單模型 216
7.5.4 重構模板 216
7.5.5 實現onSearch( )方法 218
7.5.6 啟動線上拍賣應用程式 218
7.6 本章小結 218
第8章 使用HTTP和WebSocket與伺服器互動 219
8.1 簡述Http對象的API 219
8.2 使用Node和TypeScript創建Web伺服器 222
8.2.1 創建一台簡單的Web伺服器 222
8.2.2 提供JSON 225
8.2.3 TypeScript實時重新編譯與代碼重新載入 226
8.2.4 添加提供產品的RESTful API 227
8.3 將Angular與Node結合在一起 229
8.3.1 伺服器上的靜態資源 229
8.3.2 使用Http對象進行GET請求 232
8.3.3 在模板中使用AsyncPipe展開observables 234
8.3.4 將HTTP注入到服務中 235
8.4 通過WebSocket進行客戶端-伺服器通信 239
8.4.1 從Node伺服器推送數據 239
8.4.2 將WebSocket轉換成observable 243
8.5 動手實踐:實現產品搜尋和出價通知 249
8.5.1 使用HTTP實現產品搜尋 250
8.5.2 使用WebSocket廣播拍賣出價 254
8.6 本章小結 258
第9章 Angular應用程式單元測試 259
9.1 了解Jasmine 260
9.1.1 測試什麼 262
9.1.2 如何安裝Jasmine 262
9.2 Angular測試庫都包括了什麼 264
9.2.1 測試服務 265
9.2.2 使用路由測試導航 266
9.2.3 測試組件 267
9.3 測試天氣示例應用程式 267
9.3.1 配置SystemJS 269
9.3.2 測試天氣路由 270
9.3.3 測試天氣服務 272
9.3.4 天氣測試組件 275
9.4 使用Karma運行測試 278
9.5 實踐:線上拍賣應用程式單元測試 281
9.5.1 測試ApplicationComponent283
9.5.2 測試ProductService 283
9.5.3 測試StarsComponent 284
9.5.4 運行測試 287
9.6 本章小結 288
第10章 使用Webpack打包並部署應用程式 289
10.1 了解Webpack 291
10.1.1 使用Webpack的Hello World 292
10.1.2 如何使用載入器 296
10.1.3 如何使用外掛程式 300
10.2 為Angular創建基本的Webpack 配置 300
10.2.1 npm run build 303
10.2.2 npm start 305
10.3 創建開發和生產配置 305
10.3.1 開發(環境)配置 306
10.3.2 生產(環境)配置 307
10.3.3 自定義的類型定義檔案309
10.4 Angular CLI概述312
10.4.1 用Angular CLI啟動新項目 312
10.4.2 CLI命令313
10.5 動手實踐:使用Webpack 部署線上拍賣應用程式 314
10.5.1 啟動Node伺服器 315
10.5.2 啟動線上拍賣應用程式的客戶端 316
10.5.3 使用Karma運行測試 319
10.6 本章小結 322
附錄A ECMAScript 6概述 323
附錄B 作為Angular應用程式語言的TypeScript 362