Angular 應用程序開發指南

成龍

從事專業軟件開發工作近十年，擅長.NET/.NET Core 和Web 前端技術。
曾擔任北大青鳥培訓講師，樂於分享領域驅動設計的學習和運用經驗

第 1章 初识Angular 1
1．1 JavaScript的诞生 1
1．2 AngularJS的诞生 1
1．3 从AngularJS到Angular 2 2
1．4 从Angular 2到Angular 2
1．5 Angular是一个框架 3
1．6 小结 4

第 2章 准备工作 5
2．1 跨平台的开发环境 5
2．1．1 Node．js 5
2．1．2 Visual Studio Code 8
2．1．3 TypeScript编译器 10
2．1．4 调试TypeScript代码 14
2．1．5 Express 18
2．2 了解模块 22
2．2．1 通用模块 22
2．2．2 ECMAScript模块 31
2．3 小结 33

第3章 TypeScript语法基础 34
3．1 基础概念 34
3．1．1 模块 34
3．1．2 变量和常量 39
3．1．3 基础类型 41
3．1．4 类型断言 51
3．2 函数 53
3．2．1 函数参数 53
3．2．2 函数的返回类型 57
3．2．3 函数类型 58
3．2．4 函数的重载 63
3．2．5 箭头函数 64
3．3 类 67
3．3．1 实例成员 68
3．3．2 静态成员 73
3．3．3 可选成员 76
3．3．4 索引 78
3．3．5 继承 79
3．3．6 可访问性 86
3．3．7 抽象类 92
3．4 小结 95

第4章 TypeScript进阶 96
4．1 类型和接口 96
4．1．1 常用类型 96
4．1．2 特殊类型 104
4．1．3 接口 107
4．1．4 运行时类型判断 113
4．2 泛型 120
4．2．1 泛型函数 121
4．2．2 泛型类 122
4．2．3 泛型接口 125
4．2．4 类型推断 127
4．2．5 类型约束 128
4．3 装饰器 129
4．3．1 元数据 130
4．3．2 reflect-metadata 134
4．3．3 属性装饰器 137
4．3．4 类装饰器 142
4．3．5 其他装饰器 153
4．3．6 装饰器工厂 155
4．4 小结 160

第5章 TypeScript补充 161
5．1 模块 161
5．1．1 导出 161
5．1．2 导入 164
5．1．3 模块解析 168
5．1．4 模块扩展 176
5．2 命名空间 178
5．2．1 全局命名空间 179
5．2．2 模块内的命名空间 181
5．2．3 global扩展 183
5．2．4 Node．js全局作用域 188
5．3 声明文件 191
5．3．1 环境上下文 192
5．3．2 编写声明文件 194
5．3．3 环境模块 198
5．3．4 使用JavaScript包 200
5．3．5 TypeScript库 205
5．4 项目配置 208
5．5 小结 209

第6章 Angular基础概念 210
6．1 Angular应用程序的组成部分 210
6．1．1 组件 211
6．1．2 模板 212
6．1．3 数据绑定 213
6．1．4 服务 214
6．1．5 指令 215
6．1．6 管道 216
6．1．7 模块 217
6．2 创建一个Angular应用程序 218
6．2．1 准备工作 219
6．2．2 编写应用程序代码 224
6．2．3 启动应用程序 229
6．2．4 创建过程回顾 235
6．3 Angular和MVC 236
6．3．1 MVC 236
6．3．2 MVVM 238
6．3．3 Angular中的MVC 238
6．4 小结 240

第7章 天天菜园：一个真实的Angular应用程序 241
7．1 创建项目 241
7．2 服务：领域模型 245
7．3 组件：应用逻辑 246
7．4 模板：展示逻辑 248
7．4．1 指令 249
7．4．2 数据绑定 250
7．4．3 管道 265
7．5 完善 268
7．5．1 MVC目录 268
7．5．2 常用指令 269
7．5．3 Bootstrap 277
7．5．4 根视图 281
7．6 小结 285

第8章 天天菜园：商品展示 286
8．1 创建商品细节视图 286
8．1．1 重构商品服务 286
8．1．2 创建商品细节组件 287
8．1．3 创建商品细节模板和样式 288
8．1．4 封装商品细节组件 289
8．2 路由器：构建单页面应用程序 290
8．2．1 安装和配置路由器包 291
8．2．2 注册路由项 292
8．2．3 使用路由器链接指令 294
8．2．4 设置路由器出口 295
8．2．5 设置标签 296
8．2．6 刷新商品细节视图 298
8．2．7 美化商品细节视图 300
8．3 领域模块：划分领域 304
8．3．1 创建商品领域目录 304
8．3．2 转移商品领域代码 305
8．3．3 创建商品领域模块 306
8．3．4 导入商品领域模块到根模块 307
8．3．5 导入Angular模块到商品领域模块 307
8．4 路由配置模块：配置领域路由 308
8．4．1 创建商品领域路由配置模块 310
8．4．2 导入商品领域路由配置模块到商品领域模块 311
8．4．3 创建应用程序根路由配置模块 312
8．4．4 导入应用程序根路由配置模块到应用程序根模块 312
8．5 依赖注入：管理服务 313
8．5．1 注册商品服务 314
8．5．2 为商品列表组件注入商品服务 316
8．5．3 为商品细节组件注入商品服务 317
8．6 综合运用：传递业务参数 318
8．6．1 附加商品ID到目标path 318
8．6．2 配置匹配商品ID的路由参数 319
8．6．3 获取目标path中的商品ID 320
8．6．4 完善 323
8．7 小结 324

第9章 天天菜园：客户中心（上） 325
9．1 客户领域模块：复习巩固 325
9．1．1 创建客户领域目录 325
9．1．2 创建客户领域模型 326
9．1．3 创建客户组件 328
9．1．4 创建视图相关文件 331
9．1．5 创建客户领域路由配置模块 334
9．1．6 创建客户领域模块 335
9．1．7 导入客户领域模块到根模块 336
9．1．8 导航到客户视图 337
9．2 路由加载模块：提高应用程序启动效率 338
9．2．1 路由加载客户领域模块 339
9．2．2 重新导航到客户视图 341
9．2．3 模块和依赖注入器 343
9．3 表单（上）：双向数据绑定 347
9．3．1 安装和配置表单包 347
9．3．2 导入表单模块到客户领域模块 348
9．3．3 提交客户表单 349
9．3．4 绑定客户表单 351
9．3．5 进行注册和登录 356
9．4 小结 357

第 10章 天天菜园：客户中心（下） 358
10．1 表单（下）：验证用户输入 358
10．1．1 客户表单验证 358
10．1．2 提示表单验证规则 365
10．2 Web API：真实的服务端 375
10．2．1 Web API列表 375
10．2．2 Web API实现 378
10．2．3 Web API注册 381
10．2．4 获取请求体 383
10．3 HttpClient：与Web服务端通信 384
10．3．1 重构客户服务 385
10．3．2 重构客户组件 396
10．3．3 重构商品服务 399
10．3．4 重构商品组件 401
10．4 小结 402

第 11章 天天菜园：购物车 404
11．1 Web API：服务端支持 404
11．1．1 Web API列表 404
11．1．2 Web API实现 409
11．1．3 Web API注册 415
11．2 重构商品领域模块：添加商品到购物车 417
11．2．1 重构商品领域模块 417
11．2．2 重构商品服务 417
11．2．3 重构商品细节组件 418
11．2．4 重构商品细节模板 419
11．2．5 重构商品细节样式 420
11．3 购物车领域模块：一次完整的领域实现体验 421
11．3．1 创建购物车领域目录 422
11．3．2 创建购物车领域模型 422
11．3．3 创建购物车组件 424
11．3．4 创建购物车视图文件 427
11．3．5 创建购物车领域路由配置模块 430
11．3．6 创建购物车领域模块 430
11．3．7 加载购物车领域模块 431
11．3．8 导航到购物车视图 432
11．4 事件绑定：处理用户交互 433
11．4．1 增加或减少购物车商品数量 434
11．4．2 删除购物车商品 436
11．4．3 直接修改购物车商品数量 437
11．5 嵌套组件：构建复杂应用程序 441
11．5．1 重构商品服务 442
11．5．2 重构商品列表组件 442
11．5．3 重构商品列表模板 443
11．5．4 传递搜索参数 444
11．5．5 创建商品搜索组件 446
11．5．6 重构购物车领域模块 448
11．5．7 显示商品搜索视图 448
11．5．8 强化商品搜索组件 450
11．6 小结 453

第 12章 天天菜园：完善（上） 455
12．1 部件模块：封装共享组件 455
12．2 Subject：模块间通信 463
12．2．1 同步购物车商品总数（上） 464
12．2．2 同步购物车商品总数（中） 468
12．2．3 Observable vs． Subject 470
12．3 服务模块：封装共享服务 482
12．3．1 同步购物车商品总数（下） 482
12．3．2 同步登录客户姓名 485
12．3．3 完善同步 489
12．3．4 五种特性模块的比较 493
12．4 小结 493

第 13章 天天菜园：完善（下） 494
13．1 保护购物车视图 494
13．1．1 创建路由守卫 494
13．1．2 注册路由守卫 496
13．1．3 应用路由守卫 496
13．2 保护登录客户元素 497
13．2．1 创建登录验证指令 497
13．2．2 封装登录验证指令 498
13．2．3 运用登录验证指令 499
13．3 共享消息提示 500
13．3．1 创建消息提示服务 501
13．3．2 注册消息提示服务 501
13．3．3 创建消息提示组件 502
13．3．4 封装消息提示组件 503
13．3．5 发送提示消息 504
13．3．6 显示提示消息 505
13．4 简化消息提示 507
13．4．1 创建消息提示组件 507
13．4．2 重构消息提示服务 508
13．4．3 创建UI服务模块 510
13．4．4 导入UI服务模块到根模块 511
13．4．5 显示消息提示 511
13．5 确认提示 514
13．5．1 创建确认提示组件 514
13．5．2 创建确认提示服务 515
13．5．3 注册确认提示服务 517
13．5．4 显示确认提示 517
13．6 动画 519
13．6．1 安装Angular动画包 519
13．6．2 搜索按钮动画 520
13．6．3 购物车商品删除动画 524
13．6．4 路由过渡动画 531
13．7 小结 538

第 14章 使用Angular CLI 539
14．1 构建已有应用程序 540
14．1．1 安装Angular CLI 540
14．1．2 安装Angular编译器 540
14．1．3 选择要打包的垫片 541
14．1．4 创建Angular工作空间配置文件 542
14．1．5 不执行预先编译的构建 544
14．1．6 执行预先编译的构建 551
14．1．7 用于生产的构建 553
14．1．8 完善 556
14．2 开发新的应用程序 558
14．2．1 创建应用程序 558
14．2．2 启动应用程序 564
14．2．3 添加功能 565
14．2．4 使用语言服务 572
14．2．5 构建应用程序 573
14．3 小结 574