第1章　編寫你的第一個Angular Web應用　　1

1.1　仿制Reddit網(wǎng)站　　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　把數(shù)據(jù)添加到組件中　　13

1.5　使用數(shù)組　　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　創(chuàng)建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　基于分數(shù)重新排序　　45

1.12　全部代碼　　45

1.13　總結　　45

1.14　獲得幫助　　46

第2章　TypeScript　　47

2.1　Angular是用TypeScript構建的　　47

2.2　TypeScript提供了哪些特性　　48

2.3　類型　　49

2.4　內置類型　　50

2.4.1　字符串　　50

2.4.2　數(shù)字　　50

2.4.3　布爾類型　　51

2.4.4　數(shù)組　　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　構造函數(shù)　　54

2.5.4　繼承　　55

2.6　工具　　57

2.6.1　胖箭頭函數(shù)　　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　產(chǎn)品列表組件　　62

3.2　產(chǎn)品數(shù)據(jù)模型　　64

3.3　組件　　64

3.4　組件注解　　66

3.4.1　組件selector　　66

3.4.2　組件template　　67

3.4.3　添加產(chǎn)品　　67

3.4.4　用模板綁定來查看產(chǎn)品　　68

3.4.5　添加更多產(chǎn)品　　69

3.4.6　選擇一個產(chǎn)品　　70

3.4.7　用<products-list>列出產(chǎn)品　　70

3.5　產(chǎn)品列表組件　　73

3.5.1　設置ProductsList的@Component配置項　　73

3.5.2　組件的輸入　　74

3.5.3　組件的輸出　　77

3.5.4　觸發(fā)自定義事件　　78

3.5.5　編寫ProductsList的控制器類　　79

3.5.6　編寫ProdctsList的視圖模板　　80

3.5.7　完整的ProductsList組件　　81

3.6　產(chǎn)品條目組件　　83

3.6.1　產(chǎn)品條目的組件配置　　83

3.6.2　產(chǎn)品條目組件的定義類　　84

3.6.3　產(chǎn)品條目組件的template　　84

3.6.4　完整的ProductRow代碼清單　　85

3.7　產(chǎn)品圖片組件　　85

3.8　價格展示組件　　86

3.9　產(chǎn)品分類組件　　87

3.10　創(chuàng)建NgModule并啟動應用　　88

3.11　完整的項目　　89

3.12　關于數(shù)據(jù)架構的一點說明　　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.3.5　試試看　　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　監(jiān)聽變化　　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　完整的SimpleHTTP-Component　　130

6.4　編寫YouTubeSearchComponent　　130

6.4.1　編寫SearchResult　　132

6.4.2　編寫YouTubeService　　132

6.4.3　編寫SearchBox　　140

6.4.4　編寫SearchResult-Component　　145

6.4.5　編寫YouTubeSearch-Component　　147

6.5　@angular/http API　　150

6.5.1　發(fā)起一個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　創(chuàng)建組件　　160

7.5.2　應用程序組件　　161

7.5.3　配置路由　　163

7.6　路由策略　　164

7.7　路徑定位策略　　165

7.8　運行應用程序　　165

7.9　路由參數(shù)　　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組件和路由守衛(wèi)　　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數(shù)據(jù)架構　　220

第10章　使用可觀察對象的數(shù)據(jù)架構，

第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　數(shù)據(jù)模型　　226

10.2.3　服務　　226

10.2.4　總結　　226

10.3　實現(xiàn)數(shù)據(jù)模型　　227

10.3.1　User　　227

10.3.2　Thread　　227

10.3.3　Message　　228

10.4　實現(xiàn)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列表（currentThread- Messages流）　　248

10.6.5　完整的ThreadsService　　250

10.7　總結　　251

第11章　使用可觀察對象的數(shù)據(jù)架構，

第2部分：視圖組件　　252

11.1　構建視圖：頂層組件ChatApp　　252

11.2　ChatThreads組件　　254

11.2.1　ChatThreads控制器　　255

11.2.2　ChatThreads的template　　255

11.3　單個ChatThread組件　　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的send-Message　　261

11.4.4　ChatWindow的onEnter　　262

11.4.5　ChatWindow的scrollTo-Bottom　　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組件　　265

11.5　ChatMessage組件　　267

11.5.1　設置incoming屬性　　268

11.5.2　ChatMessage的template　　268

11.5.3　完整的ChatMessage代碼清單　　270

11.6　ChatNavBar組件　　273

11.6.1　ChatNavBar的@Component　　273

11.6.2　ChatNavBar控制器　　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　創(chuàng)建第一個Reducer　　281

12.2.4　運行第一個Reducer　　282

12.2.5　使用action調整計數(shù)器　　283

12.2.6　reducer的switch　　284

12.2.7　action的“參數(shù)”　　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　規(guī)劃應用　　299

12.7　組建Redux　　300

12.7.1　定義應用的state　　300

12.7.2　定義reducer　　301

12.7.3　定義action creator　　301

12.7.4　創(chuàng)建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　數(shù)據(jù)模型　　314

13.2.3　reducer　　315

13.2.4　總結　　315

13.3　實現(xiàn)數(shù)據(jù)模型　　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　容器型組件與展示型組件　　331

13.7　構建ChatNavBar　　332

13.7.1　Redux選擇器　　334

13.7.2　會話選擇器　　334

13.7.3　未讀消息總數(shù)選擇器　　336

13.8　構建ChatThreads組件　　336

13.8.1　ChatThreads控制器　　337

13.8.2　ChatThreads的template　　338

13.9　單個ChatThread組件　　338

13.10　構建ChatWindow組件　　340

13.10.1　ChatWindow的update-State()　　341

13.10.2　ChatWindow的scrollToBottom()　　342

13.10.3　ChatWindow的sendMessage　　342

13.10.4　ChatWindow的onEnter　　343

13.10.5　ChatWindow的template　　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　創(chuàng)建popup指令：引用并修改宿主元素　　357

14.2.1　popup指令的結構　　357

14.2.2　使用ElementRef　　359

14.2.3　綁定到host屬性　　360

14.2.4　添加按鈕并使用exportAs　　362

14.3　使用內容投影創(chuàng)建消息面板　　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：ngBook-Repeat　　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.configureTes- tingModule和提供者　　418

15.7.6　測試getTrack方法　　419

15.8　測試組件間的路由　　424

15.8.1　為測試創(chuàng)建路由器　　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　創(chuàng)建一個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　測試YouTubeService　　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：HomeContro-ller　　461

16.5.6　AngularJS：HomeContro-ller模板　　461

16.5.7　AngularJS：pin指令　　462

16.5.8　AngularJS：pin指令模板　　462

16.5.9　AngularJS：AddContro-ller　　463

16.5.10　AngularJS：AddContro-ller模板　　465

16.5.11　AngularJS：總結　　467

16.6　構建混合式應用　　468

16.6.1　混合式應用的結構　　468

16.6.2　引導混合式應用　　471

16.6.3　我們要升級什么　　473

16.6.4　插一小段內容：類型文件　　475

16.6.5　寫Angular的PinControls- Component　　479

16.6.6　使用Angular的PinCon- trolsComponent　　481

16.6.7　把Angular的PinControls- Component降級到 AngularJS　　482

16.6.8　用Angular添加圖釘　　483

16.6.9　把AngularJS的PinsSer-vice和$state升級到Angular　　484

16.6.10　寫Angular版的AddPin- Component　　485

16.6.11　使用AddPinComponent　　490

16.6.12　把Angular的服務暴露給AngularJS　　490

16.6.13　實現(xiàn)AnalyticsService　　491

16.6.14　把Angular的Analytics- Service降級到AngularJS　　491

16.6.15　在AngularJS中使用AnalyticsService　　492

16.7　總結　　493

16.8　參考資源　　493

......(更多)