本书主要介绍了利用Angular框架开发Web应用程序的方法，通过案例方式介绍了TypeScript编程基础和 Angular Web开发。全书共分为 7章，设计了 44个案例，主要内容包括 TypeScript编程基础，Angular编程基础，数据绑定及数据传递，指令与表单，类、服务和依赖注入，装饰器、管道、路由和生命周期函数以及Ng-Zorro-Antd组件库和服务器部署。每个案例都采用案例描述→实现效果→案例实现→知识要点的讲解步骤，符合读者的一般认知规律，让读者能够快速掌握 Angular框架开发方法。本书配有MOOC（“国家高等教育智慧教育平台”上线），书中所有案例都配有微视频，通过扫码即可观看。
本书适合作为高等院校Web开发相关课程的教材，也可以作为Angular Web开发爱好者的入门参考书。

Angular是一个基于 TypeScript构建的应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用。它包括：一个基于组件的框架，用于构建可伸缩的 Web应用；一组完美集成的库，涵盖各种功能，包括路由、表单管理、客户端 -服务器通信等；一套开发工具，可帮助开发、构建、测试和更新代码。它横跨所有平台，通过 Web Worker和服务端渲染能够达到如今 (以及未来）的 Web平台上所能达到的最高速度，使用简单的声明式模板快速实现各种特性，在几乎所有的 IDE中获得针对 Angular的即时帮助和反馈，受到百万用户的热捧。

本书共7章，全部采用案例方式进行介绍。

第1章：TypeScript编程基础。本章首先介绍了 TypeScript及其开发环境的搭建，然后设计了9个案例，演示了 TypeScript项目的创建、代码编写、编译及运行过程，以及TypeScript数据类型（包括字符串类型、数值型、布尔型、数组、元组、枚举等）、函数（包括无参函数、有参函数、可选参数函数、默认参数函数、剩余参数函数、重载函数和箭头函数）、类和对象（包括类的定义、对象的创建与使用、静态属性和静态方法、类的继承、抽象类和抽象方法等）、接口（包括属性接口、函数接口和类接口）、泛型（包括泛型函数、泛型类、泛型函数接口）、模块和命名空间、类装饰器（包括普通类装饰器和类装饰器工厂）的定义及使用方法。

第2章：Angular编程基础。本章首先介绍了 Angular的发展历程、特点、功能和三驾马车，然后设计了 4个案例，主要演示了 Angular的基本编程方法，包括：文本与图片的使用方法、Flex布局、组件的创建和布局等。

第3章：数据绑定及数据传递。本章设计了 6个案例，主要演示了数据绑定、事件绑定、属性绑定、双向数据传递、模板文件向逻辑文件传值的工作原理和实现方法。

第4章：指令与表单。本章设计了 10个案例，主要演示了指令（包括 ngStyle、ngClass、ngIf、ngSwitch、ngFor）、模板式表单、复选框、单选按钮和表单以及其他组件的使用方法。

第5章：类、服务和依赖注入。本章设计了 5个案例，演示了类、服务和依赖注入的功能和使用方法。

第6章：装饰器、管道、路由和生命周期函数。本章设计了 6个案例，演示了装饰器、管道、路由和生命周期函数的功能和使用方法。

第7章：Ng -Zorro-Antd组件库和服务器部署。本章设计了 4个案例，演示了 Ng -Zorro-Antd组件库中各种组件的功能和使用方法，以及将利用 Angular设计的网站部署到服务器的方法。

本书采用 MOOC+微课模式，配套 MOOC及资源都已经在“国家高等教育智慧教育平台”上线，读者也可以直接扫描书中的二维码观看每个案例的教学视频。本书由杜春涛教授编写，在编写过程中，南京师范大学泰州学院倪红军副教授提供了一些重要资源，北方工业大学康守冲和白帆两位研究生设计了部分案例，中国铁道出版社有限公司的编辑给予了大力支持和帮助，在此表示衷心感谢。

限于编者水平，加之时间仓促，书中难免存在疏漏和不足之处，恳请各位专家、老师、学者和广大读者批评指正。

本书受 2022年北方工业大学教材出版基金、教育部产学合作协同育人项目（项目编号：202102183001、202102183006）、全国高等院校计算机基础教育研究会项目(中国铁道出版社有限公司支持，项目编号：2021 -AFCEC-002、2022-AFCEC-004）、北京市高等教育学会重点项目（项目编号：ZD202110）支持。

著 者2022年 1月

第1章 TypeScript编程基础 / 1
1.1？TypeScript概述 / 1
1.1.1？TypeScript简介 / 1
1.1.2？开发环境搭建 / 2
1.2？案例：Hello World / 9
1.2.1？案例描述 / 9
1.2.2？实现效果 / 9
1.2.3？案例实现 / 9
1.2.4？知识要点 / 10
1.3？案例：数据类型 / 10
1.3.1？案例描述 / 10
1.3.2？实现效果 / 10
1.3.3？案例实现 / 11
1.3.4？知识要点 / 13
1.4？案例：函数 / 14
1.4.1？案例描述 / 14
1.4.2？实现效果 / 14
1.4.3？案例实现 / 15
1.4.4？知识要点 / 16
1.5？案例：类和对象 / 20
1.5.1？案例描述 / 20
1.5.2？实现效果 / 20
1.5.3？案例实现 / 21
1.5.4？知识要点 / 23
1.6？案例：接口 / 25
1.6.1？案例描述 / 25
1.6.2？实现效果 / 25
1.6.3？案例实现 / 25
1.6.4？知识要点 / 28
1.7？案例：泛型 / 29
1.7.1？案例描述 / 29
1.7.2？实现效果 / 29
1.7.3？案例实现 / 29
1.7.4？知识要点 / 30
1.8？案例：类、接口和泛型的综合应用 / 31
1.8.1？案例描述 / 31
1.8.2？实现效果 / 31
1.8.3？案例实现 / 31
1.8.4？知识要点 / 32
1.9？案例：模块和命名空间 / 33
1.9.1？案例描述 / 33
1.9.2？实现效果 / 33
1.9.3？案例实现 / 33
1.9.4？知识要点 / 35
1.10？案例：类装饰器 / 36
1.10.1？案例描述 / 36
1.10.2？实现效果 / 36
1.10.3？案例实现 / 36
1.10.4？知识要点 / 37习题一 / 37
第2章 Angular编程基础 / 45
2.1？Angular简介 / 45
2.1.1？Angular的发展历程 / 45
2.1.2？Angular的特点 / 47
2.1.3？Angular的功能 / 47
2.1.4？Angular的三驾马车 / 47
2.1.5？Angular的核心概念 / 47
2.2？案例：编程基础—Hello Angular / 48
2.2.1？案例描述 / 482.2.2？实现效果 / 48
2.2.3？案例实现 / 48
2.2.4？知识要点 / 50
2.3？案例：编程基础——文本与图片 / 51
2.3.1？案例描述 / 51
2.3.2？实现效果 / 51
2.3.3？案例实现 / 52
2.3.4？知识要点 / 53
2.4？案例：编程基础——Flex布局 / 53
2.4.1？案例描述 / 53
2.4.2？实现效果 / 53
2.4.3？案例实现 / 54
2.4.4？知识要点 / 57
2.5？案例：创建组件——多组件布局 / 59
2.5.1？案例描述 / 59
2.5.2？实现效果 / 59
2.5.3？案例实现 / 59
2.5.4？知识要点 / 60习题二 / 61
第3章 数据绑定及数据传递 / 67
3.1？案例：数据与事件绑定——计时器 / 67
3.1.1？案例描述 / 67
3.1.2？实现效果 / 67
3.1.3？案例实现 / 68
3.1.4？知识要点 / 70
3.2？案例：属性与事件绑定——图片与声音 / 71
3.2.1？案例描述 / 71
3.2.2？实现效果 / 71
3.2.3？案例实现 / 73
3.2.4？知识要点 / 75
3.3？案例：数据和属性绑定——动态格式设置 / 75
3.3.1？案例描述 / 75
3.3.2？实现效果 / 75
3.3.3？案例实现 / 76
3.3.4？知识要点 / 79
3.4？案例：双向数据传递——摄氏 /华氏温度转换器 / 80
3.4.1？案例描述 / 80
3.4.2？实现效果 / 80
3.4.3？案例实现 / 80
3.4.4？知识要点 / 84
3.5？案例：双向数据传递——三角形面积计算器 / 85
3.5.1？案例描述 / 85
3.5.2？实现效果 / 85
3.5.3？案例实现 / 85
3.5.4？知识要点 / 88
3.6？案例：模板文件向逻辑文件传值——数学公式计算 / 88
3.6.1？案例描述 / 88
3.6.2？实现效果 / 88
3.6.3？案例实现 / 89
3.6.4？知识要点 / 91习题三 / 91
第4章 指令与表单 / 95
4.1？案例：ngStyle指令——自动随机变化的颜色 / 95
4.1.1？案例描述 / 95
4.1.2？实现效果 / 95
4.1.3？案例实现 / 96
4.1.4？知识要点 / 98
4.2？案例：ngClass指令——页面布局 / 99
4.2.1？案例描述 / 99
4.2.2？实现效果 / 99
4.2.3？案例实现 / 100
4.2.4？知识要点 / 103
4.3？案例：ngIf指令——阶乘计算器 / 103
4.3.1？案例描述 / 103
4.3.2？实现效果 / 103
4.3.3？案例实现 / 104
4.3.4？知识要点 / 106
4.4？案例：ngSwitch指令——选择颜色 / 107
4.4.1？案例描述 / 1074.4.2？实现效果 / 107
4.4.3？案例实现 / 108
4.4.4？知识要点 / 111
4.5？案例：ngIf和ngSwitch——成绩等级计算器 / 111
4.5.1？案例描述 / 111
4.5.2？实现效果 / 111
4.5.3？案例实现 / 112
4.5.4？知识要点 / 114
4.6？案例：ngFor指令——神舟飞船载人航天历程 / 114
4.6.1？案例描述 / 114
4.6.2？实现效果 / 114
4.6.3？案例实现 / 114
4.6.4？知识要点 / 116
4.7？案例：ngIf和 ngFor指令——打印九九乘法表 / 117
4.7.1？案例描述 / 117
4.7.2？实现效果 / 117
4.7.3？案例实现 / 118
4.7.4？知识要点 / 119
4.8？案例：模板式表单——个人信息管理 / 120
4.8.1？案例描述 / 120
4.8.2？实现效果 / 120
4.8.3？案例实现 / 120
4.8.4？知识要点 / 122
4.9？案例：复选框和单选按钮——设置字体样式和大小 / 126
4.9.1？案例描述 / 126
4.9.2？实现效果 / 126
4.9.3？案例实现 / 127
4.9.4？知识要点 / 129
4.10？案例：表单综合应用——代办事项 / 130
4.10.1？案例描述 / 130
4.10.2？实现效果 / 130
4.10.3？案例实现 / 131
4.10.4？知识要点 / 133习题四 / 133
第5章 类、服务和依赖注入 / 138
5.1？案例：创建类——数据管理 / 138
5.1.1？案例描述 / 138
5.1.2？实现效果 / 138
5.1.3？案例实现 / 139
5.1.4？知识要点 / 140
5.2？案例：服务——宠物商店 / 140
5.2.1？案例描述 / 140
5.2.2？实现效果 / 140
5.2.3？案例实现 / 141
5.2.4？知识要点 / 143
5.3？案例：服务和依赖注入——产品展示 / 143
5.3.1？案例描述 / 143
5.3.2？实现效果 / 143
5.3.3？案例实现 / 144
5.3.4？知识要点 / 147
5.4？案例：服务和依赖注入——子组件向父组件传值 / 150
5.4.1？案例描述 / 150
5.4.2？实现效果 / 150
5.4.3？案例实现 / 151
5.4.4？知识要点 / 154
5.5？案例：服务和依赖注入——随机数 / 154
5.5.1？案例描述 / 154
5.5.2？实现效果 / 154
5.5.3？案例实现 / 155
5.5.4？知识要点 / 158习题五 / 159
第6章 装饰器、管道、路由和生命周期函数 / 161
6.1？案例：Input装饰器——父组件向子组件传值 / 161
6.1.1？案例描述 / 161
6.1.2？实现效果 / 161
6.1.3？案例实现 / 1626.1.4？知识要点 / 164
6.2？案例：Input和 ViewChild装饰器——父子组件之间的通信 / 165
6.2.1？案例描述 / 165
6.2.2？实现效果 / 165
6.2.3？案例实现 / 165
6.2.4？知识要点 / 169
6.3？案例：ViewChild装饰器——获取 Dom节点和与子组件通信 / 171
6.3.1？案例描述 / 171
6.3.2？实现效果 / 171
6.3.3？案例实现 / 172
6.3.4？知识要点 / 175
6.4？案例：管道——数据格式化 / 177
6.4.1？案例描述 / 177
6.4.2？实现效果 / 177
6.4.3？案例实现 / 177
6.4.4？知识要点 / 181
6.5？案例：路由——组件间跳转 / 183
6.5.1？案例描述 / 183
6.5.2？实现效果 / 183
6.5.3？案例实现 / 185
6.5.4？知识要点 / 190
6.6？案例：生命周期函数——函数的执行顺序 / 193
6.6.1？案例描述 / 193
6.6.2？实现效果 / 193
6.6.3？案例实现 / 196
6.6.4？知识要点 / 198习题六 / 199
第7章 Ng-Zorro-Antd组件库和服务器部署 / 203
7.1？案例：Ng-Zorro-Antd——按钮、图标和分隔线 / 203
7.1.1？案例描述 / 203
7.1.2？实现效果 / 203
7.1.3？案例实现 / 204
7.1.4？知识要点 / 208
7.2？案例：Ng-Zorro-Antd——页面布局 / 2097.2.1？案例描述 / 209
7.2.2？实现效果 / 209
7.2.3？案例实现 / 210
7.2.4？知识要点 / 216
7.3？案例：Ng-Zorro-Antd——组件综合应用 / 217
7.3.1？案例描述 / 217
7.3.2？实现效果 / 217
7.3.3？案例实现 / 222
7.3.4？知识要点 / 238
7.4？案例：服务器部署——网站发布 / 260
7.4.1？案例描述 / 260
7.4.2？实现效果 / 260
7.4.3？案例实现 / 261
7.4.4？知识要点 / 263习题七 / 263
习题参考答案 / 269
参考文献/ 272？

杜春涛，博士，教授，研究生导师，北方工业大学计算机基础教研室主任，美国明尼苏达大学访问学者，教育部首批课程思政示范课《面向对象程序设计》负责人和教学名师，北京市首批课程思政示范课《微信小程序开发》负责人和教学名师，北京市教学名师。获北京市高等教育教学成果一等奖1项（排名第一）、北方工业大学高等教育教学成果特等奖2项（排名第一）和首届教师教学创新大赛一等奖，主编的2部教材获北京高校优质本科教材课件（重点）。负责建设慕课4门（选课人数超过25万），主持教育教学项目20多项（其中教育部产学合作协同育人项目8项），发表论文40多篇，主编教材5部，出版专著3部。

1. 采用案例式教学：书中内容都以案例形式呈现，全书共设计了44个教学案例，采用“案例描述→实现效果→案例实现→知识要点”的方式进行讲解，符合人的认知规律。

2. 配套资源丰富（慕课+微课）：本书采用 MOOC+微课模式，配套MOOC及资源已在“国家高等教育智慧教育平台”上线，读者也可以直接扫描书中的二维码观看每个案例的教学视频。全书共有48个微视频，总时长1000多分钟，讲解非常详细，便于读者自学。慕课平台中提供了课件、程序源代码和电子教案等资源的下载。

3. 课程思政创新：书中融入了“女排精神”等大量思政元素，为思政教学提供了丰富资源。

4. 本书是教育部产学合作协同育人项目成果。