Angular开发入门与实战电子书

扉页

目录

前言

推荐语

第1篇 准备篇

第1章 Angular概述

1.1 为什么要用Angular

1.1.1 速度和性能

1.1.2 跨平台运行

1.1.3 可伸缩性的设计

1.1.4 稳定性

1.1.5 谷歌和微软公司的支持

1.1.6 强大的生态系统

1.2 Angular的版本

1.3 Angular的核心概念

1.3.1 组件

1.3.2 模板和数据绑定

1.3.3 服务

1.3.4 依赖注入

1.3.5 指令

1.3.6 管道

1.3.7 模块

1.4 Angular的运行

1.5 小结

第2章 Angular开发基础

2.1 了解Web开发基础

2.1.1 客户端和服务器通信

2.1.2 什么是HTML

2.1.3 什么是DOM

2.1.4 HTML特性与DOM属性

2.1.5 CSS基础知识

2.1.6 CSS布局实战

2.2 掌握Node.js和npm基础

2.3 TypeScript基础知识

2.4 Web组件知识

2.4.1 什么是MVVM模式

2.4.2 MVVM模式的优点

2.5 选择适合的开发工具

2.6 如何学习Angular

2.7 小结

第3章 Node.js和npm基础

3.1 配置Node.js运行环境

3.2 如何使用node命令

3.3 Node.js模块知识

3.3.1 exports对象

3.3.2 require()函数

3.3.3 module对象

3.4 npm基础

3.4.1 使用npm命令安装模块

3.4.2 更新模块

3.4.3 卸载模块

3.5 开启一个Node.js项目

3.5.1 初始化Node.js项目

3.5.2 安装Express框架

3.5.3 启动Node.js项目

3.6 搭建Node.js项目开发环境

3.6.1 安装IDE

3.6.2 Node.js项目结构

3.6.3 node_modules文件夹的作用

3.6.4 package.json文件

3.6.5 识别模块的版本号

3.6.6 package-lock.json文件的作用

3.6.7 调试Node.js项目

3.7 小结

第4章 TypeScript基础知识

4.1 什么是TypeScript

4.2 快速上手TypeScript

4.2.1 安装TypeScript

4.2.2 转译TypeScript

4.2.3 [示例tsc-ex100]开启第一个TypeScript项目

4.3 TypeScript数据类型

4.3.1 TypeScript类型注解

4.3.2 TypeScript基础数据类型

4.3.3 TypeScript中的类型转换

4.3.4 TypeScript类型断言

4.3.5 TypeScript类型保护

4.3.6 TypeScript的联合类型

4.3.7 TypeScript的类型别名

4.3.8 TypeScript的交叉类型

4.4 TypeScript的函数与参数

4.4.1 箭头函数

4.4.2 TypeScript函数类型

4.4.3 函数中的可选参数

4.4.4 函数中的默认参数

4.5 TypeScript数组

4.5.1 TypeScript数组类型

4.5.2 使用TypeScript数组的查找和检索方法

4.6 TypeScript接口

4.7 TypeScript类

4.7.1 类的构造函数

4.7.2 类的方法和属性

4.7.3 类的继承

4.7.4 类的存取器方法

4.8 TypeScript映射类型

4.8.1 Partial映射类型

4.8.2 Readonly映射类型

4.8.3 Exclude映射类型

4.9 TypeScript的相等性判断

4.9.1 非严格相等比较

4.9.2 严格相等比较

4.10 TypeScript析构表达式

4.10.1 对象的析构表达式

4.10.2 数组的析构表达式

4.11 TypeScript模块

4.11.1 导出声明

4.11.2 导出语句

4.11.3 默认导出

4.11.4 导入内容

4.12 小结

第2篇 入门篇

第5章 快速开启Angular项目

5.1 初识Angular CLI

5.1.1 安装Angular CLI

5.1.2 运行Angular CLI

5.1.3 卸载和更新Angular CLI

5.1.4 [示例cli-ex100]快速开启一个Angular项目

5.2 搭建Angular开发环境

5.2.1 扩展IDE的功能

5.2.2 [示例cli-ex200]在运行时编辑项目

5.2.3 编译时的错误提醒

5.2.4 运行时的错误提醒

5.3 Angular CLI常用命令和选项

5.3.1 初始化命令和选项

5.3.2 创建命令和选项

5.4 Angular项目结构概述

5.5 如何启动Angular项目

5.6 Angular项目的启动过程

5.7 小结

第6章 Angular组件详解

6.1 什么是Angular组件

6.2 组件模板的种类

6.2.1 内联模板

6.2.2 外部模板

6.2.3 矢量图模板

6.3 组件样式

6.4 组件类的构成

6.4.1 组件类装饰器

6.4.2 组件类基础

6.5 组件类与模板的数据绑定方式

6.5.1 什么是单向数据绑定

6.5.2 使用插值显示属性的值

6.5.3 [示例components-ex100]使用插值显示属性的值

6.5.4 属性绑定方式

6.5.5 事件绑定

6.5.6 [示例components-ex600]事件绑定

6.5.7 双向数据绑定

6.5.8 [示例components-ex700]双向数据绑定

6.6 组件的生命周期

6.7 组件的交互

6.7.1 从创建子组件开始

6.7.2 [示例components-ex800]父组件拆分为子组件

6.7.3 父子组件的交互

6.8 小结

第7章 Angular模板

7.1 Angular模板语言基础

7.2 模板表达式和模板语句的基本用法

7.2.1 模板表达式的基本用法

7.2.2 模板表达式中的运算符

7.2.3 模板语句的基本用法

7.3 模板引用

7.3.1 模板引用变量

7.3.2 @ViewChild()装饰器

7.3.3 [示例template-ex100]使用@ViewChild()装饰器引用模板元素

7.3.4 @ViewChildren()装饰器

7.3.5 [示例template-ex200]使用@ViewChildren()装饰器引用多个模板元素

7.4 Angular数据绑定知识总结

7.4.1 单向属性绑定

7.4.2 单向事件绑定

7.4.3 双向数据绑定

7.4.4 [示例template-ex300]双向数据绑定

7.5 小结

第8章 Angular指令应用

8.1 Angular结构型指令

8.1.1 NgIf指令

8.1.2 [示例directive-ex100]使用NgIf指令显示和隐藏元素

8.1.3 NgFor指令

8.1.4 [示例directive-ex200]使用NgFor指令显示列表

8.1.5 NgSwitch指令

8.1.6 [示例directive-ex300]使用NgSwitch指令显示星期几

8.1.7 ng-container分组元素

8.2 Angular属性型指令

8.2.1 NgClass指令

8.2.2 NgStyle指令

8.2.3 NgContent指令

8.2.4 [示例directive-ex400]使用NgContent指令创建可重用添加按钮组件

8.2.5 在@ContentChildren()装饰器中使用NgContent指令

8.2.6 [示例directive-ex500]使用@ContentChildren()装饰器查询子组件列表

8.3 创建指令

8.3.1 在指令中访问DOM属性

8.3.2 [示例directive-ex600]使用自定义指令更改按钮大小

8.3.3 在指令中监听事件

8.3.4 [示例directive-ex700]在指令中监听事件

8.3.5 在指令中使用@HostBinding()装饰器绑定DOM属性

8.3.6 [示例directive-ex800]在指令中使用@HostBinding()装饰器绑定DOM属性

8.3.7 在指令中使用@HostListener()装饰器监听DOM事件

8.3.8 [示例directive-ex900]监听单击事件并实现当点击时增加计数

8.4 小结

第9章 Angular模块

9.1 什么是Angular模块

9.1.1 Angular根模块

9.1.2 Angular特性模块

9.2 常用内置模块

9.3 Angular模块业务分类

9.3.1 理解核心模块

9.3.2 防止重复导入核心模块

9.3.3 理解共享模块

9.4 如何正确地分割模块

9.5 小结

第3篇 应用篇

第10章 Angular路由功能

10.1 Angular路由简介

10.1.1 创建Web应用程序的路由模块

10.1.2 理解路由服务

10.2 简单的路由配置

10.2.1 基本路由配置

10.2.2 路由器出口

10.2.3 使用路由器链接

10.2.4 路由链接的激活状态

10.2.5 [示例route-ex100]使用路由器链接和路由链接的激活状态

10.3 路由器状态

10.3.1 路由器状态和激活路由状态

10.3.2 ActivatedRoute对象及其快照对象

10.3.3 [示例route-ex200]ActivatedRoute对象及其快照对象应用示例

10.4 路由器触发的事件

10.5 在路由中传递参数

10.5.1 传递配置参数

10.5.2 传递路径参数

10.5.3 传递查询参数

10.5.4 [示例route-ex300]使用路由传递参数

10.6 路由守卫

10.6.1 路由守卫的基本概念

10.6.2 配置路由守卫

10.6.3 CanActivate守卫应用

10.6.4 CanActivateChild守卫应用

10.6.5 CanDeactivate守卫应用

10.6.6 Resolve守卫应用

10.6.7 CanLoad守卫应用

10.7 路由器的延迟加载

10.7.1 延迟加载

10.7.2 实施延迟加载

10.7.3 [示例route-ex400]实现路由器的延迟加载功能

10.8 小结

第11章 Angular服务和依赖注入

11.1 为什么需要服务

11.2 什么是依赖注入

11.3 创建可注入的服务类

11.4 选择注入器

11.5 配置提供商

11.5.1 提供商的类型

11.5.2 配置方法

11.6 在类中注入服务

11.6.1 注入依赖类实例

11.6.2 注入可选的依赖类实例

11.6.3 使用@Inject()装饰器指定注入实例

11.6.4 注入Injector类对象实例

11.6.5 [示例injection-ex100]Angular配置和使用依赖注入

11.7 创建依赖

11.8 小结

第12章 RxJS响应式编程基础

12.1 响应式编程的基本概念

12.1.1 异步数据流

12.1.2 可观察对象

12.2 RxJS的概念

12.3 RxJS创建器

12.3.1 of创建器

12.3.2 from创建器

12.3.3 range创建器

12.3.4 fromEvent创建器

12.3.5 timer创建器

12.3.6 interval创建器

12.3.7 defer创建器

12.3.8 随机数创建器

12.4 RxJS基本操作符

12.4.1 map操作符

12.4.2 tap操作符

12.4.3 filter操作符

12.4.4 mapTo操作符

12.4.5 retry操作符

12.5 RxJS合并操作符

12.5.1 concat操作符

12.5.2 merge操作符

12.5.3 zip操作符

12.6 RxJS高阶映射操作符

12.6.1 concatMap操作符

12.6.2 mergeMap操作符

12.6.3 switchMap操作符

12.6.4 exhaustMap操作符

12.7 RxJS可观察对象的冷热模式

12.7.1 冷模式的可观察对象

12.7.2 热模式的可观察对象

12.8 小结

第13章 Angular表单

13.1 什么是Angular表单

13.1.1 模板驱动表单

13.1.2 响应式表单

13.2 表单模型

13.2.1 表单模型的容器

13.2.2 FormControl类

13.2.3 FormArray类

13.2.4 FormGroup类

13.3 表单指令

13.4 表单数据访问器

13.5 模板驱动表单相关指令

13.5.1 NgForm指令

13.5.2 NgModel指令

13.5.3 NgModelGroup指令

13.6 响应式表单相关指令

13.6.1 FormControlDirective指令

13.6.2 FormGroupDirective指令

13.6.3 FormControlName指令

13.6.4 FormGroupName指令

13.6.5 FormArrayName指令

13.7 表单构建器生成表单控件

13.8 表单验证

13.8.1 内置验证器的用法

13.8.2 组合使用内置验证器

13.8.3 自定义验证器

13.8.4 表单控件状态的CSS样式类

13.9 使用ngSubmit事件提交表单

13.10 创建两种类型的表单

13.10.1 [示例form-ex100]创建模板驱动表单和数据绑定

13.10.2 [示例form-ex200]创建响应式表单和数据绑定

13.11 模板驱动表单和响应式表单可以混合使用吗

13.12 小结

第14章 HttpClient模块

14.1 HTTP简介

14.1.1 HTTP请求

14.1.2 HTTP响应

14.2 应用HttpClient模块

14.3 创建RESTful API服务

14.3.1 使用json-server创建RESTful API服务

14.3.2 使用Angular内存数据库模拟服务器

14.4 从服务器获取数据

14.4.1 请求带类型的响应

14.4.2 [示例httpclient-ex100]使用HttpClient模块的GET请求从服务器获取数据

14.5 HttpClient模块的请求头配置

14.5.1 添加请求头

14.5.2 读取完整的响应信息

14.5.3 配置请求参数

14.5.4 修改请求头

14.5.5 发出JSONP请求

14.5.6 请求非JSON数据

14.6 HttpClient模块与RxJS配合

14.6.1 错误处理

14.6.2 重试

14.7 把数据发送到服务器

14.7.1 发起POST请求

14.7.2 发起DELETE请求

14.7.3 发起PUT请求

14.7.4 [示例httpclient-ex300]使用HttpClient模块把数据发送到服务器

14.8 HTTP请求和响应的不变性

14.8.1 HTTP的请求体和克隆体

14.8.2 清空请求体

14.9 Angular拦截器

14.9.1 创建拦截器

14.9.2 配置拦截器提供商

14.9.3 [示例httpclient-ex400]配置日志和错误信息的拦截器

14.10 小结

第15章 Angular管道

15.1 Angular管道的用法

15.2 Angular内置管道

15.2.1 async管道

15.2.2 currency管道

15.2.3 date管道

15.2.4 i18nSelect管道

15.3 自定义管道

15.3.1 自定义管道的步骤

15.3.2 [示例pipe-ex100]创建排序自定义管道

15.4 小结