Angular 權威教程 图灵程序设计丛书:Angular权威教程

作者:[美]阿里·勒納（Ari Lerner）、 [巴西]費利佩·庫裡（Felipe Coury）、 [美]內特·默里（Nate Murray）、 [巴西]卡洛斯·塔沃爾達（Carlos Taborda)  譯者:Nice Angular

Ari Lerner 
全棧工程師，擁有多年Angular經驗，自辦並運營Angular電子報ng-newsletter.com，在知名矽谷工程師培訓學校Hack Reactor擔任AngularJS講師。Fullstack.io創始人。

Felipe Coury 
Gistia Labs聯合創始人兼CTO。

Nate Murray 
全棧工程師，曾任職於IFTTT，擁有數據挖掘和增量Web服務等方面的背景。

Carlos Taborda 
Gistia Labs聯合創始人兼主管。

第1章編寫你的第一個Angular Web應用
1.1仿製Reddit網站1 
1.2起步3 
1.2.1 TypeScript 3 
1.2.2 angular-cli 3 
1.2.3示例項目4 
1.3運行應用7 
1.3.1製作Component 8 
1.3 .2導入依賴9 
1.3.3 Component註解10 
1.3.4用templateUrl添加模板11 
1.3.5添加template 11 
1.3.6用styleUrls添加CSS樣式12 
1.3.7加載組件12 
1.4把數據添加到組件中13 
1.5使用數組15 
1.6使用UserItemComponent組件18 
1.6.1渲染UserItemComponent 18 
1.6.2接收輸入19 
1.6.3傳入Input值20 
1.7 “啟動”速成班21 
1.8擴展你的應用22 
1.8.1添加CSS 24 
1.8.2應用程序組件24 
1.8.3添加互動26 
1.8.4添加文章組件29 
1.9渲染多行36 
1.9.1創建Article類36 
1.9.2存儲多篇文章40 
1.9.3使用inputs配置ArticleComponent 41 
1.9.4渲染文章列表42 
1.10添加新文章44 
1.11最後的修整44 
1.11.1顯示文章所屬的域名44 
1.11.2基於分數重新排序45 
1.12全部代碼45 
1.13總結45 
1.14獲得幫助46 

第2章TypeScript 47 
2.1 Angula r是用TypeScript構建的47 
2.2 TypeScript提供了哪些特性48 
2.3類型49 
2.4內置類型50 
2.4.1字符串50 
2.4.2數字50 
2.4.3布爾類型51 
2.4.4數組51 
2.4.5枚舉51 
2.4 .6任意類型52 
2.4.7 “無”類型52 
2.5類52 
2.5.1屬性52 
2.5.2方法53 
2.5.3構造函數54 
2.5.4繼承55 
2.6工具57 
2.6.1胖箭頭函數57 
2.6.2模板字符串58 
2.7總結59 

第3章Angular的工作原理60 
3.1應用60 
3.1.1主導航組件61 
3.1.2麵包屑導航組件61 
3.1.3產品列表組件62 
3.2產品數據模型64 
3.3組件64 
3.4組件註解66 
3.4.1組件selector 66 
3.4.2組件template 67 
3.4.3添加產品67 
3.4.4用模板綁定來查看產品68 
3.4.5添加更多產品69 
3.4.6選擇一個產品70 
3.4.7用<products-list>列出產品73 
3.5.1設置ProductsList的@Component配置項73 
3.5.2組件的輸入74 
3.5.3組件的輸出77 
3.5.4觸發自定義事件78 
3.5.5編寫ProductsList的控制器類79 
3.5.6編寫ProdctsList的視圖模板81 
3.6產品條目組件83 
3.6. 1產品條目的組件配置83 
3.6.2產品條目組件的定義類84 
3.6.3產品條目組件的template 84 
3.6.4完整的ProductRow代碼清單85 
3.8價格展示組件86 
3.9產品分類組件87 
3.10創建NgModule並啟動應用88 
3.11完整的項目89 
3.12關於數據架構的一點說明90 

第4章內置指令91 
4.1簡介91 
4.2 ngIf 91 
4.3 ngSwitch 92 
4.4 ngStyle 93 
4.5 ngClass 95 
4.6 ngFor 98 
4.7 ngNonBindable 102 
4.8總結102 

第5章Angular中的表單103 
5.1表單——既重要，又復雜103 
5.2 FormControl和FormGroup 103 
5.2.1 FormControl 104 
5.2.2 FormGroup 104 
5.3我們的第一個表單105 
5.3.1加載FormsModule 106 
5.3.2簡易SKU表單：@ Component註解107 
5.3.3簡易SKU表單：template 107 
5.3.4簡易SKU表單：組件定義類110 
5.4使用FormBuilder 111 
5.5響應式表單FormBuilder 112 
5.5.1使用FormBuilder 112 
5.5.2在視圖中使用myForm 113 
5.5. 3試試看114 
5.6添加驗證115 
5.6.1顯式地把sku設置為實例變量116 
5.6.2自定義驗證 器120 
5.7監聽變化121 
5.8 ngModel 122 
5.9總結124 

第6章HTTP 125 
6.1簡介125 
6.2使用@angular/http 126 
6.3基本請求127 
6.3.1構建SimpleHTTPComponent的@Component 127 
6.3.2構建SimpleHTTPComponent的template 128 
6.3. 3構建SimpleHTTPComponent控制器128 
6.3.4完整的SimpleHTTPComponent 130 
6.4編寫YouTubeSearchComponent 130 
6.4.1編寫SearchResult 132 
6.4.2編寫YouTubeService 132 
6.4.3編寫SearchBox 140 
6.4.4編寫SearchResultComponent 145 
6.4.5編寫YouTubeSearchComponent 147 
6.5 @angular /http API 150 
6.5.1發起一個POST請求150 
6.5.2 PUT/PATCH/DELETE/HEAD 150 
6.5.3 RequestOptions 151 
6.6總結151 

第7章路由152 
7.1為什麼需要路由152 
7.2客戶端路由的工作原理153 
7.2 .1初級階段：使用錨標記153 
7.2.2進化：HTML5客戶端路由154 
7.3編寫第一個路由配置155 
7.4 Angular路由的組成部件155 
7.4.1導入155 
7.4.2路由配置155 
7.4.3安裝路由配置156 
7.4.4使用<router-outlet>調用RouterOutlet指令157 
7.4. 5使用[routerLink]調用routerLink指令158 
7.5整合159 
7.5.1創建組件160 
7.5.2應用程序組件161 
7.5.3配置路由163 
7.6路由策略164 
7.7路徑定位策略165 
7.8運行應用程序165 
7.9路由參數167 
7.10音樂搜索應用168 
7.10.1首要步驟169 
7.10.2 SpotifyService 170 
7.10.3 SearchComponent 171 
7.10.4嘗試搜索179 
7.10.5 TrackComponent 180 
7.10.6音樂搜索應用小結182 
7.11路由器鉤子182 
7.11.1 AuthService 183 
7.11. 2 LoginComponent 184 
7.11.3 ProtectedComponent組件和路由守衛186 
7.12嵌套路由190 
7.12.1配置路由191 
7.12.2 ProductsComponent組件191 
7.13總結194 

第8章依賴注入195 
8.1注入示例：PriceService 196 
8.2 “別打給我們……” 197 
8.3依賴注入的部件199 
8.4嘗試注入器200 
8.5用NgModule提供依賴201 
8.6提供者202 
8.6.1使用類202 
8.6.2使用工廠203 
8.6.3使用值205 
8.6.4使用別名205 
8.7應用中的依賴注入205 
8.8使用注入器207 
8.9替換值211 
8.10 NgModule 215 
8.10.1 NgModule與JavaScript模塊215 
8.10.2編譯器與組件215 
8.10.3依賴注入與提供者216 
8.10.4組件可見性217 
8.10.5指定提供者218 
8.11總結219 

第9章Angular數據架構220 

第10章使用可觀察對象的數據架構，第1部分：服務222 
10.1可觀察對象和RxJS 222 
10.1.1注意：一些必備的RxJS相關知識222 
10.1.2學習響應式編程和RxJS 223 
10.2聊天應用概覽224 
10.2. 1組件225 
10.2.2數據模型226 
10.2.3服務226 
10.2.4總結226 
10.3實現數據模型227 
10.3.1 User 227 
10.3.2 Thread 227 
10.3.3 Message 228 
10.4實現UserService 228 
10.4.1 currentUser流229 
10.4 .2設置新用戶230 
10.4.3 UserService.ts 231 
10.5 MessagesService 231 
10.5.1 newMessages流231 
10.5.2 messages流233 
10.5.3操作流模式233 
10.5.4共享流234 
10.5.5把Message對象添加到messages流中235 
10.5.6完整的MessagesService 238 
10.5.7試用MessagesService 241 
10.6 ThreadsService 242 
10.6.1當前一組Thread的映射（threads流） 242 
10.6.2按時 逆序排列的Thread列表（orderedthreads流） 246 
10.6.3當前已選的Thread（currentThread流） 246 
10.6.4當前已選Thread的Message列表（currentThreadMessages流） 248 
10.6.5完整的ThreadsService 250 
10.7總結251 

第11章使用可觀察對象的數據架構，第2部分：視圖組件252 
11.1構建視圖：頂層組件ChatApp 252 
11.2 ChatThreads組件254 
11.2.1 ChatThreads控制器255 
11.2.2 ChatThreads的template 256 
11.3.1 ChatThread控制器和ngOnInit 257 
11.3.2 ChatThread的template 258 
11.3.3 ChatThread的完整代碼258 
11.4 ChatWindow組件259 
11.4.1 ChatWindow組件類屬性260 
11.4.2 ChatWindow的ngOnInit 261 
11.4.3 ChatWindow的sendMessage 261 
11.4.4 ChatWindow的onEnter 262 
11.4 .5 ChatWindow的scrollToBottom 262 
11.4.6 ChatWindow的template 263 
11.4.7處理鍵盤動作264 
11.4.8使用ngModel 264 
11.4.9點擊Send按鈕265 
11.4.10完整的ChatWindow組件267 
11.5.1設置incoming屬性268 
11.5. 2 ChatMessage的template 270 
11.6 ChatNavBar組件27 3 
11.6.1 ChatNavBar的@Component 273 
11.6.3 ChatNavBar的template 274 
11.6.4完整的ChatNavBar組件275 
11.7總結276 
11.8更進一步277 

第12章基於TypeScript的Redux簡介278 
12.1 Redux 279 
12.2 Redux核心概念280 
12.2. 1 reducer是什麼280 
12.2.2定義Action和Reducer的接口281 
12.2.3創建第一個Reducer 281 
12.2.4運行第一個Reducer 282 
12.2.5使用action調整計數器283 
12.2.6 reducer的switch 284 
12.2. 7 action的“參數” 285 
12.3保存state 286 
12.3.1使用store 287 
12.3.2使用subscribe進行通知287 
12.3.3 Redux核心290 
12.4消息應用291 
12.4.1消息應用的state 291 
12.4.2消息應用的action 292 
12.4.3消息應用的reducer 292 
12.4.4試用action 295 
12.4.5 action creator 296 
12.4.6使用真正的Redux 297 
12.5在Angular中使用Redux 299 
12.6規劃應用299 
12.7組建Redux 300 
12.7.1定義應用的state 300 
12.7.2定義reducer 301 
12.7.3定義action creator 301 
12.7.4創建store 302 
12.8 CounterApp組件303 
12.9提供store 304 
12.10啟動應用305 
12.11 CounterComponent 306 
12.11.1 import 306 
12.11.2模板306 
12.11.3 constructor 307 
12.11.4整合308 
12.12更進一步310 
12.13參考資源310 

第13章在Angular中引入Redux 312 
13.1閱讀背景312 
13.2聊天應用概覽313 
13.2.1組件313 
13.2.2數據模型314 
13.2.3 reducer 315 
13.2.4總結315 
13.3實現數據模型315 
13.3.1 User 315 
13.3.2 Thread 316 
13.3.3 Message 316 
13.4應用的state 316 
13.4 .1關於代碼佈局317 
13.4.2根reducer 317 
13.4.3 UserState 318 
13.4.4 ThreadsState 318 
13.4.5可視化AppState 319 
13.5構建reducer（和action creator） 321 
13.5.1設置當前用戶的action creator 321 
13.5.2 UsersReducer：設置當前用戶321 
13.5.3會話和消息概覽322 
13.5.4添加新會話的action creator 322 
13.5.5添加新會話的reducer 323 
13.5.6添加新消息的action creator 324 
13.5.7添加新消息的reducer 325 
13.5.8選擇會話的action creator 326 
13.5.9選擇會話的reducer 327 
13.5.10 reducer總結328 
13.6構 建Angular聊天應用328 
13.6.1頂層組件ChatApp 330 
13.6.2 ChatPage 330 
13.6.3容器型組件與展示型組件332 
13.7.1 Redux選擇器334 
13.7.2會話選擇器334 
13.7.3未讀消息總數選擇器336 
13.8構建ChatThreads組件336 
13.8.1 ChatThreads控制器337 
13.8.2 ChatThreads的template 338 
13.10構建ChatWindow組件340 
13.10.1 ChatWindow的updateState() 341 
13.10.2 ChatWindow的scrollToBottom() 342 
13.10.3 ChatWindow的sendMessage 342 
13.10.4 ChatWindow的onEnter 343 
13.10.6處理鍵盤動作345 
13.10.7使用ngModel 345 
13.10.8點擊Send按鈕345 
13.11 ChatMessage組件345 
13.11.1設置incoming屬性346 
13.11.2 ChatMessage的template 346 
13.12總結347 

第14章高級組件349 
14.1樣式349 
14.1.1視圖（樣式）封裝351 
14.1.2 Shadow DOM封裝354 
14.1.3不使用封裝355 
14.2創建popup指令：引用並修改宿主元素357 
14.2.1 popup指令的結構357 
14.2.2使用ElementRef 359 
14.2.3綁定到host屬性360 
14.2.4添加按鈕並使用exportAs 363 
14. 3.1改變host屬性的CSS類364 
14.3.2使用ng-content 364 
14.4查詢相鄰的指令：編寫標籤頁366 
14.4.1 Tab組件367 
14.4.2 Tabset組件367 
14.4.3使用Tabset 369 
14.5生命週期鉤子370 
14.5.1 OnInit和OnDestroy 371 
14.5.2 OnChanges 374 
14.5.3 DoCheck 378 
14.5.4 AfterContentInit、AfterViewInit、AfterContentChecked和AfterViewChecked 386 
14.6高級模板391 
14.6.1重寫ngIf：ngBookIf 392 
14.6.2重寫ngFor：ngBookRepeat 394 
14.7變更檢測398 
14.7.1自定義變更檢測401 
14.7.2 Zones 405 
14.7.3可觀察對象和OnPush 406 
14.8總結409 

第15章測試410 
15.1測試驅動？410 
15.2端對端測試與單元測試411 
15.3測試工具411 
15.3.1 Jasmine 411 
15.3.2 Karma 412 
15.4編寫單元測試412 
15.5 Angular單元測試框架412 
15.6測試前準備413 
15.7測試服務類和HTTP 415 
15.7.1 HTTP要點416 
15.7.2偽裝417 
15.7.3模擬417 
15.7.4 Http MockBackend 418 
15.7.5 TestBed.configureTestingModule和提供者418 
15.7.6測試getTrack方法419 
15.8測試組件間的路由424 
15.8.1為測試創建路由器424 
15.8.2模擬依賴427 
15.8.3探子427 
15.9回到測試代碼429 
15.9.1 fakeAsync和advance 431 
15.9.2 inject 432 
15.9.3測試ArtistComponent組件初始化432 
15.9.4測試ArtistComponent方法433 
15.9.5測試ArtistComponent DOM模板值434 
15.10測試表單436 
15.10.1創建一個ConsoleSpy 438 
15.10.2安裝ConsoleSpy 439 
15.10.3配置測試模塊439 
15.10.4測試表單440 
15.10.5重構表單測試441 
15.11測試HTTP請求444 
15.11.1測試POST方法445 
15.11.2測試DELETE方法446 
15.11.3測試HTTP頭447 
15.11.4測試YouTubeSe rvice 448 
15.12總結452 

第16章把AngularJS應用升級到Angular 453 
16.1周邊概念453 
16.2我們要構建什麼454 
16.3把AngularJS映射到Angular 455 
16.4關於互操作性的需求456 
16.5 AngularJS應用456 
16.5.1 AngularJS應用的HTML 458 
16.5.2代碼概覽458 
16.5.3 AngularJS：PinsService 459 
16.5.4 AngularJS：配置路由460 
16.5.5 AngularJS：HomeController 461 
16.5.6 AngularJS：HomeController模板461 
16.5.7 AngularJS：pin指令462 
16.5.8 AngularJS ：pin指令模板463 
16.5.10 AngularJS：AddController模板465 
16.5.11 AngularJS：總結467 
16.6構建混合式應用468 
16.6.1混合式應用的結構468 
16.6.2引導混合式應用471 
16.6.3我們要升級什麼473 
16.6.4插一小段內容：類型文件479 
16.6.6使用Angular的PinControlsComponent 481 
16.6.7把Angular的PinControlsComponent降級到AngularJS 482 
16.6.8用Angular添加圖釘483 
16.6.9把AngularJS的PinsService和$state升級到Angular 484 
16.6.10寫Angular版的AddPinComponent 485 
16. 6.11使用AddPinComponent 490 
16.6.12把Angular的服務暴露給AngularJS 490 
16.6.13實現AnalyticsService 491 
16.6.14把Angular的AnalyticsService降級到AngularJS 492 
16.7總結493 
16.8參考資源493