据信，在前端开发中，“
Hello world ”的等效项是一个应用程序-任务列表。 是的，这使您能够涵盖创建应用程序的CRUD方面，但是，所使用的框架或库的功能通常受到非常肤浅的影响。
Angular一直在不断变化和更新，但是仍然保持不变。 如果您想以最佳方式使用此JavaScript框架，我将讨论您需要学习的基本Angular概念。
与Angular一起工作需要学习很多东西，而新手常常因为不知道在哪里寻找什么而陷于入门级。 因此，我写了一个指南（其中包括Angular基础的简要摘要），当我刚开始使用Angular 2+时，本人会非常有用。
翻译成Alconost1. Angular的模块化架构
从理论上讲，您可以将所有Angular代码放在一个页面上并放在一个大函数中，但是不建议这样做：这是一种无效的结构化代码结构，无法显示Angular的目的。
该框架的体系结构的一部分是对模块概念的积极使用，模块是具有单一目的的代码。 Angular应用程序基本上由模块组成，其中一些模块是隔离的，而其他模块是常见的。
有多种方法来组织应用程序中的模块。 通过探索各种体系结构，您可以确定应用程序在开发过程中如何扩展，还可以学习如何隔离代码和减少相互依赖性。
谷歌什么：2.单向数据流和不变性
在Angular 1时代，双边绑定赢得了许多前端开发人员的青睐-实际上，这是此框架的主要特色之一。 但是，随着应用程序的开发，这种方法开始在性能方面产生问题。
事实证明，到处都不需要双向绑定
Angular 2+仍然可以实现它，但是为此需要明确提出要求-因此，开发人员必须考虑数据流及其方向。 此外，这可以使应用程序更灵活地处理数据，因为您可以指定如何传输数据。
谷歌什么：- 在Angular中使用数据流，
- Angular中的单向流
- 单向捕捉的好处。
3.定语和结构性指示
指令是带有其他元素的HTML扩展。 通过属性指令，可以更改元素的属性。 结构指令通过添加或删除DOM元素来更改布局。
例如，
ngSwitch和
ngIf是结构指令：它们评估参数并确定DOM的特定部分是否应存在。
属性指令是附加到元素，组件或其他指令的自定义行为。
通过学习使用这两种类型的指令，您可以扩展自己的应用程序的功能并减少项目中的代码重复。 属性指令还有助于集中应用程序各个部分中使用的特定行为。
谷歌什么：4.组件生命周期处理程序
每个应用程序都有一个生命周期，该生命周期确定如何创建，处理和删除对象。 在Angular框架中，组件的生命周期如下所示：
→ → → → → DOM
我们有机会处理这个周期的关键点，并专注于特定的时间点或事件。 这使您可以根据组件的各个阶段创建适当的响应并自定义行为。
例如，如果要在呈现页面之前加载一些数据，可以通过
ngOnInit() 。 而且，如果需要断开与数据库的连接，可以在
ngOnDestroy()时完成此操作。
谷歌什么：- Angular中的组件生命周期处理程序；
- 组件生命周期。
5.观察服务和HTTP
观察到的服务不是Angular的独特功能，而是ES7的功能。 但是，此功能是在框架的框架内实现的，相应的思想也可以很好地转移到React，Vue和其他与JavaScript相关的库和框架中。
谷歌什么：- JavaScript观察者模式
- 在Angular中观察对象和HTTP，
- ES7中观察到的对象。
6.智能和愚蠢组件的体系结构
通常，在Angular上编写应用程序时，所有内容都被转储到一个组件中，但这并不是最好的方法。 Angular中的智能组件和笨拙组件的概念无疑值得更多关注，尤其是对于初学者而言。
组件在应用程序总体计划中的作用取决于它是“愚蠢”还是“聪明”。 “愚蠢的”组件通常不跟踪状态，并且其行为易于预测和理解-如有可能，应以这种方式制作组件。
智能组件更难理解，因为它们涉及输入和输出。 要充分利用Angular的功能，您应该了解智能和愚蠢的组件的体系结构：通过这种方法，您将掌握模式和思维方式，这将有助于您编写更有效率的代码并在应用程序内建立正确的交互作用。
谷歌什么：- 聪明而愚蠢的Angular组件，
- 愚蠢的无状态组件
- 演示组件
- 智能角度组件。
7.标准应用程序结构
使用命令行确定应用程序结构的功能很有用，但不是万能的。 在Angular上创建一个应用程序（以及所有一般的应用程序）类似于建造房屋：有些成熟的过程已被社区优化了很多年，使您可以编写更高效和高效的应用程序。
Angular也不例外。
可以从尝试研究Angular的人那里听到大多数关于Angular的抱怨，而他们并不了解其结构。 可以实时获取清晰明了的语法，但是，要了解应用程序的结构，您需要了解上下文，需求以及它们在概念和实践层面如何融合在一起。 研究了Angular应用程序的各种可能结构以及针对其应用程序的建议之后，您将了解如何编写自己的应用程序。
谷歌什么：- 具有一个存储库的Angular应用程序，
- Angular库，Angular软件包，
- 角束
- 角度微应用程序。
- 单一存储库。
8.模板绑定的语法
有问题的JavaScript框架的重点是绑定，它也成为创建它的原因之一。 模板绑定结合了静态HTML和JavaScript，并且Angular的模板绑定语法充当了这两种技术之间的中介。
如果您学会了正确，及时地使用这些功能，那么将静态页面变成交互式内容将变得更加容易和有趣。 探索各种绑定方案：属性绑定，事件绑定，插值和双向绑定。
谷歌什么：- 绑定到Angular中的属性，
- Angular中的事件绑定，
- Angular中的双向绑定，Angular中的插值，
- 将常量传递给Angular。
9.路由和功能模块
对于Angular，通常会低估功能模块，尽管实际上这是简化和限制一组业务需求的好方法。 从长远来看，它们有助于区分职责并帮助防止代码污染。
功能模块有五种类型（域，可路由，路由，服务和小部件），每种都有其自己的功能集。 通过学习如何将功能模块与路由结合使用，您可以创建独立的功能集，并提供可理解且方便的应用程序功能分离。
谷歌什么：- 角度功能模块
- Angular中常见的功能结构，
- 功能模块提供者。
- 带有路由和功能模块的延迟加载。
10.表格和数据验证（反应性表格和验证器）
表单是前端开发不可或缺的一部分。
哪里有表格，哪里就有数据验证。
您可以通过各种方式创建可以很好地与Angular框架上的数据配合使用的智能表单，而响应表单是最常见的方法。 但是，还有其他选项，即模板验证器和自定义验证器。
通过了解验证器和CSS的工作方式，您可以加快工作流程并为错误处理准备应用程序。
谷歌什么：- Angular中的表单验证，
- 基于模板的数据验证，
- 验证反应形式，
- Angular中的同步和异步验证器，
- 内置验证器
- Angular中的自定义验证器，
- 交叉检查字段。
11.内容的投影
Angular框架具有投影内容的概念，可让您有效地将数据从父组件传输到子组件。 乍一看，这似乎很复杂，但是实际上，在这种情况下，视图被放置在其他视图内-这将创建主视图。
内容的投射通常是表面理解：就像我们将子视图嵌入父视图一样。 但是，为了更深入地了解框架，有必要了解如何在不同表示形式之间传输数据-这是了解投影内容概念的地方。
研究了内容的投影之后，您将学习了解应用程序数据流并确定它在何处进行更改。
谷歌什么：- 在Angular中投射内容，
- Angular中父视图和子视图的关系，
- 角度视图中数据之间的关系。
12.变更检测策略“ onPush”
默认情况下，Angular使用标准更改检测策略，在该策略中始终检查组件。 使用默认行为没有错；但是，这种对更改的检测可能无效。
对于小型应用程序，速度和性能仍然令人满意。 但是，只要应用程序达到一定大小，某些元素的启动就会变慢，尤其是在较旧的浏览器中。
onPush更改检测
onPush不依赖于持续验证，而是依赖于特定触发器的操作，因此可以显着加快应用程序的速度。
谷歌什么：13.路线防御者，事前和事后装载
如果应用程序具有帐户登录名，则将需要路由防御者。 底线是防止某些视图遭到未经授权的查看，这在许多情况下是强制性要求。 路由防御者充当路由器和请求的路由之间的接口：它们确定是否允许访问特定路由。 这是一个相当广泛的主题：例如，这包括基于令牌的有效期，用户角色的身份验证和路由保护做出关于路由的决策的问题。
为了加快应用程序的加载并使其更方便使用，初步加载和延迟加载也将有所帮助。 还应注意，这些工具不仅使您能够决定是否下载一组特定的映像，还有助于改善关联的体系结构并加载可能位于不同域和定义区域的应用程序的不同部分。
谷歌什么：- Angular的路线守卫
- Angular中的身份验证模式，
- 角度前和后加载模块
- Angular中的安全路由模板。
14.自定义渠道
Angular框架通道极大地简化了数据格式化。 预配置的即用型通道已经涵盖了许多类型的格式设置（日期，货币，百分比和字符大小写），但是您可能还需要其他格式。
在这里，非标准通道非常有用，可以轻松创建自己的过滤器并以所需的方式转换数据格式。 这很简单-试试吧。
谷歌什么：15.装饰器@ViewChild和@ContentChild
ViewChild和
ContentChild用于在组件之间进行通信。 Angular框架的本质是使用了几个组装在一起的组件，例如镶嵌图。 但是，如果设计彼此分离，则该设计将无能为力。
为此，需要
ViewChild和
ContentChild装饰器，他们已经学会了如何使用它们，您将能够访问相关组件，这简化了交换数据的任务，并且还可以传输数据和由相关组件引起的事件。
谷歌什么：- 角装饰器
ViewChild和ContentChild ，
- Angular中组件之间的数据交换。
16.动态组件和“ ng-template”
在Angular框架中，应用程序是基于组件构建的。 但是，并非所有组件都是静态的-有些组件必须动态创建，而不是预先编译。
应用程序动态创建的组件称为动态组件。 静态组件具有一定的不变性：我们期望输入和输出具有某些值以及相应的可预测行为。
根据需要呈现动态组件。 在创建可以侦听外部源，更改其状态或表示对页面上发生的操作的反应的应用程序时，使用它们很方便。
谷歌什么：- Angular中的动态组件，
- 动态组件和ng-template。
17. 主机 ， 主机绑定和“ exportAs”
@Host ，
@HostBinding是装饰器，而
exportAs是@Directive装饰器的属性。 它们的目的是扩展附加参数的效果。 它们还提供创建小型导出模板以在应用程序中使用的功能。
如果以上听起来难以理解，则应研究Angular指令并了解其目的。
@Host ，
@HostBinding和
exportAs是指令概念的重要元素。
谷歌什么：- Angular指令使用模式
@Host ， @HostBinding和exportAs 。
18.使用NgRx进行状态管理
应用程序的状态最终决定了显示给用户的数据。 而且，如果应用程序是一堆意大利面条，那么整个数据结构就有可能变得不可靠，并且在发生任何更改时都会崩溃。
了解Angular为什么需要状态，可以让您了解数据的行为方式和原因，而不是其他方式。
Angular框架有自己的状态管理系统，但是NgRx在集中状态和关联数据方面做得更好。 数据可能会在父子关系链中丢失，并且NgRx为它们创建一个集中式存储库并消除了此问题。
谷歌什么：- 角NgRx，
- 通量和Redux原理
- 角度状态管理原则。
19.区域和依赖注入
依赖注入通常是一个大规模的概念，因此，如果您不太熟悉主题，则应该了解更多。 在Angular中，有几种方法可以仔细注入依赖关系，但这主要是使用构造函数完成的。 因此，您不能连续下载所有内容，而只能导入最需要的内容，因此可以提高应用程序的效率。
像依赖注入一样，Angular之前也有“区域”。 它们允许应用程序检测异步任务。 这很重要，因为异步任务可以更改应用程序的内部状态，从而也可以更改外观。 区域使检测变化很容易。
谷歌什么：结论
Angular是一个广泛的话题。 通过在此框架上创建应用程序，您可以学到很多东西，但是有时并不清楚要寻找什么和在哪里挖掘。 刚开始时，在陌生的环境中导航可能会很困难。 希望这篇简短的教程能够提供一些超出常规Angular教程之外的概念的见解，并允许从整体上对该框架进行更广泛的研究。
关于翻译这篇文章由Alconost翻译。
Alconost以70种语言
本地化游戏 ，
应用程序和网站 。 母语翻译，语言测试，带有API的云平台，持续本地化，24/7项目经理，任何格式的字符串资源。
我们还制作
广告和培训视频 -适用于销售，图像，广告，培训，预告片，专家，Google Play和App Store的预告片的网站。
→
了解更多