前言

时至今日，仍然有很多人对Angular的印象停留在AngularJS上，认为它是一个学习曲线极为陡峭并且使用起来极为麻烦的框架。但事实上，Angular和AngularJS不是同一个框架，我们甚至只要掌握Angular提供的不到十个函数或方法的调用，就可以快速地开发出一个成熟的单页面应用程序。

诚然，这些函数或方法不像我们熟悉的jQuery那样直观，但它们背后的理论和思想并不是Angular自创的，而是随着软件工程的发展而诞生的，并在服务器端、桌面和移动端应用程序上运用了长达几十年。

也有很多人说Angular是面向未来的框架，因为科学、高效且成熟的理论和思想从来不会“安分”，它们早已开始从服务器端、桌面和移动端蔓延到Web客户端，而随着富有远见的Web客户端应用程序开发人员对这些理论和思想的逐渐接受，Angular自然会在不久的未来占据国内Web客户端应用程序开发的半壁江山——这一事情在国外早已发生。

尽管很多人都明白这一点，但确实也有不少人在走进Angular的世界时会面临一些阻碍，比如很多人并不熟悉Angular所推荐采用的开发语言TypeScript，甚至国内至今还没有一本专门介绍这门正式发布于2014年的“新潮”语言的图书。

本书就是为了帮助读者跨过这些障碍编写的，然后通过一个完整而详细的案例带领读者走进Angular的世界，以帮助读者建立系统的Angular技能框架，从而获得基于这一技能框架搭建并开发Angular应用程序的能力。

本书内容结构

具体来说，本书是通过以下内容来实现这一目的的。

本书第1章将带领读者初步认识Angular，使读者了解Angular的前身AngularJS是如何诞生的、AngularJS发展到Angular 2经历了哪些风雨、Angular 2为什么被称为一个框架，以及Angular 2之后的版本直接被命名为Angular的原因。

在对Angular有了一个初步的认识之后，我们本应该着手深入Angular的世界，以早日将其运用到工作中。但工欲善其事必先利其器，在带领读者继续了解Angular中的细节之前，本书第2章将先向读者介绍在学习开发Angular应用程序之前所需做的准备，比如了解Web前端开发常用的Node.js和npm到底是什么、它们和JavaScript的关系以及它们在我们的学习和工作中将发挥什么作用。

除了Node.js和npm，Angular应用程序的开发还离不开相应的代码编辑器和开发语言。本书采用的代码编辑器和开发语言分别为Visual Studio Code和TypeScript，因此第2章随后将介绍Visual Studio Code以及TypeScript编译器的安装和使用方法，其中包括如何使用Visual Studio Code编写TypeScript代码，如何使用TypeScript编译器将TypeScript代码编译成JavaScript代码，以及如何在Node.js、TypeScript代码的编译结果以及如何在Visual Studio Code的帮助下调试TypeScript代码。

除了开发工具，Angular应用程序的开发通常还离不开Web服务器端的支持，因此第2章还将介绍一个基于Node.js的Web服务器端框架Express，并展示如何通过它快速地开发一个可以承载Angular应用程序的服务器端应用程序。

在做好以上所有准备之后，任何具备其他面向对象编程语言使用经验的读者都应该可以开始学习Angular应用程序的开发了。没有这一经验的读者也请不用担心，因为本书第3～5章将详细系统地介绍Angular应用程序的首选开发语言TypeScript。

具体来说，第3章将介绍TypeScript中的模块、基础类型、函数和类等基础语法，以帮助读者快速了解TypeScript。第4章将继续深入介绍TypeScript中的类型、接口、泛型以及装饰器，并带领读者创建基于装饰器的对象工厂和依赖注入器，以帮助读者更加深切地感受TypeScript中的强类型在开发中带来的便利。第5章将对TypeScript中的模块、命名空间和声明文件进行补充，以帮助读者更加系统地认识TypeScript，从而将TypeScript用得更加得心应手。

在读者做好所有准备工作，并对TypeScript有了一个系统的认识之后，本书第6章将开始向读者介绍Angular中的基础概念，带领读者基于对这些概念的了解快速地从零开始创建一个简单的Angular应用程序，并帮助读者梳理Angular和大名鼎鼎的MVC、MVVM以及所谓的MVW之间的关系。

学完第6章的内容，读者会发现Angular绝不像说的那样难以接近——事实上，基于Angular开发的应用程序有着非常清晰的结构，并且更加易于团队协作和维护。本书第7～13章能够证明这一点。这7章将带领读者通过Angular开发一个真实的名为“天天菜园”的蔬菜订购Web应用程序，使读者逐步系统地掌握Angular的整个框架，并最终具备构建一个结构清晰且易于开发和维护的Angular应用程序的能力。

值得说明的是，这7章的内容都以“天天菜园”中的真实需求逐步推进，而非简单地罗列Angular中的概念。比如本书第7章将带领读者基于在第6章中掌握的经验创建“天天菜园”应用程序，以商品列表展示需求为驱动更加深入地介绍Angular中的基础概念，展示这些概念在应用程序开发中的合理运用。

第8章则将在商品列表展示的基础上引入商品细节的展示，并以商品细节展示需求为驱动介绍路由器的使用方法，从而将“天天菜园”打造成一个单页面应用程序。单页面应用程序将面临领域划分、视图间的数据传递和共享等问题，因此本章还将介绍领域模块、路由配置模块和依赖注入，并通过它们来解决这些问题。

在将“天天菜园”打造成一个易于维护的单页面应用程序之后，第9章将引入一个独立于商品领域模块的客户领域模块，以实现客户的注册和登录。为了避免客户领域模块降低应用程序的启动效率，本章还将把客户领域模块打造成一个可延迟加载的路由加载模块。此外，为了快速高效地获取用户在视图中输入的注册和登录数据，本章还将介绍Angular表单的使用方法。

用户输入的数据并非总是合法的，因此第10章将继续介绍如何使用Angular表单验证，以阻止用户通过表单提交非法的数据，并给出相应的提示。在获得合法的输入数据之后，这些数据还需要被提交到Web服务器端，以实现真实的客户注册和登录。因此，本章最后还将介绍HttpClient的用法，并说明HttpClient为什么要结合使用RxJS中的可观察对象类Observable，以及Observable和观察者模式的关系。

有了商品领域模块和客户领域模块之后，第11章将带领读者为“天天菜园”创建另一个独立的购物车领域模块，以帮助读者复习并总结实现Angular应用程序中的领域模块的整个过程。此外，为了响应客户对购物车的操作，本章还将介绍如何通过事件绑定来处理用户在视图中触发的点击和输入等事件。为了在不影响购物车现有业务的情况下使客户可以在浏览购物车的同时搜索商品，本章最后还将介绍如何使用嵌套组件，以及如何在父组件和子组件之间进行通信。

经过以上几章的努力，“天天菜园”应有的功能基本得到了实现。接下来，第12章和第13章的职责则是对这些功能进行必要的完善，并对程序架构进行合理的调整。比如第12章将把商品搜索入口共享到商品列表中，为此将用到部件模块；而为了实现购物车商品数量和登录客户姓名的同步，还将用到服务模块。

为了保证应用程序的安全性，第13章将使用路由守卫，并定义自己的客户登录验证指令；为了简化消息提示并实现确认提示，本章将动态地创建组件实例；为了给用户带去良好的使用体验，本章还将使用动画。

第7～13章涉及大量看上去复杂甚至陌生的技术，但Angular中的这些技术使用起来其实相当容易，因此读者会在阅读完这7章（并实践了其中的所有案例）之后发现，自己不经意间就系统地掌握了Angular的知识体系，提升了从零开始架构并开发一个完整的Angular应用程序的能力。但目前来说，这样的应用程序仍存在一个严重的问题，那就是体积过于庞大——“天天菜园”大概会有4.5MB。

为了解决这个问题，本书最后一章（第14章）将介绍如何使用Angular CLI对现有Angular应用程序进行重构，即压缩应用程序中的名称标识符和空格，移除应用程序源代码、Angular源代码以及第三方库源代码中未被使用的代码，并对应用程序进行预先编译。

重构后的“天天菜园”会从大约4.5MB骤减到几百KB，而在完成这一极具意义的构建之后，最后一章还有一个重要的任务，那就是向读者展示如何在Angular CLI的帮助下快速地创建一个可直接运行的Angular应用程序模板，并继续在Angular CLI的帮助下快速地将这个模板扩展成我们要开发的目标应用程序——比如“天天菜园”的后台管理应用程序。

所谓的“快速”到底有多快呢？简单来说，它意味着“零配置”以及几行简单的Angular CLI命令。那具体来说它意味着什么呢？这或许就需要读者通过阅读本书的具体内容来寻找答案了。

读者对象

本书适合所有对Angular感兴趣或存在疑惑的读者，因为本书为读者走进Angular的世界做了充分的准备。读者只需要具备简单的Web前端开发经验，就可以在这些准备的帮助下一步一步地走进Angular的世界，并逐渐了解Angular中的各个细节。

本书也适合已经在使用Angular但对其缺乏全面认识的读者，因为本书循序渐进地将Angular中的各个概念运用到一个完整的案例中，这有助于读者轻松并系统地巩固这些概念。

本书同样适合需要学习TypeScript的读者，因为本书前三分之一的内容系统地介绍了TypeScript中的各个语言特性，尤其是其中的类型系统将对熟悉JavaScript的读者会有不少的帮助。

源代码和支持

本书源代码在异步社区本书详情页的配套资源中给出。

尽管笔者用心对待本书的每一章节和每一行代码，并通过多次审读来确保它们的准确性，但因个人能力有限，书中难免会有疏漏和不足之处，敬请广大读者指正。

如果读者在阅读本书内容或运行相关源代码时发现任何问题，或者对本书内容存有疑问，请发送邮件到294867413@qq.com的方式与笔者联系。