具有高度可扩展的架构, 许多web开发团队选择Angular来创建高效的, 复杂的单页应用程序. But, hiring 角的开发人员 说起来容易做起来难. 虽然有很多候选人，但无缝开发体验的关键是找到一个 great 角开发人员, 应用最佳实践和先进技术来满足高质量编码标准的人.

了解Google流行的前端框架的关键概念将使您能够自信地面试潜在客户并雇用最优秀的开发人员——那些努力将代码库提升到下一个水平的开发人员. 本文列出了优秀的Angular专业人员应该具备的关键技能和知识.

注意:本指南适用于最新的Angular版本, 它们不再被称为AngularJS——“Angular”从Angular 2开始应用. 如果你雇佣的是维护或升级一个遗留的AngularJS web应用程序项目(1.X分行)，结帐 如何聘请优秀的AngularJS开发人员.

了解Angular的核心函数

Angular框架 runs on TypeScript，应用程序内编写的所有代码都被翻译成JavaScript. TypeScript is a superset 编译成纯JavaScript的JavaScript代码. Angular代码由这个超集表示.

许多开发人员学习Angular，但对JavaScript所需的核心概念缺乏很好的理解, TypeScript, HTML, or CSS. 如果这些基础缺失, 开发人员倾向于使用不适当的变通方法，从而增加了项目的技术债务.

所以，问问应聘者他们是否知道 HTML5 and CSS3. 一个好的Angular开发人员不需要成为一个HTML或 CSS expert 只要团队中的其他人是，但他们应该理解这些关键概念:

• Flexbox
• SCSS variables
• a和a之间的区别 span and a div
• CSS中重要的类
• Attributes

Angular开发者应该对JavaScript和TypeScript有深刻的理解, 以及一些HTML和CSS技能.

Tweet

编码前的设计

好的设计是好的应用程序架构的关键. 询问你的应聘者他们是如何进行设计的，并将他们的想法与这些理想的考虑因素进行比较:

• 代码将去哪里? 是否需要一个新的库或模块?
• 输入和输出是什么?
• 应该有可重复使用的东西吗 components or directives?
• 国家将何去何从? (进一步讨论见 State Management below.)
• 业务逻辑将走向何方.e.，其中服务?
• 是否可以在库之间共享某些组件来创建一个UI设计系统?

一个特定设计的全部细节并不重要，重要的是应聘者是否有做设计的习惯. 所有的设计都是暂时的, 对于大多数应用程序, 文档可以像白板上的草图照片一样简单，除非需要正式的文档. 在后期阶段, 开发人员可以从代码(使用正确的工具)生成技术设计，以明确所有部分之间的相互关系.

理解Angular应用程序生命周期

问你的候选人他们知道什么 Angular组件生命周期. 他们的答案应该包括三个生命周期挂钩: ngOnInit, ngOnChanges, and ngOnDestroy. 顾名思义， ngOnInit 在组件初始化时调用; ngOnDestroy 在组件被销毁时调用 ngOnChanges 属性更改时调用. 后者以前也可能发生 ngOnInit-如果在组件完全初始化之前该属性已经被赋值，那么 ngOnChanges 之前执行 ngOnInit.

如果候选人也知道 ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, and ngAfterViewChecked，他们知道组件的所有变更检测挂钩，并且领先一步.

关于任何钩子，一个很好的后续问题是:“这种变化检测是什么时候发生的?”

一个鲜为人知的生命周期是 供应商生命周期，它只有一个钩子: ngOnDestroy. 只有在组件级别附加提供程序时才会调用该方法, 在这种情况下，它和组件一起被销毁了. 如果它是在根级或模块级提供的，它就会这样做 永远不要被摧毁.

提供程序的构造函数将在第一次使用该提供程序时执行, 因此，构造函数可能永远不会被执行. 在现实世界的场景中，测试你的候选人这种可能性, 它可能是一个经常被忽视的bug来源!

扎实的响应式编程知识

在Angular应用中， 反应性编程 通常是最难理解的部分. 许多人在开始编写一段代码时都是以过程的方式进行思考的, 假设它更容易理解和使用, 就像一个食谱的步骤.

反应式编程包括对我们无法控制的事情做出反应, 这可能会以不可预测的顺序发生. 尽管我们每天都以这种方式对事物做出反应，例如, 当我们前面的车突然停下来时，我们就刹车——许多开发人员发现很难采用响应式编程方法.

但是，Angular应用中发生的一切都是基于响应式编程的. 例如，Angular购物应用中的一些响应性示例可能包括:

• 用户登录时, 购物车图标上的数字更新, 菜单项会变成更具体的选项.
• 当用户导航到一个类别时，产品会根据所选的类别进行更新.
• 当用户将产品添加到购物车时, 购物车图标会随着产品数量而更新.
• 当商品缺货时(通过侦听器从后端监控当前库存数量进行注册), 页面UI更新.

请注意，这些事情是自动发生的，不需要页面刷新就会出现. In an interview, 要求应聘者描述他们是如何在他们开发的应用程序中应用响应式编程的. 如果候选人描述了涉及刷新页面或手动调用的解决方案 ChangeDetectorRef.detectChanges() 要刷新组件，请将其视为黄色标志.

Angular中可观察对象的缺陷

经验不足的开发人员有时可能会发现，他们在Angular应用程序中编写的代码没有得到执行. 经验丰富的Angular开发人员可以找出一个常见的原因:没有订阅 Observable是响应式编程中的主要对象类型. 只有使用订阅才能执行后端调用或其他反应.

创建订阅有两种方法:开发人员可以使用 async pipe or the subscribe method. 但有一点需要注意:如果开发人员使用 subscribe method), the Observable 将需要手动销毁(尽管有一些边缘情况，默认情况下会发生). 开发商可以破坏 Observables 以多种方式:

• Using the async 管道，在可能的情况下(这会破坏 Observable 当组件不再需要时).
• ，手动取消订阅 unsubscribe method on an Observable 在组件生命周期结束时(ngOnDestroy).
• 用一种更具有声明性的方式 takeUntil 内操作符 pipe 操作符，并使用主语(i.e.命名为 destroy$). 在这种情况下，主体发出 destroy$.next() 在组件生命周期结束时(ngOnDestroy). 接收到destroy事件后， takeUntil operator将不再接受来自它所绑定的Observable的事件，这样它的订阅者逻辑就不会再被触发. 相关示例请参见 第2节中的takeUntil操作符. 类也可以公开类似的功能 take and takeWhile operators.
• 既然Angular应用切换到了Ivy编译器，我们也可以使用注解了. The until-destroy library 或者其他第三方库，比如 SubSink 一旦组件被销毁，是否可以用来顺利地从可观察对象中取消订阅.

响应式编程的另一个潜在痛点来自内存泄漏和对后端的多次调用. 询问应聘者是否意识到这些问题，以及他们通常会如何解决这些问题. 未能取消订阅可能会发生内存泄漏 Observable如上所述的S. 由于后端调用上的多个订阅而导致的对后端的多个调用可以通过共享 Observable.

了解State和如何使用State

所有单页应用程序都有一个状态，这个状态在前端的某个地方可用. 但是什么是国家呢? 它包含所有特定于当前用户体验的变量. For example, 通过身份验证的用户详细信息，如名称和配置文件图像URL, 选定的特定菜单项, 或者屏幕上的列表，比如购物车项目列表.

在Angular应用中，有三种主要的前端状态需要考虑:

对什么是状态有很好的理解, 什么时候该装子弹，什么时候该重新装子弹, 在招聘Angular开发人员时，最关键的技能之一是什么. 如果您的团队有机会审查候选人编写的一些示例代码，这是值得探索的主要领域. 如果申请人使用库进行状态管理:

• 寻找使用NgRx、Akita、ngx或类似的特定于状态管理的库.
• 然后查看是否有任何通知 effects, action, reducer, store, and selector 在相关代码中.

让我们看看一般的流程 NgRx中的应用状态 (这与秋田和其他图书馆类似)作为例子:

如果开发人员使用服务创建自己的状态, 他们在国家管理方面的能力可能更难识别:

• 搜索对这些单词的参考 state or effect.
• 看看代码是否对某些动作做出了反应.g.，如果用户按下按钮A，则屏幕B上的文本应该改变.

面试官问的关于州的问题

通过调查申请人的代码，您不可能总是找到您需要知道的一切. 将这些问题添加到你的问题列表中，以调查潜在的Angular开发人员对state的理解程度:

• 你在哪里用过? state—and how? This is a solid starting point to understand their experience with state; don’t be afraid to probe for specifics.
• 你如何决定是否使用图书馆? 如果他们知道这是 not always 用于在应用程序中包含状态库.
• 你会在国家里放什么, 你会把它放在哪里, 以及如何使用状态管理系统? If they say, “我将所有内容放入全局应用程序状态,这是一个明确的信号，表明开发人员没有意识到这种系统可能给应用程序带来的负面影响.

了解各种状态类型的开发人员将避免这些副作用:

• 只应用于一个组件的状态可能会被其他组件修改或破坏.
• 数据嵌套在存储中, 所以很难跟踪数据, 数据变得难以读懂(为了调试的目的), data exchange, etc.).
• 在表单中编辑数据已经将其发送到应用程序的其余部分, 然而，只有在保存数据时才应该将它推入存储区——换句话说, 应用程序的其余部分可能正在使用无效数据.

没过多久，全球商店就会变得杂乱无章, 目前还不清楚混乱的每个部分来自哪里, 使其更难调试和维护.

理解自动化测试的重要性

自动化测试 对任何Angular web应用来说，是否应该和代码质量一样重要. 程序员编写测试的主要原因之一是记录他们的代码:如果一个新的开发人员加入公司, 基于测试套件的期望，业务逻辑和某些UI流应该是清晰的. 此外，自动化测试可以在开发的早期发现bug.

向潜在的Angular开发人员提出三个测试问题:

• 你对测试有什么看法? 任何不关心自动化测试的候选人都不应该被考虑. 即使他们不喜欢使用测试驱动开发(TDD), 没有看到自动化测试价值的开发人员将花费公司手工测试的时间和时间, worse, 随着时间的推移对应用程序进行更改而出现回归时的最终用户停机时间.
• 你在测试时关注的是什么? 而不是测试基本的给定，比如能够将值分配给一个字段或争取特定的测试覆盖度量(i.e.(85%覆盖率)，一个优秀的Angular开发者应该专注于测试核心业务逻辑.
• 通常有更多的端到端测试还是更多的单元测试? Why? 前端应用程序, Angular应用可以利用两种主要的自动化测试:单元测试和端到端(E2E)测试. 通常，测试套件将包含许多单元测试和较少的端到端测试. 单元测试很小，所以编写和执行起来都很快. 端到端测试更大更慢. 公平的警告:并不是所有的开发者都有相同的意见，关于单位和端到端测试的正确比例. In reality, 这取决于被测试应用的复杂程度, and even then, 答案在某种程度上是有争议的.

Angular测试框架

当涉及到自动化测试框架时，Angular开发者有很多选择. 单元测试可以通过Jest或Jasmine和Karma来执行. 每个Angular开发人员都应该熟悉 Jasmine and Karma. Jest 也很常见——它通常更快，并提供更高级的测试选项.

Angular应用的端到端测试标准是Protractor, Angular CLI生成的默认工具. 另一种选择是Cypress，它是一个很有前途的端到端测试框架，有很多选项.

确保候选人对至少一个单元测试框架和一个端到端测试框架有深入的了解.

随时了解Angular的最新发布

由于各种原因，优秀的Angular开发人员可能并不总是使用最新版本, 但是他们应该知道Angular的发布时间表，这样他们才能跟上变化，做好切换的准备. 评估这一点的一种方法是问候选人是否熟悉 release strategy of Angular. Angular的目标是每六个月发布一次主版本，通常在2月和5月左右. Angular版本在发布后的前六个月处于“积极支持”状态, 并且在发布之日起的12个月内处于“长期支持”状态. 与其他一些技术相比，这是一个相当紧迫的时间, 因此保持与时俱进显得尤为重要.

你也可以研究一下Angular的最新版本, 并询问候选人这些新功能的好处. 例如，在Angular 14发布前后，你可能会问应聘者:

• 独立的组件，这样就减少了对Angular模块的需求. 独立组件没有在任何现有的 NgModule，它们直接管理自己的依赖关系. 因此，可以直接依赖它们，而不需要中间体 NgModule.
• Typed forms, Angular 14的又一个重大更新, 它将严格类型设置为Angular响应式表单的默认值. 键入的表单确保里面的值 FormControls, FormGroups, and FormArrays 在整个API表面类型安全吗. 这使得表单更安全，特别是对于深度嵌套的复杂情况.

你的前端团队的下一个伟大的Angular开发者

每个web开发项目和团队都是不同的，并且会对Angular开发人员的技能和知识的各个方面给予不同的重视. 但是，理解我们在这里提出的基本主题，将使招聘经理更有意义地参与招聘——即使是在更技术性的评估中.

Toptal Engineering博客向 Ramazan Yıldız 回顾本文中介绍的技术概念和图表.