Angular权威教程

第1章　编写你的第一个Angular Web应用　　1

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　Angular是用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>列出产品　　70

3.5　产品列表组件　　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的视图模板　　80

3.5.7　完整的ProductsList组件　　81

3.6　产品条目组件　　83

3.6.1　产品条目的组件配置　　83

3.6.2　产品条目组件的定义类　　84

3.6.3　产品条目组件的template　　84

3.6.4　完整的ProductRow代码清单　　85

3.7　产品图片组件　　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.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　监听变化　　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　发起一个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列表（currentThread- Messages流）　　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　　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　创建第一个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　容器型组件与展示型组件　　331

13.7　构建ChatNavBar　　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.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　创建popup指令：引用并修改宿主元素　　357

14.2.1　popup指令的结构　　357

14.2.2　使用ElementRef　　359

14.2.3　绑定到host属性　　360

14.2.4　添加按钮并使用exportAs　　362

14.3　使用内容投影创建消息面板　　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　为测试创建路由器　　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　测试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　实现AnalyticsService　　491

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

16.6.15　在AngularJS中使用AnalyticsService　　492

16.7　总结　　493

16.8　参考资源　　493

......(更多)