一款to-do app基本等同于前端开发的“Hello world”。虽然涵盖了创建应用程序的CRUD方面，但它通常只涉及那些框架或库也能做到的皮毛而已。

Angular看起来似乎总是在改变和更新 - 但实际上，还是有一些事情仍然保持不变。以下是关于Angular所需要学习的核心概念的概述，以便大家可以正确地利用JavaScript框架。

说到Angular，我们需要学习很多东西，很多人被困在初学者的圈子里，仅仅是因为不知道去哪里搜索或者应该搜索什么关键词。下面我们会说到的这个指南（也是对Angular本身的一个快速摘要），我其实很希望我在第一次开始使用Angular 2+时就已经有了。

1.模块化Angular架构

理论上，你可以将所有Angular代码放在一个页面上并放入一个大型函数中，但不建议这样做，这也不是一种有效的方法来构造代码，并且违背了Angular存在的目的。

Angular将模块的概念作为框架架构的重要组成部分，这是指只有一个存在理由的代码集合。你的Angular app基本上由模块组成 - 有些是独立的，有些是共享的。

有多种方法可以在您的应用程序中构造模块，深入了解不同的体系结构也可以帮助确定如何在应用程序增长时扩展应用程序，它还可以帮助隔离代码并防止产生代码耦合。

搜索关键词：

• Angular架构模式

• 可扩展的Angular应用架构

2.单向数据流和不可变性

早在Angular 1中，双向绑定就俘获了许多前端开发人员的心。这实际上是Angular最初的卖点之一。然而，随着时间的推移，当应用程序开始变得更加复杂时，它开始在性能方面产生问题。

事实证明，并不是在任何地方都需要双向绑定的。

双向绑定在Angular 2+中仍然是可实现的，但只有在开发人员明确请求时才能进行双向绑定 – 这样就迫使代码背后的人员考虑数据方向和数据流，它还允许应用程序通过确定数据的流动方式来更加灵活地处理数据。

搜索关键词：

• Angular数据流最佳实践

• Angular中的单向流

• 单向绑定的优点

3.属性型和结构型指令

指令是HTML通过自定义元素的扩展。属性型指令允许您更改元素的属性，结构型指令通过在DOM中添加或删除元素来更改布局。

例如，ngSwitch和ngIf是结构型指令，因为它评估参数并确定DOM的某些部分是否应该存在。

属性型指令是附加到元素、组件或其他指令的自定义行为。

学习如何使用这两个指令可以扩展应用程序的功能，并减少项目中重复代码的数量。属性型指令还可以帮助集中在应用程序不同部分使用的某些行为。

搜索关键词：

• Angular属性型指令

• Angular结构型指令

• Angular结构型指令模式

4.组件生命周期钩子

每个软件都有自己的生命周期，决定了如何创建、渲染和删除某些内容。Angular的组件生命周期是这样的：
create → render → render children → check when data-bound properties change → destroy → remove from DOM

我们能够在这个周期内抓住关键时刻，并在特定时刻或事件中锁定他。这允许我们根据组件存在的不同阶段创建适当的响应并配置行为。

例如，在呈现页面之前可能需要加载一些数据，你可以通过ngOnInit()来实现这一点，或者你可能需要断开与数据库的连接，这可以通过ngOnDestroy()来实现。

搜索关键词：

• Angular生命周期钩子

• 组件生命周期

5.Http和可观察对象服务

这并不是Angular特有的功能，而是来自ES7。Angular只是碰巧将其作为框架支持功能的一部分来实现，并且恰好理解了这一点，它也可以很好地转换为React、Vue和任何JavaScript相关的库或框架。

可观察对象服务是允许你有效处理数据的模式 - 允许你在基于事件的系统中解析、修改和维护数据。你无法完全逃避Http和可观察对象，因为一切都是数据。

搜索关键词：

• JavaScript可观察对象模式

• Angular HTTP和可观察对象

• ES7可观察功能

6.Smart/Dumb组件架构

在编写Angular应用程序时，我们倾向于将所有内容都放入组件中。但是，这并不是最佳做法。Angular中Smart/Dumb组件的概念需要更多的讨论，尤其是在初学者圈子里。

组件是否Smart/Dumb决定了它在应用程序的总体规划中扮演的角色。Dumb组件通常是无状态的，其行为易于预测和理解。因此，尽可能使你的组件变得Dumb。
Smart组件更难掌握，因为它会涉及到输入和输出。要正确利用Angular的功能，请研究Smart/Dumb组件架构，它将为你提供有关如何处理代码及其相互关系的模式和思维方式。

搜索关键词：

• Smart/Dumb Angular 组件

• 无状态的Dumb组件

• 演示组件

• Angular中的Smart组件

7.应用程序结构和最佳实践

在结构和最佳实践方面，CLI只能带您到目前为止。构建Angular应用程序（或任何一般应用程序）就像构建一个房子。社区多年来一直在优化设置流程，从而实现最有效和最有效的应用。

Angular也不例外。

那些试图学习Angular的人对Angular的大多数抱怨往往是由于缺乏结构知识；语法是很容易上手的，而且清晰明确。然而，应用程序的结构知识需要理解上下文背景、需求以及它们如何在概念和实践层面组合到一起。了解Angular不同的潜在应用程序结构及其最佳实践，将会让你对如何构建应用程序拥有一个全新的视角。

搜索关键词：

• 单一存储库Angular apps

• Angular库，Angular包

• Angular

• Angular微应用程序

• 单片存储库

8.模板绑定语法

绑定是JavaScript框架的结晶，这也是存在的首要原因之一。模板绑定在静态HTML和JavaScript之间架起了桥梁，Angular的模板绑定语法充当这两种技术之间的促进者。

一旦你学会了如何以及何时使用它们，将一个曾经是静态的页面转换为交互式的页面就会变得容易的多，也不那么令人烦躁了。研究绑定的不同场景，例如属性绑定、事件、插值和双向绑定。

搜索关键词：

• Angular属性绑定

• Angular事件绑定

• Angular双向绑定，Angular插值

• Angular传递常量

9.特性模块和路由

在Angular中，特性模块的能力被低估了。它实际上是一种非常出色的用来组织和响应业务需求的方式。从长远来看，它限制了责任并有助于防止代码污染。

有五种类型的特性模块（领域特性模块、带路由的特性模块、路由模块、服务特性模块和可识部件特性模块），每种模块处理特定类型的功能。学习将特性模块与路由结合使用可以帮助创建离散的功能集，并为你的应用程序应用良好和清晰的关注点分离。

搜索关键词：

• Angular特性模块

• Angular中的共享特性结构

• 特性模块提供商

• 延迟加载路由和特性模块

10.表单和验证（响应式表单和验证器）

表单是任何前端开发中不可避免的一部分。

与表单一起出现的还有验证。

在Angular中，有很多方法可以构造智能的、数据驱动的表单。最流行的表单迭代是响应式表单。但是，还有其他选项，即模板驱动表单和自定义验证器。

了解验证器如何与CSS协同工作将有助于加快工作流程，并将应用程序转变为一个验证错误的准备空间。

搜索关键词：

• Angular形式验证

• 模板驱动验证

• 响应式表单验证

• Angular中的同步和异步验证器

• 内置验证器

• Angular自定义验证器

• 跨字段交叉验证

11.内容投影

Angular有一个叫做内容投影的东西，它能够有效地将数据从父组件传递给子组件。虽然这可能听起来很复杂，但实际上是在视图中放入视图以生成母版视图的行为。

我们通常理解表面意义上的内容投影 - 当我们在父视图中嵌套子视图时。然而，为了扩展我们的理解，我们还需要了解数据如何在不同视图之间传递。这是理解内容投影派上用场的地方。

了解内容投影可以帮助你确定应用程序的数据流以及发生可变性的位置。

搜索关键词：

• Angular内容投影

• Angular父子视图关系

• Angular视图数据关系

12.onPush变化检测

默认情况下，Angular使用默认的变化检测策略。这意味着将始终检查组件。虽然使用默认值没有任何问题，但它可能是检测变化的一种低效方法。

对于小型应用程序来说，运行速度和性能都还算不错。但是，一旦应用程序达到一定的大小，运行起来就会变得非常麻烦，尤其是在旧版浏览器中。

onPush 变化检测策略将显著加快应用程序的速度，因为它依赖于特定触发器而不是持续检查以查看是否发生了任何事情。

搜索关键词：

• Angular onPush变化检测

13.路径保护，预加载，延迟加载

如果你有某种类型的登录，你将需要路径保护。您可以保护某些视图免受未经授权视图的影响，这是是许多应用程序中必不可少的要求。路径保护充当路由器和请求路由之间的接口。由决策者决定某条路线是否被允许访问。路径保护的世界中有很多东西需要探索 - 即基于令牌过期、用户身份验证和路径安全性等路径决策。

预加载和延迟加载还可以通过加快应用程序的加载时间来增强用户体验。值得注意的是，预加载和延迟加载不仅仅是决定是否要加载特定的图像集，它还可以增强绑定的体系结构，并加载可能存在于不同范围和域上的应用程序的不同部分。

搜索关键词：

• Angular路径保护

• Angular身份验证模式

• Angular预加载和延迟加载模块

• Angular安全路径模式

14.自定义管道

使用Angular管道使数据格式化变得无比简单。虽然许多预配置和开箱即用管道涵盖了诸如日期、货币、百分比和字符大小写等许多内容，但它并不能涵盖你需要的所有内容。

这就是自定义管道派上用场的地方。你可以轻松创建自己的过滤器并根据自己的喜好转换数据格式。这真的很容易，所以去看看吧！

搜索关键词：

• Angular自定义管道

15.@viewChild和@ContentChild修饰器

viewChild和contentChild是组件相互通讯的方式。Angular的重点在于，你有多个组件，它们像拼图一样被编译在一起，但如果这些组件彼此隔离，那么这个拼图就不会真正发挥多大作用。

这就是viewChild和contentChild的用武之地。学习使用这两种修饰器让你可以访问相关组件。这使得数据共享的任务更容易实现，并且可以传输由相关组件触发的数据和事件。

搜索关键词：

• Angular修饰器

• Angular中的Viewchild和contentchild

• Angular组件数据共享

16.动态组件和ng-template

组件是Angular的构建基块。但是，并非所有组件都是固定的，它们有些需要动态创建，而不是预先编译。

动态组件允许应用程序动态创建某些组件。静态组件假设事物不会改变。它可以通过预期的输入和输出进行预测。

但是，动态组件是根据需要呈现的。在构建可能正在侦听外部源及其更新的应用程序或页面上发生操作的反应时，它们变得非常方便。

搜索关键词：

• Angular中的动态组件

• 动态组件和ng-templating

17.@Host @Hostingbinding和exportAs

@Host，@Hostingbinding和exportAs是Angular指令修饰器，它们扩展了所附加的参数。它们还使你能够创建简洁的模板，以便在应用程序中导出以供使用。

如果以上听起来令人困惑，那么你应该首先查找Angular指令及其存在的目的。@Host，@Hostingbinding和exportAs是指令的特性，这些特性有助于现实它。

搜索关键词：

• Angular指令模式

• Angular的@Host，@Hostingbinding和exportAs

18.使用RxJs进行状态管理

应用程序的状态最终决定显示给用户的数据。如果你的状态是乱七八糟的一团意大利面条，很可能你的整个数据结构会因为任何改变而变得脆弱不堪。

当你开始了解状态是如何在Angular中工作时，你将了解数据的行为方式和原因。

虽然Angular有自己的状态管理系统，但RxJs是集中状态及其相关数据的绝佳方法。数据可能会在父-子关系链中丢失。RxJs通过创建一个集中式存储来解耦。

搜索关键词：

• Angular RxJs

• Flux / Redux原理

• Angular状态管理原则

19.依赖注入和区域

“依赖注入”通常是一个庞大的概念，所以如果您对这个概念不是很熟悉，那么这是您真的需要查找的一个内容。有多种方法可以在Angular中高效地创建依赖注入，主要是通过构造函数来实现的。这是一种只导入您需要的东西的方法，从而提高应用程序的效率，而不是加载所有东西。

和“依赖注入”一样，“区域”也是Angular独有的概念。它是应用程序从头到尾检测异步任务的一种方法。这一点很重要，因为这些异步任务能够更改应用程序的内部状态，从而更改视图。“区域”促进了变更检测过程。

搜索关键词：

• Angular区域

• 依赖注入

• Angular DI

 

---

最后的话

Angular是一个很大的话题。虽然构建Angular应用程序可能有助于学习过程，但有时你就是不知道自己不知道什么。刚开始的时候，你很难去了解未知的东西，希望这篇简短的指南能超越你通常用的Angular教程带给你一些启发，让你更全面的了解Angular。

---

*扫码关注京东云开发者社区，每天都有精彩行业信息哦！*