前端TODO应用程序与普通编程中的“ Hello world”相同。 创建TODO应用程序时，您可以使用一个或另一个框架来研究CRUD操作的实现。 但是，此类项目通常只是非常肤浅地与框架实际了解的内容相关。
如果您查看Angular，您会感觉到该框架正在不断变化和更新。 实际上，关于Angular，我们可以重点介绍一些保持不变的想法。 该材料（我们今天将发布其翻译版本）概述了您需要了解的基本Angular概念，以便正确，有效地使用此框架的功能。
要学习Angular，您需要学习很多东西。 许多开发人员陷入开发Angular的早期阶段。 这是由于这样的事实，他们不知道该去哪里，或者他们不知道他们应该寻找哪些关键字以寻找可以使他们向前迈进的信息。 该材料的作者说，当她开始学习Angular 2+时，希望她能遇到与此框架类似的指南。
1. Angular的模块化架构
从理论上讲，可以通过将所有代码放在一个功能强大的页面上来创建Angular应用程序。 但是，一方面不建议这样做，另一方面，从结构代码的角度来看，这种方法不能有效。 此外，这使Angular确实存在。
Angular作为其框架架构的一部分，广泛使用了模块的概念。 模块是一段代码，其存在只有一个原因。 通常，我们可以说Angular应用程序是从模块组装而成的。 有些模块仅在应用程序的一个位置使用，而某些则在不同的位置使用。
在应用程序中有许多结构模块的方法。 另外，对各种体系结构模式的研究有助于理解如何组织应用程序的结构，以期在应用程序的增长过程中对其进行扩展。 此外，谨慎使用模块有助于隔离代码并防止项目中的代码重复。
以下小节将提供一些查询示例，您可以通过这些示例搜索有关此主题的其他材料。 这些小节将在本资料的其他部分中找到。
▍搜索查询
- 角度架构模式。
- 可扩展的Angular应用程序体系结构。
2.单向数据流和不变性
许多使用Angular 1的开发人员都喜欢双向绑定的概念。 实际上，这是Angular的吸引人的品质之一。 但是随着时间的流逝，随着Angular应用程序变得越来越复杂，双向绑定显然会带来性能问题。
事实证明，实际上并不需要经常进行双向绑定。
在Angular 2+中，您仍然可以使用双向绑定，但是仅当开发人员明确表示打算使用此功能时才可以使用双向绑定。 这种方法使编写应用程序代码的人考虑数据流的方向。 另外，这允许更灵活地处理数据。 通过能够精确自定义应如何在应用程序中移动数据的能力，可以实现灵活性。
▍搜索查询
- 角度数据流最佳实践。
- Angular中的单向流。
- 单向绑定的优点。
3. Angular的属性和结构指令
指令是通过自定义元素对HTML的扩展。 属性指令或属性允许您更改元素的属性。 结构化指令允许您通过从DOM中删除元素或将其添加到DOM中来影响页面的内容。
例如，
ngSwitch和
ngIf是结构伪指令，因为它们评估传递给它们的参数并确定文档中是否应包含DOM的某些部分。
属性是用于更改元素的标准行为的机制，可以由程序员自定义。
学习如何使用这两种指令将有助于扩展应用程序的功能并减少重复代码的数量。 此外，属性指令可以帮助突出显示一些模板，这些模板用于更改在应用程序的不同位置使用的元素。
▍搜索查询
- Angular属性指令（Angular属性指令）。
- 角结构指令。
- 角结构指令模式。
4.组件生命周期方法
每段代码都有其自己的生命周期，该生命周期确定如何创建，显示在屏幕上然后消失。 Angular有一个称为组件生命周期的概念。 看起来像这样：
- 创作。
- 渲染图
- 渲染子组件。
- 检查与数据相关的属性的更改。
- 破坏。
- 从DOM中删除。
程序员有机会在此周期的关键时刻介入组件，例如专注于某些事件。 这使您可以自定义程序在组件生命周期中各个时刻的行为方式。
例如，您可能需要在显示页面之前加载一些数据。 您可以在
ngOnInit()组件的生命周期方法中执行此操作。 或者，也许在应用程序中的某个时候，您需要与数据库断开连接。 您可以在
ngOnDestroy()方法中执行此操作。
▍搜索查询
5. HTTP服务和可观察对象
我们在这里谈论的内容很可能与Angular的特殊功能无关，而与ES7有关。 碰巧在Angular中，可观察对象的工作是在框架级别实现的。 在React，Vue和其他基于JavaScript的库和框架中也存在类似的机制。
可观察对象是可帮助您在基于事件的系统中有效处理数据的模式。 为了有效地开发Angular应用程序，您需要知道如何使用HTTP服务和Observable对象。
▍搜索查询
- JavaScript可观察模式（JavaScript可观察对象模板）。
- Angular HTTP和可观察对象（Angular中的HTTP和可观察对象）。
- ES7可观察的功能（ES7中的可观察对象）。
6.聪明而愚蠢的组件
许多正在开发的Angular应用程序都在努力提供这些组件操作所需的一切。 没错，这并不是建议实际使用的东西。 在Angular中使用“智能”和“愚蠢”组件的想法可能比现在更多地被谈论，尤其是在新手开发人员圈子中。
组件是智能的还是愚蠢的决定了其在应用程序设备总体设计中的作用。 “傻”组件通常没有状态，它们在简单，可预测和可理解的行为方面有所不同。 建议尽可能地集中于“愚蠢”组件的创建和使用。
使用“智能”组件会更加困难，因为它们在工作过程中会接收一些输入数据并生成一些输出数据。 为了有效地使用Angular，请熟悉智能和哑组件的概念。 这个熟人将为您提供有关如何组织应用程序代码片段以及如何在这些片段之间建立关系的模式和想法。
▍搜索查询
- 智能/哑角组件。
- 无状态的哑组件。
- 演示组件。
- Angular中的智能组件。
7.应用程序的结构及其实用建议
如果在创建应用程序时讨论应用程序的结构和实用建议，那么Angular命令行工具至少可以为程序员提供一些帮助。 开发Angular应用程序（或任何其他应用程序）就像盖房子一样。 即，我们正在谈论开发人员社区多年来开发和优化的实用方法。 使用此类技术来构造应用程序会导致出现高质量的项目。 实际上，这适用于Angular。
当试图学习Angular的新手程序员抱怨此框架时，此类抱怨的原因通常是缺乏对应用程序结构的了解。 初学者很容易理解语法，在这里他们没有问题。 但是，对于他们来说，找到正确的方法来构造应用程序要困难得多。 在这里，您需要了解创建应用程序的主题领域，需要了解应用程序的要求，以及现实和期望在概念和实践级别上如何关联。
研究Angular应用程序结构的可能选项以及使用这些结构的实用建议，将使程序员对如何创建自己的项目有一个了解。
▍搜索查询
- 单个回购Angular应用程序（托管在单个存储库中的Angular应用程序）。
- Angular库（Angular库）。
- 角包。
- 角束（Angular bundles）。
- Angular微型应用程序。
- Monorepo（单存储库）。
8.数据绑定语法和模式
绑定或数据绑定也许是JavaScript框架最引人注目的功能。 同样，这也是框架普遍存在的原因之一。 模板中的数据绑定是静态HTML和JavaScript之间的桥梁。 Angular模板中的数据绑定语法充当中间人的角色，以帮助传达HTML和JavaScript实体。
学习了如何以及何时使用锚点之后，您可以轻松地将静态页面转变为交互式页面。 在此领域，建议注意各种数据绑定方案。 例如，这是属性，事件的绑定，这是数据插值和双向绑定。
▍搜索查询
- 角度属性绑定。
- 角度事件绑定。
- Angular双向绑定（Angular双向绑定）。
- 角度插值（角度插值）。
- 角传递常数（角传递常数）。
9.功能模块和路由
Angular中的功能模块是一项被低估的技术。 实际上，此类模块为开发人员提供了一种绝佳的方式来组织和隔离应用程序的业务需求集。 它们有助于限制代码片段的责任并从长远来看防止代码污染。
功能模块有五种类型（域，路由，路由，服务，小部件），每种模块负责实现特定功能。 学习如何将功能模块与路由结合使用可以帮助创建单独的功能块。 这将帮助并在应用程序中实施高质量且清晰的职责分离方案。
▍搜索查询
- Angular功能模块（Angular中的功能模块）。
- Angular中的共享要素结构。
- 功能模块提供商。
- 带有路由和功能模块的延迟加载（带有路由和功能模块的延迟加载）。
10.表格和数据验证（反应性表格和验证器）
表单是任何前端开发中不可避免的一部分。 在使用表格的地方，也需要数据验证。
Angular有多种构建数据驱动的智能表单的方式。 反应形式特别流行。 但是，还有其他选择，特别是-这些表单的验证基于模板以及使用自定义验证器。
了解验证程序和CSS如何一起工作将有助于加快应用程序开发并促进表单错误的处理。
▍搜索查询
- 角度形式验证。
- 模板驱动的验证
- 反应性表单验证。
- Angular中的同步和异步验证器（Angular中的同步和异步验证器）。
- 内置验证器。
- 角度自定义验证器。
- 跨领域验证。
11.内容的投影
Angular具有一种称为内容投影的机制。 它使您可以组织从父组件到子组件的有效数据传输。 尽管投射内容的想法可能看起来很复杂，但其本质在于，为了构建屏幕上显示的某些元素，将某些元素放置在其他元素中。
开发人员经常研究表面上内容的投影，例如，习惯于将子组件嵌入到父组件中的方案。 但是，为了拓宽我们对该概念的理解，我们还需要了解如何在不同的视觉组件之间传输数据。 在这里，了解内容投影的功能将非常有帮助。
理解此概念有助于理解应用程序内数据流移动的特征，以及该数据发生确切变异的位置。
▍搜索查询
- 角度内容投影。
- Angular父子视图关系（Angular父子关系和Angular的视觉组件）。
- 角度视图数据关系。
12. onPush变更检测策略
默认情况下，Angular使用标准的更改检测策略。 通过这种方法，正在进行组件检查。 尽管这没有错，但是这种检测更改的方法可能无效。
如果我们谈论的是小型应用程序，那么它们的性能不会受到特别的影响。 但是，在应用程序增长到一定大小之后，其速度（尤其是在较旧的浏览器中启动时）可能会降低。
onPush更改检测
onPush可以极大地加快应用程序的速度。 事实是，使用它时，仅在发生某些事件时才执行检查。 这比持续检查好得多。
▍搜索查询
- Angular onPush更改检测（Angular onPush更改检测策略）。
13.限制访问路线，预加载，延迟加载
如果您的项目具有向用户提供对系统访问权限的机制，则意味着您需要使用对路由的访问限制。 许多应用程序要求能够保护某些页面免遭未经授权的查看。 路由访问限制充当路由器和请求的路由之间的接口。 他们决定在特定情况下是否允许访问特定路线。 在路由保护领域，有很多东西将是有用的。 特别是，这是基于对令牌的有效期，身份验证角色的使用以及提供路由安全工作的分析而做出的决策。
数据的预加载和延迟加载可以通过减少应用程序加载时间来改善用户使用站点的体验。 可以说延迟加载技术不仅与图像有关。 将应用程序捆绑分成多个部分，以及在不同条件下加载这些捆绑包的不同部分时，将使用这些技术。
▍搜索查询
- Angular路由防护器（限制对Angular中路由的访问）。
- 角度认证模式。
- Angular预加载和延迟加载模块（Angular中的预加载和延迟加载模块）。
- 角度安全的路线模式。
14.定制输送机
角度管道使数据格式化更加容易。 有许多内置的传送带，可让您解决各种标准任务。 其中包括格式化日期，货币金额，百分比值以及例如处理字符大小写的任务。 但是，总有一项任务没有标准的传送带。
在这种情况下，需要自定义管道。 这种机制允许程序员创建自己的过滤器并描述他需要的数据转换。 使用所有这些并不难，因此可以建议将此概念用于研究。
▍搜索查询
15.装饰器@ViewChild和@ContentChild
借助
@ViewChild和
@ContentChild组件可以相互通信。 Angular的本质是使使用此框架创建的多组件应用程序看起来像一个难题。 但是，如果其片段彼此隔离，那么这个难题将没有太大用处。
为了使拼图相互连接，使用了
@ViewChild和
@ContentChild装饰器。 研究它们的使用功能将使您有机会使用与其他组件关联的组件。 这简化了组织各个组件之间的数据共享的任务。 这使您可以在组件之间传输有关这些组件中发生的事件的数据和信息。
▍搜索查询
- 角度装饰器（Angular中的装饰器）。
- Angular中的
@ViewChild和@ContentChild （Angular中的装饰器@ViewChild和@ContentChild ）。 - 角组件数据共享。
16.动态组件和ng-template指令
组件是Angular应用程序的构建块。 但是，并非所有组件都需要预先创建。 其中一些需要在程序运行时创建。
动态组件允许应用程序在运行时创建所需的内容。
与动态组件不同，静态组件是预先创建的。 如果不希望这些组件受到影响，则可以执行此操作。 它们以预定的方式是可预测的，可以对输入它们的数据进行转换。
另一方面，动态组件是根据需要创建的。 在开发与外部数据源一起使用的应用程序时，它们非常有用。 即使您需要组织应用程序对页面上发生的操作的反应，它们也很有用。
▍搜索查询
- Angular中的动态组件。
- 动态组件和ng模板（动态组件和ng-template指令）。
17. Decorators @Host ， @HostBinding和exportAs指令
@Host ，
@HostBinding和
@HostBinding指令在Angular中用于控制它们所应用的内容。 此外，它们还可以为导出可在应用程序中使用的实体创建简洁的模板。
如果您对以上内容似乎不太清楚，我们建议您熟悉这些指令并找出为什么需要它们。
@Host ，
@HostBinding和
@HostBinding指令对Angular有所帮助。
▍搜索查询
- Angular指令模式（Angular指令模式）。
@Host ， @HostBinding和exportAs（Angular中的装饰器@Host ， @HostBinding和exportAs指令）。
18.使用NgRx进行应用程序状态管理
应用程序的状态由用户看到的内容决定。 如果在应用程序状态中出现混乱，则可能表明其中使用的数据结构很难适应更改。 随着应用程序的成长和发展，可能需要对数据结构进行此类更改。
当某人开始了解在Angular中使用状态的细节时，他也开始了解其应用程序中数据行为的细节。
Angular有自己的状态管理系统。 但是，只有一种技术NgRx，它使您可以将应用程序状态管理提升到更高的水平。 特别地，例如，当在多个父组件和子组件之间传输数据时，数据可能会丢失。 NgRx允许您创建一个集中式存储库并摆脱此问题。
▍搜索查询
- Angular NgRx（在Angular中使用RxJS）。
- 助焊剂/ Redux原理。
- 角度状态管理原则。
19.依赖关系和区域注入
依赖注入是一个庞大的通用概念。 如果您不太熟悉它，则应该学习它。 Angular有许多方法可以准确地注入依赖关系。 这主要是通过使用构造函数来实现的。 它只涉及真正需要的内容。 这有助于提高应用程序性能。
像依赖注入的概念一样，区域的概念并不是Angular独有的。 这是一种机制，允许应用程序监视异步任务在其整个生命周期中的状态。 — , , — , . .
▍
- Angular zones ( Angular).
- Dependency injections ( ).
- Angular DI ( Angular).
总结
Angular- — . — - , , , . . , , Angular, .
亲爱的读者们！ Angular-?
