Angular开发入门与实战

图书标准信息

• 作者 兰泽军
• 出版社 人民邮电出版社
• 出版时间 2021-05
• 版次 1
• ISBN 9787115561084
• 定价 79.00元
• 装帧 平装
• 开本 其他
• 纸张 胶版纸
• 页数 260页
• 字数 426千字

【内容简介】

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

【作者简介】

在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