Angular开发入门与实战

目录
第 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