主要内容:

? 深入理解MVC模式的架构

? 使用Angular创建内容丰富、灵动多变的Web应用客户端

? 使用ng工具创建和构建Angular项目

? 扩展和定制Angular

? 测试Angular项目

新增内容:

? 根据Angular 7的特性和变化做了全面细致的修订

? 涵盖@angular/cli、ng命令行工具和webpack

? 包含用于简化异步HTTP请求的HttpClient

? 更新了管道和本地化文本的显示

█ █ █

译  者  序

在Web开发领域，一般使用HTML作为前端页面元素的声明式语言，使用CSS技术作为展示样式的描述语言，JavaScript作为业务处理交互的命令式语言。而构建非常复杂的Web应用时，纯粹而有限的HTML就显得非常不足，JavaScript本身也会随着项目代码量的膨胀而变得难以维护和管理，研发工期和成本也会随之难以控制。此时，一般使用类库(如jQuery、Dojo等)或框架(如Backbone、Ember和ExtJS等)来提升开发效率，缩短项目的工期和降低成本，方便后续的维护和管理。

 而AngularJS不仅是一个理念先进的前端开发框架，更是一种端对端的解决方案，已经被用于Google的多款产品中。AngularJS遵从架构设计中的MVC模式，提倡展现、数据和逻辑处理组件的松耦合(类似Flex和WPF)。AngularJS通过指令技术对传统HTML实现了自然扩展，通过编译技术实现了数据模型与展现视图的双向自动同步，消除了前端开发中繁杂的DOM操作。最后通过模块化设计解决了JS代码管理维护和按需加载的问题，提高了广大前端程序员以及后端程序员的生产效率。而且这种解耦本身，也对前端的自动化测试技术提供了良好的支持。

AngularJS诞生于2009年，由Misko Hevery 和Adam Abrons创建，后为Google所收购。AngularJS有许多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等。AngularJS 是专门为应用程序设计的 HTML。

Angular 2.0是2014年10月22日在ng-Europe会议上发布的，该版本完全重写了AngularJS。为避免开发人员的困惑，开发团队宣布每个框架都应该使用单独的术语，其中“AngularJS”指的是版本1。x版本和没有“JS”的“Angular”指的是版本2及更高版本。

Angular 6于2018年5月4日发布。这是一个重要版本，它对底层框架的关注较少，考虑更多的是工具链，以及如何使Angular更易于在未来提高效率，如ng update、ng add、Angular Elements、Angular Material + CDK Components、Angular Material Starter Components、CLI Workspaces、Library Support、Tree Shakable Providers、Animations Performance Improvements和RxJS v6。

Angular 7让Angular变得更出色，为顺应现代趋势增加了比特币挖掘、虚拟滚动、拖放等功能。

《Angular高级编程(第3版)》分为三个部分，每部分涵盖一组相关的主题。《Angular高级编程(第3版)》第Ⅰ部分回顾了一些关键技术的基本知识，包括HTML、CSS和TypeScript，并展示如何构建第一个Angular应用程序。第Ⅱ部分介绍Angular为构建应用程序提供的构造块，依次描述所有这些构造块。深入描述Angular包含的很多内置功能，以及丰富的Angular自定义选项。第Ⅲ部分介绍如何使用高级功能来创建更复杂、可扩展的应用程序。演示如何在Angular应用程序中进行异步HTTP请求，如何使用URL路由在应用程序中导航，以及在应用程序的状态发生变化时如何使HTML元素具有动画效果。

《Angular高级编程(第3版)》堪称Angular领域的里程碑式著作，涵盖了关于Angular的几乎所有内容。《Angular高级编程(第3版)》平实、通俗的讲解，丰富、翔实的示例，递进、严密的组织，可以让新手毫无压力地登堂入室，迅速吸取新一代Web应用开发的精髓。对于具有相关经验的用户，《Angular高级编程(第3版)》对Angular概念和技术细节的全面剖析，以及引人入胜、切中肯綮的讲解，将帮助读者彻底掌握这个框架，在自己职业技术修炼之路上更进一步。

这里要感谢清华大学出版社的编辑们，他们为《Angular高级编程(第3版)》的翻译投入了巨大热情并付出了很多心血。没有他们的帮助和鼓励，《Angular高级编程(第3版)》不可能顺利付梓。

对于这本经典之作，译者本着“诚惶诚恐”的态度，在翻译过程中力求“信、达、雅”，但是鉴于译者水平有限，错误和失误在所难免，如有任何意见和建议，请不吝指正。

译者

█ █ █

目    录

 

第Ⅰ部分  Angular基础知识

第1章  准备工作   3

1.1  需要了解什么   3

1.2  本书结构   3

1.2.1  第Ⅰ部分：Angular基础知识   3

1.2.2  第Ⅱ部分：Angular详解   3

1.2.3  第Ⅲ部分：Angular高级功能   3

1.3  大量示例   4

1.4  获取示例代码   5

1.5  如何搭建开发环境   5

1.6  联系作者   5

1.7  本章小结   5

第2章  第一个Angular应用程序   7

2.1  准备开发环境   7

2.1.1  安装Node.js   7

2.1.2  安装angular-cli包   8

2.1.3  安装Git   8

2.1.4  安装编辑器   8

2.1.5  安装浏览器   9

2.2  创建并准备项目   9

2.2.1  创建项目   9

2.2.2  添加Bootstrap CSS包   9

2.2.3  启动开发工具   10

2.2.4  编辑HTML文件   10

2.3  向项目中添加Angular功能   12

2.3.1  准备HTML文件   12

2.3.2  创建数据模型   12

2.3.3  创建模板   14

2.3.4  准备组件   14

2.3.5  将应用程序组合起来   16

2.4  向示例应用程序中添加功能   17

2.4.1  添加待办事项表格   17

2.4.2  创建双向数据绑定   19

2.4.3  添加待办事项   21

2.5  本章小结   23

第3章  将Angular放在上下文中   25

3.1  理解Angular的强项   25

3.1.1  往返式应用程序和单页式应用程序   25

3.1.2  Angular与jQuery的比较   26

3.2  比较Angular、React和Vue.js   27

3.3  理解MVC模式   27

3.3.1  理解模型   28

3.3.2  理解控制器/组件   29

3.3.3  理解视图/模板   30

3.4  理解RESTful服务   30

3.5  常见的设计缺陷   31

3.5.1  将逻辑放错地方   31

3.5.2  数据存储采用的数据格式   32

3.5.3  足够的知识足以制造麻烦   32

3.6  本章小结   32

第4章  HTML和CSS入门   33

4.1  准备示例项目   33

4.2  理解HTML   34

4.2.1  理解空元素   35

4.2.2  理解属性   35

4.2.3  应用无值属性   35

4.2.4  在属性中引用字面量   35

4.2.5  理解元素内容   36

4.2.6  理解文档结构   36

4.3  理解Bootstrap   37

4.3.1  应用基本的Bootstrap类   37

4.3.2  使用Bootstrap样式化表格   40

4.3.3  使用Bootstrap创建表单   41

4.3.4  使用Bootstrap创建网格   42

4.4  本章小结   46

第5章  JavaScript与TypeScript：第1部分   47

5.1  准备示例项目   48

5.2  使用语句   49

5.3  定义和使用函数   50

5.3.1  定义带参数的函数   51

5.3.2  定义返回结果的函数   52

5.3.3  将函数用作其他函数的实参   52

5.4  使用变量和类型   53

5.4.1  使用变量闭包   54

5.4.2  使用基本数据类型   54

5.5  使用JavaScript操作符   56

5.5.1  使用条件语句   56

5.5.2  相等操作符和恒等操作符   57

5.5.3  显式类型转换   58

5.6  处理数组   59

5.6.1  使用数组字面量   59

5.6.2  数组内容的读取和修改   59

5.6.3  遍历数组内容   60

5.6.4  spread操作符   60

5.6.5  使用内置数组方法   61

5.7  本章小结   62

第6章  JavaScript与TypeScript：第2部分   63

6.1  准备示例项目   63

6.2  使用对象   63

6.2.1  使用对象字面量   64

6.2.2  将函数用作方法   64

6.2.3  定义类   65

6.3  处理JavaScript模块   67

6.4  有用的TypeScript特性   70

6.4.1  使用类型注解   70

6.4.2  使用元组   74

6.4.3  使用可索引类型   74

6.4.4  使用访问修饰符   74

6.5  本章小结   75

第7章  SportsStore：一个真实的应用程序   77

7.1  准备项目   77

7.1.1  安装额外的NPM软件包   77

7.1.2  准备RESTful Web服务   78

7.1.3  准备HTML文件   80

7.1.4  创建文件夹结构   80

7.1.5  运行示例应用程序   80

7.1.6  启动RESTful Web服务   81

7.2  准备Angular项目功能   81

7.2.1  更新根组件   81

7.2.2  更新根模块   82

7.2.3  检查引导文件   82

7.3  启动数据模型   83

7.3.1  创建模型类   83

7.3.2  创建虚拟数据源   83

7.3.3  创建模型存储库   84

7.3.4  创建功能模块   85

7.4  启动商店   85

7.4.1  创建Store组件和模板   85

7.4.2  创建商店功能模块   86

7.4.3  更新根组件和根模块   87

7.5  添加商店功能：产品详情   88

7.5.1  显示产品详情   88

7.5.2  添加类别选择   89

7.5.3  添加产品分页功能   90

7.5.4  创建自定义指令   92

7.6  本章小结   95

第8章  SportsStore：订单和结账   97

8.1  准备示例应用程序   97

8.2  创建购物车   97

8.2.1  创建购物车模型   97

8.2.2  创建购物车概览组件   98

8.2.3  将购物车集成到商店中   100

8.3  添加URL路由   102

8.3.1  创建购物车详情和结账组件   102

8.3.2  创建和应用路由配置   103

8.3.3  应用程序导航   104

8.3.4  路由守卫   106

8.4  完成购物车详情功能   107

8.5  处理订单   109

8.5.1  扩展模型   109

8.5.2  收集订单详情   111

8.6  使用RESTful Web服务   114

8.7  本章小结   115

第9章  SportsStore：管理   117

9.1  准备示例应用程序   117

9.1.1  创建模块   117

9.1.2  配置URL路由系统   119

9.1.3  导航到管理URL   120

9.2  实现身份验证   121

9.2.1  理解身份验证系统   121

9.2.2  扩展数据源   122

9.2.3  创建身份验证服务   122

9.2.4  启用身份验证   123

9.3  扩展数据源和存储库   125

9.4  创建管理功能结构   128

9.4.1  创建占位符组件   128

9.4.2  准备常用内容和功能模块   129

9.4.3  实现产品功能   130

9.4.4  实现订单功能   133

9.5  本章小结   135

第10章  SportsStore：渐进式功能和部署   137

10.1  准备示例应用程序   137

10.2  添加渐进式特性   137

10.2.1  安装PWA包   137

10.2.2  缓存数据URL   137

10.2.3  响应对连接的更改   138

10.3  为部署准备应用程序   140

10.3.1  创建数据文件   140

10.3.2  创建服务器   140

10.3.3  更改存储库类中的Web服务URL   142

10.4  构建和测试应用程序   142

10.5  将SportsStore应用程序容器化   144

10.5.1  安装Docker   144

10.5.2  准备应用程序   144

10.5.3  创建Docker容器   144

10.5.4  运行应用程序   145

10.6  本章小结   146

第Ⅱ部分  Angular详解

第11章  创建Angular项目   149

11.1  创建新的Angular项目   149

11.2  了解项目结构   150

11.2.1  了解src文件夹   151

11.2.2  了解包文件夹   152

11.3  使用开发工具   154

11.3.1  了解开发HTTP服务器   155

11.3.2  了解热模型替换   155

11.3.3  使用linter   156

11.4  理解Angular应用程序是如何工作的   158

11.4.1  理解HTML文档   158

11.4.2  理解应用程序引导   158

11.4.3  理解Angular根模块   159

11.4.4  理解Angular组件   160

11.4.5  理解内容显示   160

11.5  在Angular项目中开始开发   161

11.5.1  添加Bootstrap CSS框架   161

11.5.2  创建数据模型   161

11.5.3  创建模板和根组件   164

11.5.4  配置根Angular模块   165

11.6  本章小结   165

第12章  使用数据绑定   167

12.1  准备示例项目   167

12.2  理解单向数据绑定   168

12.2.1  理解绑定目标   169

12.2.2  理解表达式   170

12.2.3  理解括号   171

12.2.4  理解宿主元素   171

12.3  使用标准属性和属性绑定   172

12.3.1  使用标准属性绑定   172

12.3.2  使用字符串插入绑定   173

12.3.3  使用元素属性绑定   174

12.4  设置CSS类和样式   174

12.4.1  使用类绑定   175

12.4.2  使用样式绑定   178

12.5  更新应用程序的数据   180

12.6  本章小结   182

第13章  使用内置指令   183

13.1  准备示例项目   183

13.2  使用内置指令   185

13.2.1  使用ngIf指令   185

13.2.2  使用ngSwitch指令   187

13.2.3  使用ngFor指令   189

13.2.4  使用ngTemplateOutlet指令   195

13.3  理解单向数据绑定的限制   197

13.3.1  使用幂等表达式   197

13.3.2  理解表达式上下文   199

13.4  本章小结   201

第14章  使用事件和表单   203

14.1  准备示例项目   203

14.1.1  导入表单模块   203

14.1.2  准备组件和模板   204

14.2  使用事件绑定   205

14.2.1  理解动态定义的属性   206

14.2.2  使用事件数据   208

14.2.3  使用模板引用变量   209

14.3  使用双向数据绑定   210

14.4  处理表单   212

14.4.1  向示例应用程序添加表单   213

14.4.2  添加表单数据验证   214

14.4.3  验证整个表单   221

14.5  使用基于模型的表单   226

14.5.1  启用基于模型的表单功能   226

14.5.2  定义表单模型类   226

14.5.3  使用模型进行验证   229

14.5.4  根据模型生成元素   231

14.6  创建自定义表单验证器   232

14.7  本章小结   234

第15章  创建属性指令   235

15.1  准备示例项目   235

15.2  创建简单的属性指令   237

15.3  在指令中访问应用程序数据   239

15.3.1  读取宿主元素属性   239

15.3.2  创建数据绑定输入属性   241

15.3.3  响应输入属性的变化   243

15.4  创建自定义事件   244

15.5  创建宿主元素绑定   247

15.6  在宿主元素上创建双向绑定   248

15.7  导出指令用于模板变量   250

15.8  本章小结   251

第16章  创建结构型指令   253

16.1  准备示例项目   253

16.2  创建简单的结构型指令   254

16.2.1  实现结构型指令类   255

16.2.2  启用结构型指令   257

16.2.3  使用结构型指令的简洁语法   258

16.3  创建迭代结构型指令   259

16.3.1  提供额外的上下文数据   261

16.3.2  使用简洁的结构语法   262

16.3.3  处理属性级数据变更   263

16.3.4  处理集合级数据变更   264

16.4  查询宿主元素内容   271

16.4.1  查询多个子内容   274

16.4.2  接收查询变更通知   275

16.5  本章小结   276

第17章  理解组件   277

17.1  准备示例项目   278

17.2  使用组件来组织应用程序   278

17.2.1  创建新组件   279

17.2.2  定义模板   282

17.2.3  完成组件的重组   289

17.3  使用组件样式   289

17.3.1  定义外部组件样式   290

17.3.2  使用高级样式特性   291

17.4  查询模板内容   296

17.5  本章小结   298

第18章  使用和创建管道   299

18.1  准备示例项目   299

18.2  理解管道   302

18.3  创建一个自定义管道   303

18.3.1  注册自定义管道   303

18.3.2  应用自定义管道   304

18.3.3  组合管道   305

18.3.4  创建非纯管道   306

18.4  使用内置管道   309

18.4.1  格式化数值   309

18.4.2  格式化货币值   311

18.4.3  格式化百分比   313

18.4.4  格式化日期   314

18.4.5  改变字符串大小写   317

18.4.6  将数据序列化为JSON数据   317

18.4.7  将数据数组切片   318

18.5  本章小结   319

第19章  使用服务   321

19.1  准备示例项目   321

19.2  理解对象分发问题   322

19.2.1  问题的提出   322

19.2.2  利用依赖注入将对象作为服务分发   326

19.2.3  在其他构造块中声明依赖   330

19.3  理解测试隔离问题   335

19.4  完成服务的融入   338

19.4.1  更新根组件和模板   338

19.4.2  更新子组件   339

19.5  本章小结   340

第20章  使用服务提供程序   341

20.1  准备示例项目   342

20.2  使用服务提供程序   343

20.2.1  使用类提供程序   345

20.2.2  使用值提供程序   350

20.2.3  使用工厂提供程序   351

20.2.4  使用已有的服务提供程序   353

20.3  使用本地提供程序   354

20.3.1  理解单个服务对象的局限性   354

20.3.2  在组件中创建本地提供程序   355

20.3.3  理解服务提供程序的替代方案   357

20.3.4  控制依赖解析   360

20.4  本章小结   361

第21章  使用和创建模块   363

21.1  准备示例项目   363

21.2  理解根模块   365

21.2.1  理解imports属性   366

21.2.2  理解declarations 属性   366

21.2.3  理解providers属性   367

21.2.4  理解bootstrap属性   367

21.3  创建功能模块   368

21.3.1  创建模型模块   369

21.3.2  创建实用工具功能模块   373

21.3.3  用组件创建一个功能模块   377

21.4  本章小结   380

第Ⅲ部分  Angular高级功能

第22章  创建示例项目   383

22.1  启动示例项目   383

22.1.1  添加和配置Bootstrap CSS包   383

22.1.2  创建项目结构   383

22.2  创建模型模块   384

22.2.1  创建产品数据类型   384

22.2.2  创建数据源和存储库   384

22.2.3  完成模型模块   385

22.3  创建核心模块   385

22.3.1  创建共享状态服务   386

22.3.2  创建表格组件   386

22.3.3  创建表单组件   387

22.4.4  完成核心模块   389

22.4  创建消息模块   389

22.4.1  创建消息模型和服务   389

22.4.2  创建组件和模板   390

22.4.3  完成消息模块   390

22.5  完成项目   391

22.6  本章小结   392

第23章  使用Reactive Extensions   393

23.1  准备示例项目   394

23.2  理解问题   394

23.3  使用Reactive Extensions解决问题   396

23.3.1  理解Observable   396

23.3.2  理解Observer   398

23.3.3  理解Subject   399

23.4  使用async管道   400

23.5  扩展应用程序功能模块   402

23.6  更进一步   404

23.6.1  过滤事件   404

23.6.2  转换事件   405

23.6.3  只接收不同的事件   407

23.6.4  获取和忽略事件   409

23.7  本章小结   410

第24章  生成异步HTTP请求   411

24.1  准备示例项目   411

24.1.1  配置模型功能模块   412

24.1.2  创建数据文件   412

24.1.3  更新表单组件   413

24.1.4  运行示例项目   413

24.2  理解RESTful Web服务   414

24.3  替换静态数据源   414

24.3.1  创建新的数据源服务   414

24.3.2  配置数据源   416

24.3.3  使用REST数据源   416

24.3.4  保存和删除数据   417

24.4  加强HTTP请求   419

24.5  生成跨域请求   420

24.6  配置请求头   422

24.7  处理错误   424

24.7.1  生成用户可使用的消息   425

24.7.2  处理错误   426

24.8  本章小结   427

第25章  路由与导航：第1部分   429

25.1  准备示例项目   429

25.2  开始学习路由   431

25.2.1  创建路由配置   431

25.2.2  创建路由组件   433

25.2.3  更新根模块   433

25.2.4  完成配置   433

25.2.5  添加导航链接   434

25.2.6  理解路由的效果   436

25.3  完成路由实现   437

25.3.1  在组件中处理路由变化   438

25.3.2  使用路由参数   439

25.3.3  在代码中导航   444

25.3.4  接收导航事件   445

25.3.5  删除事件绑定和支持代码   446

25.4  本章小结   448

第26章  路由与导航：第2部分   449

26.1  准备示例项目   449

26.2  使用通配符和重定向   454

26.2.1  在路由中使用通配符   454

26.2.2  在路由中使用重定向   455

26.3  在组件内部导航   456

26.3.1  响应正在发生的路由变化   457

26.3.2  为活动路由设置不同样式的链接   459

26.3.3  修复All按钮   461

26.4  创建子路由   462

26.4.1  创建子路由出口   463

26.4.2  从子路由访问参数   464

26.5  本章小结   467

第27章  路由与导航：第3部分   469

27.1  准备示例项目   469

27.2  守卫路由   470

27.2.1  使用解析器推迟导航   470

27.2.2  避免带有守卫的导航   476

27.3  动态加载功能模块   484

27.3.1  创建一个简单的功能模块   484

27.3.2  动态加载模块   485

27.3.3  守卫动态模块   488

27.4  指定命名出口   490

27.4.1  创建附加的出口元素   490

27.4.2  在使用多个出口的情况下导航   491

27.5  本章小结   493

第28章  使用动画   495

28.1  准备示例项目   496

28.1.1  禁用HTTP延迟   496

28.1.2  简化表格模板和路由配置   496

28.2  开始学习Angular动画   498

28.2.1  启用动画模块   498

28.2.2  创建动画   499

28.2.3  应用动画   501

28.2.4  测试动画效果   503

28.3  理解内置的动画状态   504

28.4  理解元素过渡   505

28.4.1  为内置状态创建过渡   505

28.4.2  控制动画的过渡   506

28.5  理解动画样式组   510

28.5.1  在可重用的分组中定义公共样式   510

28.5.2  使用元素变形   511

28.5.3  应用CSS框架样式   512

28.6  本章小结   514

第29章  Angular单元测试   515

29.1  准备示例项目   516

29.2  创建一个简单的单元测试   517

29.3  使用Jasmine完成单元测试   518

29.4  测试Angular组件   519

29.4.1  使用TestBed类完成工作   519

29.4.2  测试数据绑定   522

29.4.3  测试带有外部模板的组件   523

29.4.4  测试组件事件   525

29.4.5  测试输出属性   526

29.4.6  测试输入属性   528

29.4.7  测试异步操作   529

29.5  测试Angular指令   531

29.6  本章小结   532

 

 

Angular是构建动态JavaScript应用程序的领先框架，《Angular高级编程(第3版)》将帮你高效使用Angular 7，充分发挥这个框架的潜力！《Angular高级编程(第3版)》开篇讲解MVC模式及其优势，然后浓墨重彩地描述如何在项目中使用Angular；从基础要点讲起，循序渐进地引导你构建最高级、最复杂的功能，期间深入探讨相关的知识点。

《Angular高级编程(第3版)》对每个主题的诠释都清晰凝练，涵盖有助于你提高工作效率的大量技术细节；言简意赅、深入浅出地讨论Angular框架最重要的功能；每章都列出常见问题，并详细解释如何避免问题的发生。

Adam Freeman是一位经验丰富的IT专业人士，曾在多家公司担任过高级职位，曾经担任一家全球银行的首席技术官和首席运营官。退休之后，他热衷于写作和长跑。