成为优秀Angular开发者所须要学习的19件事

一款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。

---

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

阅读原文