揭秘 Angular, 2/e 揭秘Angular(第2版)

廣發證券互聯網金融技術團隊，是早期擁抱Angular 的堅定踐行者。

作為全新一代的證券業IT 研發組織，團隊致力於用好的技術打造行業方案、支持業務創新。

我們熱愛開源技術、信奉敏捷方法、編寫優雅代碼、關注用戶體驗，我們喜歡互聯網工程師文化，我們在技術創新中尋找到樂趣。

第一部分入門篇
1前端風雲2 
1.1故事的起點2 
1.2 AJAX王者歸來3 
1.3工具庫的流行3 
1.4百家爭鳴3 
1.5走進前端新時代4 
1.6小結6 

2 Angular簡介7 
2.1歷史回顧7 
2.1.1 AngularJS 1.x起源7 
2.1.2 AngularJS 1.x迭代之路8 
2.1.3初生的Angular 9 
2.1.4快速發展的Angular 10 
2.1.5 Angular 4和後續語義版本11 
2.1.6開發語言之選13 
2.2 Angular簡述14 
2.2.1核心概念14 
2.2.2平台簡介16 
2.2.3平台亮點18 
2.3小結19 

3 TypeScript入門20 
3.1 TypeScript概述20 
3.1.1概述20 
3.1.2安裝21 
3.2基本類型22 
3.2.1布爾類型22 
3.2.2數字類型22 
3.2.3字符串類型23
3.2.4數組類型23 
3.2.5元組類型23 
3.2.6枚舉類型23 
3.2.7任意值類型24 
3.2.8 null和undefined 24 
3.2.9 void類型25 
3.2.10 never類型26 
3.3聲明和解構26 
3.3.1 let聲明27 
3.3.2 const聲明28 
3.3.3解構28 
3.4函數30 
3.4.1函數定義30 
3.4.2可選參數30 
3.4.3默認參數31 
3.4.4剩餘參數32 
3.4.5函數重載32 
3.4.6箭頭函數33 
3.5類34 
3.5.1類的例子34 
3.5.2繼承與多態34 
3.5.3修飾符35 
3.5.4參數屬性37 
3.5.5靜態屬性37 
3.5.6抽像類38 
3.6模塊39 
3.6.1概述39 
3.6.2模塊導出方式39 
3.6.3模塊導入方式40 
3.6.4模塊的默認導出41 
3.6.5模塊設計原則42 
3.7接口44
3.7.1概述44 
3.7.2屬性類型接口44 
3.7.3函數類型接口45 
3.7.4可索引類型接口46 
3.7.5類類型接口46 
3.7.6接口擴展47 
3.8裝飾器48 
3.8.1概述48 
3.8 .2方法裝飾器49 
3.8.3類裝飾器50 
3.8.4參數裝飾器52 
3.8.5屬性裝飾器53 
3.8.6裝飾器組合53 
3.9泛型55 
3.10 TypeScript周邊56 
3.10.1編譯配置文件56 
3.10 .2聲明文件57 
3.10.3編碼工具58 
3.10.4展望未來59 
3.11小結59 

4快速入門60 
4.1 Hello World例子60 
4.1.1準備工作60 
4.1.2構建項目61 
4.2通訊錄例子66 
4.2.1背景介紹66 
4.2.2架構設計68 
4.3小結74 

第二部分深入篇
5 Angular架構總覽76 
5.1核心模塊介紹76 
5.1.1組件77
5.1.2模板81 
5.1.3指令83 
5.1.4服務84 
5.1.5依賴注入84 
5.1.6路由86 
5.2應用模塊89 
5.3源碼結構介紹92 
5.4小結93 

6組件94 
6.1概述94 
6.1.1模塊化介紹94 
6.1.2組件化標準96 
6.1.3 Angular的組件99 
6.2組件基礎100 
6.2.1創建組件的步驟100 
6.2.2組件的基礎構成101 
6.2.3組件與模塊108 
6.3組件交互113 
6.3.1組件的輸入、輸出屬性113 
6.3.2父組件向子組件傳遞數據114 
6.3.3子組件向父組件傳遞數據120 
6.3.4其他組件交互方式121 
6.4組件內容嵌入124 
6.5組件生命週期128 
6.5.1概述128 
6.5.2生命週期鉤子128 
6.6變化監測130 
6.6.1數據變化的源頭131 
6.6.2變動通知機制132 
6.6.3變化監測的響應處理134 
6.7擴展閱讀140
6.7.1元數據一覽表140 
6.7.2元數據說明141 
6.7.3深入理解Zone.js 150 
6.7.4不依賴Zone.js的Angular 154 
6.8小結155 

7模板156 
7.1模板語法概覽156 
7.2數據綁定158 
7.2.1概述158 
7.2.2插值160 
7.2.3模板表達式160 
7.2.4屬性綁定162 
7.2.5事件綁定165 
7.2.6雙向數據綁定168 
7.2.7輸入和輸出屬性169 
7.3內置指令170 
7.3.1 NgClass 170 
7.3.2 NgStyle 170 
7.3.3 NgIf 171 
7.3.4 NgSwitch 172 
7.3.5 NgFor 172 
7.4表單173 
7.4.1模板表單例子174 
7.4.2表單指令175 
7.4.3自定義表單樣式184 
7.4.4表單校驗186 
7.5管道189 
7.5.1管道介紹189 
7.5.2內置管道190 
7.5.3自定義管道196
7.5.4管道的變化監測198 
7.6擴展閱讀202 
7.6.1安全導航操作符202 
7.6.2雙向綁定的原理202 
7.7小結204 

8指令206 
8.1概述206 
8.1.1指令分類208 
8.1.2內置指令210 
8.2自定義屬性指令219 
8.2.1實現屬性指令219 
8.2.2為指令綁定輸入221 
8.2.3響應用戶操作223 
8.3自定義結構指令224 
8.3.1實現結構指令225 
8.3.2模板標籤與星號前綴227 
8.3.3 NgIf指令原理229 
8.4擴展閱讀231 
8.5小結235 

9服務與RxJS 237 
9.1 Angular服務237 
9.1.1概述237 
9.1.2使用場景238 
9.2 HTTP服務242 
9.2.1 HTT PModule 242 
9.2.2 HTT PClientModule 254 
9.3響應式編程262 
9.3.1概述262 
9.3.2 ReactiveX 264 
9.4 RxJS 266
9.4.1創建Observable對象266 
9.4.2使用RxJS處理複雜場景266 
9.4.3 RxJS和Promise的對比267 
9.4.4 “冷”模式下的Observable 268 
9.4.5 RxJS中的Operator 269 
9.4.6 Angular中的RxJS 273 
9.5小結277 

10依賴注入278 
10.1依賴注入介紹279 
10.2 Angular依賴注入282 
10.2.1概述282 
10.2.2在組件中註入服務285 
10.2.3在服務中註入服務287 
10.2.4在模塊中註入服務288 
10.2.5層級註入290 
10.2.6注入到派生組件295 
10.2.7限定方式的依賴注入297 
10.3 Provider 300 
10.3.1概述300 
10.3.2 Provider註冊方式302 
10.4擴展閱讀305 
10.5小結308 

11路由309 
11.1概述309 
11.2基本用法311 
11.2.1路由配置311 
11.2.2創建根路由模塊312
11.2.3添加RouterOutlet指令312 
11.3路由策略313 
11.3.1 HashLocationStrategy介紹314 
11.3.2 PathLocationStrategy介紹315 
11.4路由跳轉316 
11.4.1使用指令跳轉317 
11.4.2使用代碼跳轉319 
11.5路由參數321 
11.5. 1 Path參數321 
11.5.2 Query參數324 
11.5.3 Matrix參數326 
11.6子路由和附屬Outlet 326 
11.6.1子路由326 
11.6.2附屬Outlet 328 
11.7路由攔截330 
11.7.1激活攔截與反激活攔截330 
11.7 .2數據預加載攔截334 
11.8模塊的延遲加載337 
11.8.1延遲加載實現337 
11.8.2模塊預加載339 
11.8.3模塊加載攔截341 
11.9小結342 

12測試343 
12.1概述343 
12.2單元測試344 
12.2.1概述344 
12.2.2常用測試框架345 
12.2.3 Jasmine介紹345
12.2.4 Karma介紹350 
12.2.5 Karma結合Jasmine測試350 
12.3 Angular單元測試355 
12.3.1概述355 
12.3.2獨立單元測試358 
12.3.3測試工具集362 
12.4端到端測試370 
12.4.1概述370 
12.4 .2 Protractor介紹371 
12.5小結374 

第三部分實戰篇
13問卷調查系統簡介376 
13.1項目背景376 
13.2主要特性377 
13.2.1首頁和幫助頁378 
13.2.2問