2019 年 Angular 的现状

与TypeScript和RxJS等工具的深度集成，使得 Angular随着这些工具的不断发展而间接受益。

……以下是证据

作者：Giancarlo Buomprisco。最初发表于“Bits and Pieces”网站。

本文详细概述了 Angular 的现状，涵盖了最新特性、热门话题以及您可能错过的趋势。

又到了每年这个时候，世界各地都会举办各种会议和活动，我们被海量信息轰炸，很难消化这些信息。

前端开发领域瞬息万变，我们都知道要跟上时代有多难。观看各种会议会耗费大量时间，所以很可以理解，大多数人在一天的工作结束后都更愿意窝在沙发上看 Netflix！

鉴于以上原因，我希望帮助您梳理信息过载的情况，并在一篇文章中概述 2019 年 Angular 的现状。

本文我们将探讨以下内容：

• Angular 的现状

• 框架的最新特性

• 最新话题和趋势

• 理解一些你可能偶尔会看到但你（目前）还不太清楚的词语。

提示：使用Bit（Github）可以轻松地在项目中共享和重用 Angular 组件，提出更新建议，同步更改，并作为一个团队更快地构建。

Angular 的采用率正在增长

根据 Angular 现任工程经理 Brad Green 在ng-conf 2019上提供的统计数据，自去年以来，Angular 的采用率增长了约 50%！

不可否认，这些统计数据可能因为正在从旧版 Angular 1.X 升级的项目数量而有所夸大，但这仍然是一个令人印象深刻的增长。

Angular 的增长速度不如Svelte或Vue，使用范围也不如React广泛，但与你在 Reddit 和 Twitter 上可能看到的内容相反，Angular 目前发展良好，被数百万开发者和团队使用。

Angular 生态系统庞大且蓬勃发展

即使 Angular 团队本身已经提供了大量的开箱即用工具，但社区提供的生态系统仍然非常庞大且高质量。

我们可以使用各种各样的东西来配合 Angular 使用：

• 与TypeScript和RxJS等快速发展的优秀工具深度集成，使得 Angular随着这些工具的不断发展而间接受益。

• 不同类型的状态管理库

• 代码质量工具，例如Codelyzer

• UI库、组件、指令、管道等。

• 大型IDE插件库

• 测试框架和实用程序库

• 最后但同样重要的是，社区和 Angular 团队都提供了大量的文档，包括最佳实践、指南、教程、书籍、视频课程等等。

接下来的段落将详细介绍一些我们可以在 Angular 项目中使用的最佳工具。

与TypeScript和RxJS等工具的深度集成，使得 Angular随着这些工具的不断发展而间接受益。

Angular CLI

更新比以往任何时候都更容易

……以下是证据

正如Mart Ganzevles简洁地描述的那样，每年为 5 亿用户提供服务的 BlueWeb 项目，仅用一天时间就从版本 7 升级到了版本 8 ，而从版本 2 升级到版本 4 则用了 30 天。

这进一步证明了 Angular CLI 是一款多么强大的工具，它可以将我们的生产力提升到我个人以前从未体验过的水平。

如今，很难想象没有它该如何工作。

原理图

Angular Schematics 是你很可能每天都会用到的功能。例如，我敢肯定你经常会用到 `ng generate component my-component`。没错，这就是 CLI 自带的 Schematics。

但你可能不知道的是，你可以通过为经常重复使用的代码片段创建自己的原理图来提高工作效率。

建筑商

构建器允许您扩展或增强现有命令。例如，您可以创建一个构建器，使用 Jest 和 Cypress 而不是 Jasmine 和 Protractor 来执行测试，或者使用不同的代码检查器。

全新精彩功能

截至撰写本文时，Angular 刚刚发布了版本 8，其中包含各种改进和功能。

虽然没有什么能深刻影响我们使用框架的方式（大多数情况下这是个好消息），但底层改进使得 Angular 项目更小更快，提高了使用该框架的已经很棒的开发者体验，并且几乎完成了新的渲染器。

差压

差异化加载的概念比它的名字听起来要简单得多。简单来说，编译器会生成两个软件包：一个用于具备现代功能但已移除所需 polyfill 的浏览器，另一个用于旧版浏览器。

最新版浏览器将加载现代软件包，而需要 polyfill 的旧版浏览器将加载旧版软件包。

这是一个巨大的胜利，因为大多数用户可能都在使用最新的浏览器，所以我们只向一小部分用户提供旧版浏览器！

Web Workers

你可能已经听说过 Web Workers 了，所以我们就不赘述了。不过，你可能不知道的是，由于 Angular 的最新版本，将 Web Workers 与 Angular 集成变得非常简单。快去看看文档吧！

CDK

CDK是 Angular 组件团队发布的一套工具。它们提供Angular Material使用的抽象层，但在样式方面是无关的。

例如，您可以使用如下指令：

• 拖放

• 自动调整大小的文本区域

• 弹出窗口的叠加层

• 虚拟滚动

CDK 非常实用，因为大多数应用都可以使用现成的常用功能，而无需使用臃肿、繁琐的临时组件。Angular Material 固然出色，但您也可以仅使用 CDK 提供的构建模块来实现自己的组件。

常春藤渲染器

Ivy 是一个令人兴奋的全新开发项目，目前正在开发中，它将作为 Angular 的第三个渲染器发布。它尚未正式发布，因为默认情况下未启用，但您可以从 Angular 7 版本开始选择启用并在项目中使用它。它将在 Angular 9 版本中默认发布。

你对Ivy有什么期待？

• 较小的包裹

• 可调试模板

• 更快的构建速度，更快的测试速度

• 修复了大量漏洞

以下是我在 Chrome 控制台中设置断点时的屏幕截图：

如您所见，ngForOf 指令向我们提供了有关传递的值的信息。

Angular 移动版

离子

Ionic 是一个用于构建移动应用程序的框架。虽然其核心组件是用 Stencil 编写的，但它提供了可以与 Angular（以及其他框架）一起使用的抽象层。

NativeScript

NativeScript是一个类似 React Native 的框架，用于构建原生移动应用。虽然它也支持 Vue 和纯 JavaScript，但它与 Angular 的集成度更高。遗憾的是，我的使用体验并不理想，我个人认为它无法与 React Native 相提并论，但如果你对移动应用开发感兴趣，不妨一试。

测试

茉莉花和量角器

虽然无需过多介绍，但 Jasmine 和 Protractors 是 Angular 默认自带的测试框架。它们久经考验，不断更新，并且与 Angular 的兼容性极佳。

Jest & Cypress

得益于 Angular CLI 提供的全新自定义构建器，使用 Jest 和 Cypress 测试 Angular 已成为可能。

Jest是一个基于 Jasmine 的单元测试框架，由 Facebook 开发。它是 React 项目测试的事实标准框架，并因其速度而广受赞誉。许多人总体上更喜欢 Jest 而不是 Jasmine，所以如果你也是其中之一，现在就可以使用它了！

Cypress是一个备受推崇的端到端测试框架，广受好评，这并非没有道理。它不依赖于 Selenium 或 WebDriver，允许对命令日志进行时间回溯，支持网络流量控制，并承诺提供更稳定可靠的测试结果，避免随机失败。

Angular 测试库

Angular 测试库是一套以用户为中心的测试 UI 组件的实用工具集。

这意味着该库鼓励您永远不要以编程方式使用组件，而是通过执行用户会执行的操作来测试其行为。

例如，你不会使用：

myComponent.onClick();

但实际上，你需要模拟用户自然而然会进行的点击操作：

const { getByText, click } = await render(CounterComponent, {

    componentProperties: { counter: 5 }

});

click(getByText('+'));

国家管理

银反应

NgRx是一个受 Redux 启发的状态管理库，可能是 Angular 社区中使用最广泛的库。顾名思义，它高度依赖于 RxJS 流。

NGXS

NGXS是另一个将类似 Redux 的状态管理引入 Angular 的库。与 NgRx 相比，NGXS 大量使用类和装饰器来减少样板代码，如果你喜欢使用类，那么这一点可能是你在两者之间进行选择时最重要的考虑因素。

秋田

Akita是由 Datorama 公司提供的状态管理库，它也基于 RxJS，与前两个库相比，它还可以用于非 Angular 项目，从长远来看，这可以使你的代码更具可重用性。

就……RxJS？

是的！这取决于你是否喜欢 Redux 库，或者你的项目是否需要状态管理库，你完全可以使用RxJS Subjects来构建存储状态的服务！

UI组件库

故事书

StoryBook不是一个 UI 组件库，而是一个可以让你独立构建组件的工具，它为我们提供了一种简单的方法来探索所有组件及其变体。

这是一个非常棒的工具，我曾经非常羡慕 React 开发人员，但现在我们也能使用它了，很难不推荐大家使用它。

角材料

备受瞩目的Angular Material又回来了，为最新版本的 Angular 带来了一套更加精美的组件。

Angular 的后端

Firebase

Firebase 是 Google 旗下的一个应用程序开发平台，因此它提供了一个一流的库Angular Fire，该库利用 RxJS Observables 的强大功能来流式传输数据，从而与 Angular 实现深度无缝集成。

GraphQL

你可能认为只有 React 社区才能使用 GraphQL……但你错了。Apollo库也适用于 Angular，如果你更喜欢使用 GraphQL，它提供了一个比 Firebase 更出色的替代方案。

NestJS

NestJS是一个用于构建服务器应用程序的 Node Web 框架，正如您从示例中所看到的，它深受 Angular 核心概念的启发，例如模块、控制器、管道等。如果您喜欢 Angular，那么您很可能也会喜欢 NestJS。

如果您使用Nx Workspaces，只需一条命令即可使用 Angular 和 NestJS 设置全栈应用程序！

结语

总而言之，Angular 拥有极其高质量且丰富的生态系统。

当然，我不可能列举出几十个我欣赏的库和工具，否则这篇文章就没完没了了。但我希望这篇文章能让你对 Angular 的现状以及它可能为你的下一个项目提供强大支持的各种可能性有一个大致的了解。

如果您需要任何澄清，或者您认为有什么不清楚或错误的地方，请留言！

如果您喜欢这篇文章，请在 Medium或Twitter上关注我， 获取更多关于 Angular、RxJS、Typescript 等主题的文章！