😜 🧗🏼 🤞🏾 Angular应用程序架构师需要掌握的6个概念 🖼️ 🏇🏾 👏🏽

Angular是现有的最大的Web框架之一。它包括许多内置功能。这意味着，为了全面开发Angular，您需要处理大量概念。该材料的作者（我们今天将其翻译发表）认为Angular开发人员需要六个知识，才能创建精心设计的应用程序。但是，尽管他本人有时不得不研究代码，但他并不是在研究用于实现这些概念的源代码。这是关于了解相关机制以及将其付诸实践的能力。

1.体系结构，模块和库

在Web开发世界中，Angular的模块化体系结构很特别。可能这是比初学者采用的想法差的想法之一。

这里最难的部分是Web开发已经使用了模块化体系结构。当然，我说的是ES6导入。

由于Angular模块向系统添加了附加级别的逻辑分组，因此重要的是，它们的结构应尽可能与它们的帮助下解决的任务相对应。

知道如何使用设计良好的模块分离和组合应用程序功能是创建Angular应用程序体系结构的基本部分。

各种类型的Angular模块

有多种类型的Angular模块需要注意：

声明/小部件模块。具有各种实体声明的模块。此类模块的一个示例是一组用户界面组件，指令，管道。
服务模块。服务模块例如- HttpClientModule。
路由模块。路由模块
域功能模块。实现应用程序关键任务的模块。
核心/共享模块。核心模块是用于声明全局服务的模块。共享模块是其中声明要共享的组件的模块。

在这里，您可以找到有关Angular模块的详细信息。

▍库或模块？

我想说模块之间的上述区别可以扩展到库。通过这种方法，事实证明可能存在一个仅包含服务的库，一个代表路线的库等。

但是，是否创建模块或库取决于项目的类型，以及项目是由单一存储库还是由多个存储库表示。

creating在创建模块之前要问自己的问题

以下是编写模块之前要问的一些问题：

? — , . , . , .
, ? . , , . , , .

2. ,

从理论上讲，分担责任很简单。但是实际上，这已经更加困难。自Angular.js诞生以来，开发人员就知道组件应尽可能紧凑，并且服务应更大。在新版本的Angular中，这些想法没有太大变化。

如今，重要的是要有一个概念，到底什么应该是组件的一部分，什么是服务的一部分，并且还要考虑到指令可能是Angular的一个非常被低估的功能这一事实。

▍条件

关于组件状态确切存储在哪里的问题的答案取决于需要相应数据的位置。即，它们可能仅在组件中是必需的，是局部的和封装的，或者可能在组件外部是必需的。

如果组件共享状态，或者需要从服务访问状态，则应将状态存储在服务中。此外，如果状态存储在服务中，则使用哪些特定状态管理工具不会发挥特殊作用。
如果状态是局部的（例如，我们正在谈论表单）并且仅在组件内部使用，则状态应仅保存在组件中。

with使用DOM

可能大多数DOM操作都应在指令中完成。想象一下，其中一个组件具有拖放功能。

我敢肯定，在这种情况下，您可以创建一个组件并从中绑定相应的事件，但是如果这样做，则会混合两种现象：

组件外观的描述。
确定组件行为。

指令是Angular功能，可让您描述可重用的机制。在我从事的几乎每个项目中，我都注意到没有充分使用指令。指令可以承担相当大的部分责任。

这是一个练习：通过代码行数查找当前项目中最大的组件。是用它Renderer还是ElementRef？相应的逻辑很可能可以转移到指令中。

3.变更检测和渲染

当涉及到重新渲染用户界面时，在Angular中，一切都使用框架的内部机制通过魔术来完成。

但是，如果您需要优化应用程序，以便仅在必要时才重新渲染接口，则必须处理这种“魔术”。而且，要改善渲染效果，您不仅必须依赖知识，还必须依赖直觉。

Angular应用程序架构师可能应该意识到，使用更改检测策略来优化渲染性能onPush。但是在工作过程中，一切并不一定总是按预期进行。尤其是当模板不使用可观察对象和异步管道时。

change改进变更检测

为了改进项目中使用的变更检测过程，从以下想法开始是有意义的：

有必要将所有数据视为不可变的。基于Rx的状态管理库在这里可能非常有用。
要在模板中输出数据，仅（或主要）使用可观察对象是值得的。使用本地状态时，值得应用BehaviorSubject。

如果您要开发高性能Angular应用程序，则只需要很好地处理变更检测问题即可。事实是，高性能甚至没有“在需要时更新接口”。这是“仅在需要时更新接口”。

▍克服角度性能限制

减少应用程序界面的重新渲染次数是使您能够创建快速有效的应用程序的秘密之一。但是有时应用程序性能必须超出Angular设备本身定义的范围。在此类应用程序中，可以注意到游戏，经常更新其数据的项目，显示大型和复杂列表的页面等。

如果您确实需要从Angular性能中挤出绝对最大值，则意味着您应该诉诸一种技术，该技术涉及摆脱Zone.js并使用最新的Ivy功能准确地更新接口。这是有关它的材料。

4.路由

路由不仅以多种虚拟页面的形式表示SPA。它还使用Angular路由子系统材料的延迟加载功能按需加载应用程序包。

如果您在大型应用程序上工作，并且此应用程序的捆绑包大小超过1 MB，那么您可能已经知道为什么这很重要。确实，没有人会发现下载大量数据以与某个应用程序一起使用的前景。

路由不仅应用于分隔顶层路由，还应用于对接口的较浅和较深部分进行组织。

这使您可以按主要路线拆分分发包的内容，并有助于将应用程序划分为小部分，直到明确要求下载它们之后才将其转移给用户。

▍示例：选项卡式组件

假设我们正在开发使用选项卡的用户界面。此外，每个选项卡都彼此独立。这是一种理想情况，其中可以为每个选项卡分配自己的路由并组织延迟数据加载，在此期间，仅将所选选项卡的数据传输到客户端。

想要另一个例子吗？弹出式窗口和模式窗口如何？他们的代码绝对不需要包含在项目原始包装中的材料中。此类窗口的代码仅在需要时才加载，而不是更早加载。

如果您想在应用此类想法之前获得启发，建议您看一下实现上述模式的@ angular / material / tabs组件的文档。

5.表格

大多数CRUD应用程序基本上由许多形式组成。您很可能会花费大量时间创建表单。因此，对于想要成为Angular架构师的人来说，正确掌握表单的使用非常重要。

您的大多数表单都可能使用模块ReactiveFormsModule。如果它们不由单个控件组成，则使用它们，ngModel将实现双向数据绑定。

使用表单的Angular API非常容易学习。通常，为了在使用此API方面获得卓越的表现，适当地研究文档并知道使用表单时可能会出现什么问题就足够了。

值得知道的主要问题是Angular中的表单未绑定到构成其基础的数据类型。对于使用本来就很好制作的机制来说，这可能是最不愉快的事情。结果，结果表明开发人员需要仔细监视表单是否与使用它们时使用的数据结构相对应。

6. RxJS

而我们名单上的最后一个（尽管并非最不重要）是RxJS技术。

我坚信Angular最强大的功能之一就是将该框架与Rx和功能性反应式编程进行了深度集成。

为了真正掌握Angular，为设计高质量的应用程序铺平道路，您首先需要研究Rx，或者至少是最重要的运算符。如果不花大量时间了解Rx，很难成为真正的高级Angular开发人员。

学习Rx可以帮助您开发Angular应用程序的原因有两个：性能和异步数据处理。

在现代，高度交互的应用程序中，异步数据处理是一项特别困难的任务。因此，您应该忘记oh setTimeout和oh的诺言，并setInterval以Rx样式开始工作。

学习Rx的另一个重要原因是优化应用程序性能。当然，首先使用异步管道就足够了，但是有时这还不够。例如，您可以通过仅将那些事件传递通过管道来控制组件的重新渲染，发生这些事件意味着需要重新渲染。

Rx为开发人员提供了许多运算符，可以帮助他缓存某些内容或将某些内容构建到包中。结果，这导致了优化的应用程序性能。这里有关RxJS模式的材料。

摘要

我在这里给出了一些简短的主题，对于想要成为高性能Angular开发人员或想要成为Angular应用程序架构师的人来说，值得探讨。

您可以在此列表中添加更多内容。但是，除其他外，我建议不要忘记，为了真正了解Web开发领域，您需要从基础开始。这些是JavaScript，CSS，设计模式，简洁的代码编写技术，工具等等。

对于那些想学习如何设计高质量Angular应用程序的人，您有什么建议学习呢？

Angular应用程序架构师需要掌握的6个概念