为什么选择 Angular？
Angular 是一个功能丰富的 JavaScript 框架，通过提供 schematics 命令，可在几分钟内创建可离线运行的渐进式 Web 应用（PWA）。
什么是 Angular
Angular 是由 Google 开发的开源 JavaScript 框架，用于构建动态且可扩展的 Web 应用程序。它结合了声明式模板、依赖注入、端到端测试工具（默认使用 Protractor）、清晰的责任分离等特性。刚开始接触 Angular 的开发者可能会因为必须遵循的各种规则和规范而感到困扰。
确实，与 React 等其他方案相比，Angular 的自由度似乎较低。然而，这些规范帮助我们遵循最佳实践，写出更整洁的代码。虽然初期学习曲线较陡，但一旦熟悉并掌握其规则，一个有明确设计思路的框架所带来的优势将变得尤为明显。
还需要记住的是，Angular 是一个 框架，因此不仅适用于小型应用，也适合复杂的大型企业级项目。随着每个新版本的发布，越来越多的库被集成到核心中，为开发者提供创建移动或桌面应用所需的一切功能。这使得组件管理更加简单，并有效避免潜在的兼容性问题。
Angular 的演进历程
Angular 的第一个版本名为 AngularJS（1.x 版本），于 2010 年 10 月发布。
其目标是通过模型-视图-控制器（MVC）架构简化 Web 应用的开发与测试。在 AngularJS 中，指令（Directives）是第一公民，允许动态操作 DOM 元素，同时遵循 DRY 原则（不要重复自己），避免代码冗余。
尽管 AngularJS 在当时对 Web 开发带来了显著提升，真正的变革发生在 Angular 2 的发布。Angular 完全重写为 TypeScript，支持类型系统，能够在编码阶段就发现错误，而不仅仅是在运行时。
如今，Angular 基于 RxJS 提供的 Observable API，引入了懒加载、优化的打包流程、动画支持以及重构后的变更检测机制，所有这些都整合在同一个框架内，无需再引入多个外部库。
另一个重要方面是：随着移动设备上网页内容消费的持续增长，性能优化成为移动端开发的核心关注点。为此，Angular 不断减小生成的包体积，并持续优化内存占用，以打造高性能的移动应用。
遗憾的是，新版本的早期发布并不稳定，不同小版本之间频繁变动，导致许多开发者感到不满。
因此，Angular 团队调整了发布节奏，每年推出两个主要版本，重点保障稳定性与向后兼容性。这一决策非常正确，重新赢得了开发者的信任。由于兼容性得到保证，开发者拥有两次发布周期（即一年时间）来适配代码并重构已弃用的功能。经过两个版本后，旧功能将不再有效，在编译时就会报错。
由于版本号快速跳变（如 Angular 2、3、4……），为了与最初的 AngularJS 区分开来，后续版本统一称为 “Angular”，以表明其与旧版的区别。
从 Angular 5 开始，服务工作线程（Service Worker）模块被加入框架，并持续获得更新。
尽管在 Angular 中可以通过多种方式创建 PWA（渐进式 Web 应用），但使用 CLI 是最简单直接的方法。
借助 Schematics，我们可以仅用一条命令，就自动生成一组文件和配置，并直接注入项目中。此外，该过程还能自动在生成的文件中加入新的最佳实践（例如支持遮罩图标）。在继续深入之前，我们先来了解 Schematics 在 Angular 生态中的重要性。
Angular Schematics
根据 Angular 官方文档：
Schematics 是一种基于模板的代码生成器，支持复杂逻辑。它是一组用于通过生成或修改代码来转换软件项目的指令集合。Schematics 被打包成集合，并通过 npm 安装。
我们将使用 Angular CLI 创建一个新项目，来演示第一个 Schematics 示例：
1$ ng new my-pwa-app 2? 是否添加 Angular 路由？是 3? 选择哪种样式格式？（使用方向键） 4❯ CSS 5 Sass [ http://sass-lang.com ] 6 Less [ http://lesscss.org ] 7 Stylus [ http://stylus-lang.com ]
ng new 这个 Schematics 会提出一系列问题，并根据用户输入动态生成不同的文件或配置。
Schematics 是一种高效的方式，可以自动为我们创建文件，或下载并安装整个模块到项目中。
生成文件
若要生成服务或组件，可执行以下命令：
1ng generate service // 添加服务类及单元测试文件 2 3ng generate component // 添加组件、模板、样式文件及单元测试文件 4 5// 更短的等效形式 6ng g s 7 8ng g c
我们还可以选择大量其他类型的 Schematics：
- appShell
- application
- class
- component
- directive
- enum
- guard
- interceptor
- interface
- library
- module
- pipe
- service
- webWorker
- serviceWorker
例如，命令 ng g serviceWorker 可用于创建一个新的服务工作线程文件。不过，通常我们会使用 ng add @angular/pwa 来安装 Angular Service Worker 模块，它会自动创建多个文件并完成全部配置。我们将在后续课程中详细讲解该命令的具体作用。
Angular CLI
Angular CLI 是官方提供的命令行接口，用于轻松初始化、开发和更新 Angular 应用。你可以在命令行终端或任意 IDE 的终端中使用它。
得益于 Angular CLI，我们无需手动配置 Webpack——这个在后台负责构建应用的 JavaScript 模块打包工具，也不必操心其他基础项目设置。
简而言之，Webpack 从入口文件开始，分析导入语句，构建依赖图谱，收集所有依赖项，最终输出一个或多个包含已编译处理后源码的资源包。
在 Angular 5 之前，Webpack 配置是可访问的，因为它并未集成在 CLI 内部。但从 Angular 6 开始，Angular 团队将构建系统从 SystemJS 改为 Webpack。此时仍可通过 ng eject 命令提取 Webpack 配置，但该命令已在后续版本中被弃用。现在，若需自定义构建配置，必须使用 builders。
Webpack 功能强大且高度可配置，得益于众多插件。然而，如果没有相关经验，正确配置它可能相当复杂。而 Angular CLI 的一大优势在于：我们完全无需关心 Webpack 配置，所有工作均由 Angular 团队预先完成。如果你查看一个新建的 Angular 项目的所有生成文件，根本找不到任何 Webpack 配置文件。这是有意为之的设计，旨在降低使用 Angular 的复杂性，同时覆盖大多数常见场景。如果遇到特殊需求，需要定制化构建配置，可以安装 @angular-builders/custom-webpack 包并自行定义设置。
另一个巨大优势是：Angular CLI 使用 webpack-dev-server 来启动开发服务器，无需任何额外配置。
webpack-dev-server 是基于 Node.js 的开发服务器。当它运行时，你可以将应用加载到其中，并利用热模块替换（Hot Module Replacement）功能——这意味着应用保持运行状态，对修改过的文件进行实时更新。这样，你可以在不丢失应用整体状态的前提下，即时看到代码更改的效果。
进一步阅读：
有关 Angular 的更多信息，请参考以下链接：
总结
本节课中，你了解了 Angular 近年来的发展历程，并初步掌握了 Angular CLI 的技术原理。尽管我们通常不会直接与 CLI 的核心组件交互，但理解其背后的工作机制始终是有益的。