揭秘Angular 2

第一部分入门篇

1 前端风云. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ...

第一部分入门篇

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 2 9

2.1.4 快速发展的Angular 2 10

2.1.5 开发语言之选11

2.2 Angular 2 简述12

2.2.1 核心概念12

2.2.2 平台简介14

2.2.3 平台亮点16

2.3 小结17

3 TypeScript 入门. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

3.1 TypeScript 概述18

3.1.1 概述18

3.1.2 安装19

3.2 基本类型20

3.2.1 布尔类型20

3.2.2 数字类型20

3.2.3 字符串类型21

3.2.4 数组类型21

3.2.5 元组类型21

3.2.6 枚举类型21

3.2.7 任意值类型22

3.2.8 null 和undefined 22

3.2.9 void 类型23

3.2.10 never 类型24

3.3 声明和解构24

3.3.1 let 声明25

3.3.2 const 声明26

3.3.3 解构26

3.4 函数28

3.4.1 函数定义28

3.4.2 可选参数28

3.4.3 默认参数29

3.4.4 剩余参数30

3.4.5 函数重载30

3.4.6 箭头函数31

3.5 类32

3.5.1 类的例子32

3.5.2 继承与多态32

3.5.3 修饰符33

3.5.4 参数属性35

3.5.5 静态属性35

3.5.6 抽象类36

3.6 模块37

3.6.1 概述37

3.6.2 模块导出方式37

3.6.3 模块导入方式38

3.6.4 模块的默认导出39

3.6.5 模块设计原则40

3.7 接口42

3.7.1 概述42

3.7.2 属性类型接口42

3.7.3 函数类型接口43

3.7.4 可索引类型接口44

3.7.5 类类型接口44

3.7.6 接口扩展45

3.8 装饰器46

3.8.1 概述46

3.8.2 方法装饰器47

3.8.3 类装饰器48

3.8.4 参数装饰器50

3.8.5 属性装饰器51

3.8.6 装饰器组合51

3.9 泛型53

3.10 TypeScript 周边54

3.10.1 编译配置文件54

3.10.2 声明文件55

3.10.3 编码工具56

3.10.4 展望未来57

3.11 小结57

4 快速入门. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

4.1 Hello World 例子58

4.1.1 准备工作58

4.1.2 搭建步骤59

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 指令82

5.1.4 服务83

5.1.5 依赖注入84

5.1.6 路由86

5.2 应用模块88

5.3 源码结构介绍91

5.4 小结93

6 组件. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

6.1 概述94

6.1.1 模块化介绍94

6.1.2 组件化标准96

6.1.3 Angular 的组件100

6.2 组件基础100

6.2.1 创建组件的步骤100

6.2.2 组件基础构成102

6.2.3 组件与模块108

6.3 组件交互113

6.3.1 组件的输入输出属性114

6.3.2 父组件向子组件传递数据115

6.3.3 子组件向父组件传递数据120

6.3.4 其他组件交互方式122

6.4 组件内容嵌入124

6.5 组件生命周期128

6.5.1 概述128

6.5.2 生命周期钩子128

6.6 变化监测131

6.6.1 数据变化的源头131

6.6.2 变动通知机制132

6.6.3 变化监测的响应处理133

6.7 扩展阅读139

6.7.1 元数据一览表139

6.7.2 元数据说明139

6.7.3 深入理解Zones 149

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 表单校验185

7.5 管道189

7.5.1 管道介绍190

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 小结205

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 实现结构指令224

8.3.2 模板标签与星号前缀227

8.3.3 NgIf 指令原理228

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 AJAX 介绍243

9.2.2 JSONP 介绍249

9.2.3 HttpModule 250

9.3 响应式编程254

9.3.1 概述254

9.3.2 ReactiveX 256

9.4 RxJS 258

9.4.1 创建Observable 对象258

9.4.2 使用RxJS 处理复杂场景258

9.4.3 RxJS 和Promise 的对比259

9.4.4 “冷”模式下的Observable 260

9.4.5 RxJS 中的Operator 261

9.4.6 Angular 中的RxJS 265

9.5 小结269

10 依赖注入. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270

10.1 依赖注入介绍271

10.2 Angular 依赖注入274

10.2.1 概述274

10.2.2 在组件中注入服务276

10.2.3 在服务中注入服务278

目录xvii

10.2.4 在模块中注入服务280

10.2.5 层级注入282

10.2.6 注入到派生组件286

10.2.7 限定方式的依赖注入288

10.3 Provider 292

10.3.1 概述292

10.3.2 Provider 注册方式293

10.4 扩展阅读297

10.5 小结299

11 路由. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300

11.1 概述300

11.2 基本用法302

11.2.1 路由配置302

11.2.2 创建根路由模块303

11.2.3 添加RouterOutlet 指令303

11.3 路由策略304

11.3.1 HashLocationStrategy 介绍305

11.3.2 PathLocationStrategy 介绍306

11.4 路由跳转307

11.4.1 使用指令跳转308

11.4.2 使用代码跳转310

11.5 路由参数312

11.5.1 Path 参数312

11.5.2 Query 参数315

11.5.3 Matrix 参数317

11.6 子路由和附属Outlet 317

11.6.1 子路由317

11.6.2 附属Outlet 319

11.7 路由拦截320

11.7.1 激活拦截与反激活拦截321

11.7.2 数据预加载拦截325

11.8 模块的延迟加载327

11.8.1 延迟加载实现328

11.8.2 模块加载拦截329

11.9 小结331

12 测试. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332

12.1 概述332

12.2 单元测试333

12.2.1 概述333

12.2.2 常用测试框架334

12.2.3 Jasmine 介绍334

12.2.4 Karma 介绍338

12.2.5 Karma 结合Jasmine 测试339

12.3 Angular 单元测试343

12.3.1 概述343

12.3.2 独立单元测试348

12.3.3 测试工具集352

12.4 端到端测试360

12.4.1 概述360

12.4.2 Protractor 介绍361

12.5 小结364

第三部分实战篇

13 问卷调查系统简介. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366

13.1 项目背景366

13.2 主要特性367

13.2.1 首页和帮助页369

13.2.2 问卷编辑页369

13.2.3 我的问卷页369

13.2.4 用户管理页369

13.3 产品设计369

13.4 小结371

14 项目起步. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372

14.1 技术选型372

14.1.1 前端脚手架372

14.1.2 UI 样式库373

14.1.3 后端服务器374

14.2 环境搭建374

14.2.1 搭建脚手架374

14.2.2 引入样式库377

14.2.3 搭建后台环境378

14.3 目录结构介绍380

14.4 首页开发384

14.5 小结388

15 问卷编辑模块. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389

15.1 概述389

15.1.1 功能设计389

15.1.2 数据模型391

15.2 问卷编辑模块开发393

15.2.1 问题选择组件394

15.2.2 问题组件398

15.2.3 问卷组件408

15.2.4 问卷服务415

15.2.5 问卷大纲422

15.3 小结425

16 我的问卷模块. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426

16.1 问卷列表427

16.1.1 问卷列表项428

16.1.2 显示问卷列表429

16.1.3 显示问卷详情431

16.2 问卷操作433

16.2.1 修改路由配置434

16.2.2 发布后的问卷页面436

16.2.3 问卷操作组件439

16.3 小结442

17 用户管理模块. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443

17.1 开发简单注册页444

17.2 表单控件组件446

17.2.1 定义表单控件446

17.2.2 校验表单控件447

17.2.3 表单安全450

17.3 用户注册功能开发451

17.3.1 用户注册服务451

17.3.2 组件的逻辑453

17.3.3 注册接口开发455

17.4 权限管理456

17.5 小结460

18 项目构建和最佳实践. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461

18.1 项目构建461

18.1.1 代码质量检查461

18.1.2 测试463

18.1.3 打包465

18.1.4 容器化467

18.2 最佳实践468

18.2.1 单一职责468

18.2.2 命名约定469

18.2.3 编码约定471

18.2.4 应用结构约定474

18.2.5 组件相关约定475

18.2.6 指令相关约定478

18.2.7 服务相关约定478

18.2.8 其他479

18.3 小结480