Angular应用程序开发指南

《Angular应用程序开发指南》主要介绍如何用 Web 前端框架 Angular 开发应用程序。书中先介绍Angular的发展历程和基础概念，帮助读者了解Angular框架并打好坚实的基础；然后以“天天菜园”蔬菜订购应用程序为例，将理论讲解落实到代码实现上，带领读者真正体验用Angular开发应用程序的全过程；最后介绍用于实现自动化开发工作流程的命令行接 口Angular CLI，帮助读者用所学知识构建新的应用程序。本书既涵盖Angular的基础内容，又通过真实的项目实例展现了应用程序的开发过程，非常适合对 Angular 框架感兴趣的前端开发人员作为自学教程。

成龙 从事专业软件开发工作近十年，擅长 .NET/.NET Core 和 Web 前端技术。曾担任北大青鸟培训讲师，乐于分享领域驱动设计的学习和运用经验（知乎账号：@Lcng）

第 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