本书结构完整、深入浅出，循序渐进地将带领用户学习如何使用Angular9构建Web应用程序，同时书中的大量示例代码能快速的将入门者提升到实践者。 本书28章，将Angular9的方方面面进行了透彻的介绍：从基础知识与核心概念入手，帮助读者竖立正确的开发理念，接下来讲解了Angular9的各方面功能。除了对知识点的细致剖析，更提供了实例代码以便读者可以快速理解和掌握。本书的最大特色便是面向实战，帮助读者举一反三，从而能在真实的生产环境中学以致用。

1.读者无需有前端开发基础 本书假设用户之前不了解Angular框架，或者假设用户一直是从事Java开发的，从来没有接触过前端框架。本书就是专门为这样的读者准备的，它从一开始外围知识着手，每一章节，每一个案例以及每一段代码都经过精心的设计和挑选，方便用户能快速的掌握 Angular 的实践技能。 2.知识点全面 本书所有的案例基于Angular开发，也是目前Angular的最新版本。无论书中的讲解和示例代码的安排，都是基于依赖服务的最高版本进行，大量的应用案例甚至填补了官方文档的空白。 3.章节安排合理 本书一开始是基于培训 Reskill 的人士设计，结合笔者多年的学习新技术的经验，采用由浅入深、层层递进的结构，同时，本书的原稿经过身边同事的多次迭代反馈，里面的讲解及示例始终站在初学者的立场阐述，读者在学完本书后，可以直接进入Angular项目组担任开发角色。 4.示例设计专注解惑 本书主要是围绕实践展开，每个示例都是经过身边一线同事反馈迭代形成的，为了减少读者的学习时间，书中的每个示例都是独立的，读者可以专注某一个示例来学习。当读者在工作或学习中遇到了问题，可以直接到书中找到对应的解决方案。 ·内容全面：覆盖基础、架构、模块以及实战示例。 ·循序渐进：由点及面、由浅入深，逐步击破技术难点。 ·注重实操：通过丰富的实例，深刻理解每个知识点。

在IBM担任Java全栈工程师，拥有多年的研发和架构经验，先后参与国内外大型项目的研发及架构，如苏宁易购会员中心、中国移动供应链，IBM Program Work Center (IPWC)等，还在IBM内部负责全栈开发的培训。

目录 第 1篇　准备篇 第 1章 Angular概述　2 1.1　为什么要用Angular　2 1.1.1　速度和性能　2 1.1.2　跨平台运行　2 1.1.3　可伸缩性的设计　2 1.1.4　稳定性　3 1.1.5　谷歌和微软公司的支持　3 1.1.6　强大的生态系统　3 1.2　Angular的版本　3 1.3　Angular的核心概念　4 1.3.1　组件　4 1.3.2　模板和数据绑定　4 1.3.3　服务　4 1.3.4　依赖注入　4 1.3.5　指令　5 1.3.6　管道　5 1.3.7　模块　5 1.4　Angular的运行　5 1.5　小结　5 第 2章 Angular开发基础　6 2.1　了解Web开发基础　6 2.1.1　客户端和服务器通信　6 2.1.2　什么是HTML　7 2.1.3　什么是DOM　8 2.1.4　HTML特性与DOM属性　8 2.1.5　CSS基础知识　9 2.1.6　CSS布局实战　11 2.2　掌握Node. js和npm基础　14 2.3　TypeScript基础知识　15 2.4　Web组件知识　15 2.4.1　什么是MVVM模式　15 2.4.2　MVVM模式的优点　15 2.5　选择适合的开发工具　15 2.6　如何学习Angular　16 2.7　小结　16 第3章　Node.js和npm基础　17 3.1　配置Node.js运行环境　17 3.2　如何使用node命令　18 3.3　Node.js模块知识　18 3.3.1　exports对象　18 3.3.2　require()函数　19 3.3.3　module对象　19 3.4　npm基础　20 3.4.1　使用npm命令安装模块　20 3.4.2　更新模块　21 3.4.3　卸载模块　21 3.5　开启一个Node.js项目　21 3.5.1　初始化Node.js项目　21 3.5.2　安装Express框架　22 3.5.3　启动Node.js项目　23 3.6　搭建Node.js项目开发环境　23 3.6.1　安装IDE　23 3.6.2　Node.js项目结构　24 3.6.3　node_modules文件夹的作用　24 3.6.4　package.json文件　25 3.6.5　识别模块的版本号　25 3.6.6　package-lock.json文件的作用　26 3.6.7　调试Node.js项目　26 3.7　小结　27 第4章　TypeScript基础知识　28 4.1　什么是TypeScript　28 4.2　快速上手TypeScript　29 4.2.1　安装TypeScript　29 4.2.2 转译TypeScript　29 4.2.3　[示例 tsc-ex100] 开启第 一个TypeScript项目　30 4.3　TypeScript数据类型　31 4.3.1　TypeScript类型注解　31 4.3.2　TypeScript基础数据类型　32 4.3.3　TypeScript中的类型转换　35 4.3.4　TypeScript类型断言　36 4.3.5　TypeScript类型保护　37 4.3.6　TypeScript的联合类型　38 4.3.7　TypeScript的类型别名　38 4.3.8　TypeScript的交叉类型　38 4.4　TypeScript的函数与参数　39 4.4.1　箭头函数　39 4.4.2　TypeScript函数类型　39 4.4.3　函数中的可选参数　40 4.4.4　函数中的默认参数　40 4.5　TypeScript数组　41 4.5.1　TypeScript数组类型　41 4.5.2　使用TypeScript数组的查找和检索方法　41 4.6　TypeScript接口　42 4.7　TypeScript类　43 4.7.1　类的构造函数　43 4.7.2　类的方法和属性　44 4.7.3　类的继承　45 4.7.4　类的存取器方法　46 4.8　TypeScript映射类型　46 4.8.1　Partial 映射类型　46 4.8.2　Readonly 映射类型　47 4.8.3　Exclude映射类型　47 4.9　TypeScript的相等性判断　48 4.9.1　非严格相等比较　48 4.9.2　严格相等比较 　48 4.10　TypeScript析构表达式　48 4.10.1　对象的析构表达式　49 4.10.2　数组的析构表达式　49 4.11　TypeScript模块　50 4.11.1　导出声明　50 4.11.2　导出语句　50 4.11.3　默认导出　51 4.11.4　导入内容　51 4.12　小结　52 第 2篇　入门篇 第5章 快速开启Angular项目　54 5.1　初识Angular CLI　54 5.1.1　安装Angular CLI　54 5.1.2　运行Angular CLI　55 5.1.3　卸载和更新Angular CLI　56 5.1.4　[示例 cli-ex100] 快速开启一个Angular项目　56 5.2 搭建Angular开发环境　58 5.2.1 扩展IDE的功能　58 5.2.2 [示例 cli-ex200] 在运行时编辑项目　59 5.2.3 编译时的错误提醒　60 5.2.4 运行时的错误提醒　61 5.3 Angular CLI常用命令和选项　61 5.3.1　初始化命令和选项　61 5.3.2　创建命令和选项　62 5.4　Angular项目结构概述　63 5.5　如何启动Angular项目　64 5.6　Angular项目的启动过程　65 5.7　小结　65 第6章 Angular组件详解　66 6.1　什么是Angular组件　66 6.2　组件模板的种类　67 6.2.1　内联模板　67 6.2.2　外部模板　68 6.2.3　矢量图模板　68 6.3　组件样式　68 6.4　组件类的构成　69 6.4.1　组件类装饰器　69 6.4.2　组件类基础　70 6.5　组件类与模板的数据绑定方式　70 6.5.1　什么是单向数据绑定　70 6.5.2　使用插值显示属性的值　71 6.5.3　[示例 components-ex100] 使用插值显示属性的值　71 6.5.4　属性绑定方式　72 6.5.5　事件绑定　80 6.5.6　[示例 components-ex600] 事件绑定　81 6.5.7　双向数据绑定　82 6.5.8　[示例 components-ex700] 双向数据绑定　82 6.6　组件的生命周期　84 6.7　组件的交互　85 6.7.1　从创建子组件开始　85 6.7.2　[示例 components-ex800] 父组件拆分为子组件　85 6.7.3　父子组件的交互　87 6.8　小结　90 第7章 Angular模板　91 7.1　Angular模板语言基础　91 7.2　模板表达式和模板语句的基本用法　91 7.2.1　模板表达式的基本用法　92 7.2.2　模板表达式中的运算符　93 7.2.3　模板语句的基本用法　94 7.3　模板引用　94 7.3.1　模板引用变量　94 7.3.2　@ViewChild()装饰器　95 7.3.3　[示例 template-ex100] 使用@ViewChild()装饰器引用模板元素　95 7.3.4　@ViewChildren()装饰器　97 7.3.5　[示例 template-ex200] 使用@ViewChildren()装饰器引用多个模板元素　98 7.4　Angular数据绑定知识总结　98 7.4.1　单向属性绑定　98 7.4.2　单向事件绑定　99 7.4.3　双向数据绑定　100 7.4.4　[示例 template-ex300] 双向数据绑定　100 7.5　小结　102 第8章 Angular指令应用　103 8.1　Angular结构型指令　103 8.1.1　NgIf指令　103 8.1.2　[示例 directive-ex100] 使用NgIf指令显示和隐藏元素　103 8.1.3　NgFor指令　105 8.1.4　[示例 directive-ex200] 使用NgFor指令显示列表　105 8.1.5　NgSwitch指令　106 8.1.6　[示例 directive-ex300] 使用NgSwitch指令显示星期几　107 8.1.7　ng-container分组元素　108 8.2　Angular属性型指令　109 8.2.1　NgClass指令　109 8.2.2　NgStyle指令　109 8.2.3　NgContent指令　110 8.2.4　[示例 directive-ex400] 使用NgContent指令创建可重用添加按钮组件　112 8.2.5　在@ContentChildren()装饰器中使用NgContent指令　113 8.2.6　[示例 directive-ex500] 使用@ContentChildren()装饰器查询子组件列表　114 8.3　创建指令　116 8.3.1　在指令中访问DOM属性　117 8.3.2　[示例 directive-ex600] 使用自定义指令更改按钮大小　117 8.3.3　在指令中监听事件　119 8.3.4　[示例 directive-ex700] 在指令中监听事件　119 8.3.5　在指令中使用@HostBinding()装饰器绑定DOM属性　121 8.3.6　[示例 directive-ex800] 在指令中使用@HostBinding()装饰器绑定DOM属性　121 8.3.7　在指令中使用@HostListener()装饰器监听DOM事件　122 8.3.8　[示例 directive-ex900] 监听单击事件并实现当点击时增加计数　122 8.4　小结　124 第9章　Angular模块　125 9.1　什么是Angular模块　125 9.1.1　Angular根模块　125 9.1.2　Angular特性模块　127 9.2　常用内置模块　127 9.3　Angular模块业务分类　128 9.3.1　理解核心模块　128 9.3.2　防止重复导入核心模块　129 9.3.3　理解共享模块　129 9.4　如何正确地分割模块　130 9.5　小结　130 第3篇　应用篇 第 10章　Angular路由功能　132 10.1　Angular路由简介　132 10.1.1　创建Web应用程序的路由模块　132 10.1.2　理解路由服务　133 10.2　简单的路由配置　133 10.2.1　基本路由配置　134 10.2.2　路由器出口　134 10.2.3　使用路由器链接　136 10.2.4　路由链接的激活状态　137 10.2.5　[示例 route-ex100] 使用路由器链接和路由链接的激活状态　137 10.3　路由器状态　139 10.3.1　路由器状态和激活路由状态　139 10.3.2　ActivatedRoute对象及其快照对象　141 10.3.3　[示例 route-ex200] ActivatedRoute对象及其快照对象应用示例　142 10.4　路由器触发的事件　143 10.5　在路由中传递参数　144 10.5.1　传递配置参数　144 10.5.2　传递路径参数　145 10.5.3　传递查询参数　146 10.5.4　[示例 route-ex300] 使用路由传递参数　148 10.6　路由守卫　152 10.6.1　路由守卫的基本概念　152 10.6.2　配置路由守卫　153 10.6.3　CanActivate守卫应用　154 10.6.4　CanActivateChild守卫应用　155 10.6.5　CanDeactivate守卫应用　155 10.6.6　Resolve守卫应用　156 10.6.7　CanLoad守卫应用　156 10.7　路由器的延迟加载　157 10.7.1　延迟加载　157 10.7.2　实施延迟加载　157 10.7.3　[示例 route-ex400] 实现路由器的延迟加载功能　159 10.8　小结　160 第 11章 Angular服务和依赖注入　161 11.1　为什么需要服务　161 11.2　什么是依赖注入　162 11.3　创建可注入的服务类　162 11.4　选择注入器　163 11.5　配置提供商　164 11.5.1　提供商的类型 　164 11.5.2　配置方法　164 11.6　在类中注入服务　167 11.6.1　注入依赖类实例　167 11.6.2　注入可选的依赖类实例　168 11.6.3　使用@Inject()装饰器指定注入实例　168 11.6.4　注入Injector类对象实例　168 11.6.5　[示例 injection-ex100] Angular配置和使用依赖注入　169 11.7　创建依赖　174 11.8　小结　174 第 12章 RxJS响应式编程基础　175 12.1　响应式编程的基本概念　175 12.1.1　异步数据流　175 12.1.2　可观察对象　176 12.2　RxJS的概念　177 12.3　RxJS创建器　179 12.3.1　of 创建器　179 12.3.2　from 创建器　179 12.3.3　range 创建器　180 12.3.4　fromEvent 创建器　180 12.3.5　timer 创建器　181 12.3.6　interval 创建器　181 12.3.7　defer 创建器　182 12.3.8　随机数创建器　182 12.4　RxJS基本操作符　183 12.4.1　map 操作符　183 12.4.2　tap 操作符　184 12.4.3　filter 操作符　184 12.4.4　mapTo 操作符　185 12.4.5　retry 操作符　185 12.5　RxJS合并操作符　186 12.5.1　concat 操作符　186 12.5.2　merge 操作符　186 12.5.3　zip操作符　187 12.6　RxJS高阶映射操作符　187 12.6.1　concatMap 操作符　188 12.6.2　mergeMap 操作符　189 12.6.3　switchMap 操作符　190 12.6.4　exhaustMap 操作符　191 12.7　RxJS可观察对象的冷热模式　193 12.7.1　冷模式的可观察对象　193 12.7.2　热模式的可观察对象　194 12.8　小结　194 第 13章 Angular表单　195 13.1　什么是Angular表单　195 13.1.1　模板驱动表单　195 13.1.2　响应式表单　196 13.2　表单模型　196 13.2.1　表单模型的容器　196 13.2.2　FormControl类　197 13.2.3　FormArray类　198 13.2.4　FormGroup类　198 13.3　表单指令　199 13.4　表单数据访问器　200 13.5　模板驱动表单相关指令　202 13.5.1　NgForm指令　202 13.5.2　NgModel指令　203 13.5.3　NgModelGroup指令　205 13.6　响应式表单相关指令　206 13.6.1　FormControlDirective指令　207 13.6.2　FormGroupDirective指令　207 13.6.3　FormControlName指令　208 13.6.4　FormGroupName指令　208 13.6.5　FormArrayName指令　209 13.7　表单构建器生成表单控件　210 13.8　表单验证　211 13.8.1　内置验证器的用法　211 13.8.2　组合使用内置验证器　211 13.8.3　自定义验证器　211 13.8.4　表单控件状态的CSS样式类　212 13.9　使用 ngSubmit 事件提交表单　213 13.10　创建两种类型的表单　214 13.10.1　[示例 form-ex100] 创建模板驱动表单和数据绑定　214 13.10.2　[示例 form-ex200] 创建响应式表单和数据绑定　217 13.11　模板驱动表单和响应式表单可以混合使用吗　220 13.12　小结　220 第 14章　HttpClient模块　221 14.1 HTTP简介　221 14.1.1 HTTP请求　222 14.1.2 HTTP响应　222 14.2 应用HttpClient模块　223 14.3 创建RESTful API服务　224 14.3.1 使用json-server创建RESTful API服务　224 14.3.2 使用Angular内存数据库模拟服务器　225 14.4 从服务器获取数据　227 14.4.1 请求带类型的响应　228 14.4.2 [示例 httpclient-ex100] 使用HttpClient模块的GET请求从服务器获取数据　228 14.5 HttpClient模块的请求头配置　231 14.5.1 添加请求头　231 14.5.2 读取完整的响应信息　232 14.5.3 配置请求参数　232 14.5.4 修改请求头　233 14.5.5 发出 JSONP 请求　233 14.5.6 请求非 JSON 数据　234 14.6 HttpClient模块与RxJS配合　234 14.6.1 错误处理　234 14.6.2 重试　235 14.7 把数据发送到服务器　235 14.7.1 发起 POST 请求　236 14.7.2 发起 DELETE 请求　236 14.7.3 发起 PUT 请求　237 14.7.4 [示例 httpclient-ex300] 使用HttpClient模块把数据发送到服务器　237 14.8 HTTP请求和响应的不变性　243 14.8.1 HTTP的请求体和克隆体　243 14.8.2 清空请求体　243 14.9 Angular拦截器　243 14.9.1 创建拦截器　244 14.9.2 配置拦截器提供商　245 14.9.3 [示例 httpclient-ex400] 配置日志和错误信息的拦截器　245 14.10 小结　250 第 15章　Angular管道　251 15.1 Angular管道的用法　251 15.2 Angular内置管道　252 15.2.1 async管道　252 15.2.2 currency管道　252 15.2.3 date管道　254 15.2.4 i18nSelect管道　258 15.3 自定义管道　258 15.3.1 自定义管道的步骤　259 15.3.2 [示例 pipe-ex100] 创建排序自定义管道　259 15.4 小结　260