29 个最常见的 AngularJS 面试问题和答案 [适用于初学者和有经验者]

AngularJS 是现代科技领域最流行的 Web 框架之一。 虽然最初，AngularJS 是一个 Google 项目，但后来，它变成了一个开源框架。 AngularJS 是一个客户端 JavaScript 模型-视图-控制器框架，主要用于构建和动态 Web 应用程序，尤其是单页应用程序。

由于 AngularJS 完全基于 HTML 和 JavaScript，它允许您使用 HTML 作为模板语言。 它不仅将静态 HTML 更改为动态 HTML，还通过添加内置属性帮助扩展 HTML 的功能。 不仅如此，AngularJS 还扩展了 HTML 使用 JavaScript 创建自定义属性的能力。 AngularJS 的最佳之处在于它的数据绑定和依赖注入功能有助于消除编写冗余代码的需要。

AngularJS 的流行已经变得如此普遍，以至于业界对 AngularJS 技能的需求正在飙升。 但是，如果你想找到一份需要 AngularJS 技能的工作，你必须先通过 AngularJS 面试。 为了帮助您在 AngularJS 面试中脱颖而出，我们创建了一个完整的AngularJS 面试问题和答案列表。

开始！

顶级 AngularJS 面试问题和答案

1.什么是AngularJS？ AngularJS 的主要特点是什么？

AngularJS 是由 Google 开发的 JavaScript 框架。 它用于创建动态和可扩展的 Web 应用程序。 它基于以 HTML 为模板语言的 MVC（模型视图控制器）模式。 正如我们在介绍中提到的，AngularJS 在纯 JavaScript 和 HTML 上运行，这意味着您无需依赖其他外部依赖项即可使用它。 AngularJS 有助于将 JavaScript 对象与 HTML UI 元素绑定。

AngularJS 的核心特性是：

• 模板
• 范围
• 控制器
• 服务
• 模型
• 看法
• 数据绑定
• 过滤器

了解更多：Angular 7.0 – Avatar 有什么新功能？

2.在AngularJS中定义范围。

在 AngularJS 中，Scope 是一个应用程序模型，它充当应用程序控制器和视图之间的粘合剂之间的链接。 Scope 旨在监视表达式和传播事件。 通常，范围以分层结构组织，复制应用程序的 DOM（文档对象模型）结构。 它可以监视表达式并传播事件。

3. 在 AngularJS 中定义数据绑定。

在 AngularJS 中，数据绑定是指模型和视图组件之间的数据自动同步的过程。 数据绑定有助于简化定义交互式应用程序的过程，而无需担心在视图/模板和组件之间推送或拉取数据。 有四种数据绑定形式：

• 事件绑定
• 属性绑定
• 字符串插值
• 双向数据绑定

4. 定义角度表达式。 Angular 表达式和 JavaScript 表达式有什么区别？

Angular 表达式是放置在绑定中的代码片段（很像 JavaScript 的风格），如下所示：

{{ 角度 }}

Angular 表达式有助于将应用程序数据绑定到 HTML。

JavaScript 表达式和 Angular 表达式的核心区别在于：

• 虽然 JavaScript 表达式是针对全局窗口评估的，但 Angular 表达式是针对范围对象评估的。
• Angular 表达式的求值允许 null 和 undefined，但在 JavaScript 中，未定义的属性通常会产生 TypeError 或 ReferenceError。
• 与 JavaScript 不同，Angular 表达式不允许使用循环、条件或异常。
• 虽然 AngularJS 支持过滤器，但 JavaScript 不支持。

5. 命名用于开发 AngularJS 应用程序的常用 IDE。

以下是 AngularJS 最常用的 IDE（集成开发环境）：

• Eclipse – 这是 Java/JavaScript 开发人员最喜欢的 IDE 之一。 它支持 AngularJS 插件。
• Visual Studio – 这是一个 Microsoft IDE，旨在轻松快速地开发 Web 应用程序。
• WebStorm——这无疑是现代 JavaScript 开发中最强大的 IDE 之一。 它允许使用 Angular CLI 轻松集成依赖项。
• Aptana – 这是 Eclipse 的开源定制版本。 它配备了 Web 开发所需的最新工具和 Web 标准。
• Sublime Text——这是一个强烈推荐用于 HTML、CSS 和 JavaScript 的 IDE。 自然地，它与 AngularJS 兼容。

另请检查：AngularJS 是您下一个移动应用程序开发的正确选择吗？

6. AngularJS 中的指令是什么？

AngularJS 中的指令只不过是带有“ng”前缀的扩展 HTML 属性。 AngularJS 有三个核心指令：

• ng-app - 该指令的目的是标记应该被视为 Angular 应用程序的根元素的 HTML 元素。 虽然 Angular 对自定义属性应用了脊柱大小写，但它对实现它们的相应指令使用了驼峰大小写过滤器。
• ng-model – 该指令有助于将 HTML 控件（输入、选择、文本区域）的值绑定到应用程序数据。 在一个 ng-model 中，不仅视图中反映的 Scope 会发生变化，甚至视图中的变化也会反映在 Scope 中。
• ng-bind – 该指令用于将模态应用程序数据绑定到 HTML 视图。

7. AngularJS 路由的目的是什么？

使用 AngularJS 路由允许您为 Angular 应用程序中的不同内容创建不同的 URL。 通过这样做，您可以将 URL 添加到其特定内容的书签中，并且添加书签的每个此类 URL 在 AngularJS 中称为路由。

8. 在 AngularJS 中定义字符串插值。

在 AngularJS 中，字符串插值是指一种独特的语法，它使用 {{ }} 大括号内的模板表达式来显示组件数据。 字符串插值通常被称为“Moustache 语法”。 使用这种语法时，首先需要在双花括号中包含 JavaScript 表达式（需要执行），然后将相关输出嵌入到 HTML 代码中。

9. 定义 AngularJS “摘要循环”。

摘要循环本质上是指AngularJS中数据绑定的过程。 在这个过程中，新旧版本的示波器模型值相互对比并进行比较。 虽然摘要循环是自动触发的，但您也可以使用“$apply()”手动启动该过程。

10. 单向绑定和双向绑定有什么区别？

单向绑定用于将模型中的数据绑定到视图，而无需自动更新 HTML 模板或视图。 因此，在这种方法中，您必须编写自定义代码来更新 HTML 模板，每次数据从模型绑定到视图时都会进一步更新视图。

与此相反，双向绑定通过自动更新 HTML 模板将数据从模型绑定到视图，反之亦然，无需您编写任何自定义代码。

11.定义链接功能。 命名链接函数的类型。

链接将指令与范围相结合以生成实时视图。 link 函数用于注册 DOM 监听器和更新 DOM。 该函数在模板被克隆后立即执行。

有两种类型的链接函数：

• 预链接功能 - 该功能在子元素链接之前执行，通常不是 DOM 转换的安全方法。
• 后链接功能 - 此功能在子元素链接后执行。

12. AngularJS 中的注入器是什么？

注入器是 AngularJS 中的服务定位器。 注入器的主要目的是接收由提供者定义的对象实例、调用方法、加载模块和实例化类型。 每个 Angular 应用程序都包含一个注入器，它可以帮助通过名称查找对象实例。

13. 命名 ng-model 添加到 CSS 类的不同样式形式。

ng-model 将以下样式形式添加到 CSS 类中：

• ng-有效
• ng-无效
• ng-原始
• ng-脏

14. 定义依赖注入。 对象或函数如何访问其依赖项？

依赖注入 (DI) 是一种软件设计模式，用于确定代码如何检索其依赖关系。 它允许组件访问它们的依赖项，而不是在组件中硬编码它们。 为了在应用程序中加载模块时检索需要配置的元素，“config”操作使用 DI。

对象或函数可以通过以下方式访问其依赖项：

• 可以使用 new 运算符创建依赖项。
• 可以通过引用全局变量来查找依赖项。

15.在AngularJS中命名可以作为依赖注入的组件。

在 AngularJS 中，您可以将以下组件作为依赖项相互注入：

• 价值
• 服务
• 工厂
• 持续的
• 提供者

也可以找到这个问题的答案：为什么要成为一名全栈开发人员？

16. HTML的编译过程有哪些步骤？

HTML的编译过程涉及以下步骤：

• 首先，使用标准浏览器 API 将 HTML 解析为 DOM。
• 在下一步中，对 $compile() 方法的调用用于执行 DOM 的编译。 该方法遍历 DOM 以匹配指令。
• 最后一步涉及通过调用从先前步骤返回的链接函数将模板与范围链接。

17. AngularJS 中的服务是什么？

服务是旨在执行特定任务的 JavaScript 函数。 例如，$https: 函数用于进行 AJAX 调用以获取服务器数据，而 $route 函数用于定义路由信息。 还有更多可以执行特定任务的此类服务。

18. 在 AngularJS 中定义指令。 命名不同类型的指令。

在 AngularJS 中，指令是在编译过程中遇到特定 HTML 结构时触发的行为或函数。 指令是 DOM 元素（如元素、属性、CSS 等）上的标记。 您还可以使用它们来创建充当新的自定义小部件的自定义 HTML 标记。

四种核心类型的指令是：

• 元素指令
• 属性指令
• 评论指令
• CSS 类指令

19. 区分 AngularJS 中的 Annotation 和 Decorator。

在 Angular 中，注解是类的唯一元数据集，它使用反射元数据库来创建“注解”数组。 另一方面，装饰器是用于在不改变应用程序的原始源代码的情况下分离装饰或修改类的设计模式。

20. 定义控制器。

控制器是绑定到特定范围的 JavaScript 函数。 他们的主要目标是为 HTML UI 提供数据和逻辑。 它们是 AngularJS 框架中控制数据如何从服务器流向 HTML UI 的主要参与者。 此外，控制器还具有对数据进行操作并确定需要更新哪个视图以显示更新的基于模型的数据的功能。

21. AngularJS 中的日志是如何维护的？

为了维护日志，AngularJS 中使用了 $log 服务。 $log 服务的主要目的是通过下面提到的方法帮助调试和故障排除：

• log() - 用于在控制台中写入日志消息。
• info() - 用于编写信息消息。
• warn() - 用于编写警告消息。
• error() - 用于编写错误消息。
• debug() - 用于编写调试消息。

22. 在 AngularJS 中定义 $rootscope。 它与范围有何不同？

在 AngularJS 中，$rootscope 和 $scope 都是通常用于从控制器共享数据以供查看的对象。 然而，两者完全不同。 $rootscope 和 $scope 之间的主要区别在于，虽然前者在所有控制器中全局可用，但 $scope 仅在与其子控制器一起创建它的控制器中可用。

23. 列举一些 AngularJS 支持的浏览器。

以下是 AngularJS 支持的一些浏览器：

• 火狐浏览器
• 谷歌浏览器
• 微软边缘
• IE手机
• Safari (iOS)
• 即 10,11

24. 如何在 Angular 1.x 中启用 HTML5 模式？

要在 Angular 1.x 中启用 HTML5 模式，您必须运行以下代码：

angular.module('myApp', [ ])

.config(function($routeProvider, $locationProvider) {

$routeProvider

。什么时候（'/'， {

templateUrl : 'partials/home.html',

控制器：主控制器

})

// 使用 HTML5 历史 API

$locationProvider.html5Mode(true);

});

25. 命名 AngularJS 中的内置验证器。

AngularJS 支持所有用于验证输入的标准 HTML5 属性。 以下是 AngularJS 中的一些内置验证器：

• 敏
• 最大限度
• 必需的
• 类型=”数字”或类型=”电子邮件”

26. 如何使用 AngularJS 进行 AJAX 调用？

您可以使用 AngularJS 中的 $https: 服务进行 AJAX 调用以从服务器读取数据。 AngularJS 要求数据为 JSON 格式。 服务器创建一个数据库调用来检索所需的记录。 数据准备好后，可以使用 $https: 服务从服务器检索数据，如下所示：

函数 studentController($scope,$https:) {

var url = “data.txt”；

$https:.get(url).success(函数(响应){

$scope.students = 响应；

});

}

27. AngularJS 中的内部化是什么？

在 AngularJS 中，国际化是指用于在网站上显示特定于语言环境的信息的方法。 例如，在美国以英语显示内容，在法国以丹麦语显示内容的网站必须根据位置进行内部化。

AngularJS 为三种过滤器提供内置的国际化支持：

• 日期
• 数字
• 货币

28. 描述 AngularJS 启动过程的步骤。

当您在浏览器中加载页面时，AngularJS 启动过程就会启动。涉及的步骤如下：

• HTML 文档文件由浏览器加载和评估。 然后加载 AngularJS JavaScript 文件，并创建一个全局对象。
• 在下一步中，执行负责注册控制器功能的 JavaScript 文件。
• AngularJS 扫描 HTML 以查找 AngularJS 应用程序和视图。 当它成功找到一个视图时，它将那个特定的视图连接到相应的控制器功能。
• 最后，AngularJS 执行控制器功能并使用控制器填充的模型中的数据呈现视图，并且页面已准备好供用户查看。

29. AngularJS 中过滤器的作用是什么？

过滤器用于格式化表达式的值并将其显示给用户。 在 AngularJS 中，过滤器被添加到模板、指令、控制器和服务中。 您还可以创建自定义过滤器。 通过使用过滤器，您可以组织数据，使数据值仅在满足特定条件时才显示。 过滤器通过使用“|”添加到 Angular 表达式中字符后跟一个过滤器

结论

所以，这里有 29 个最常被问到的AngularJS 面试问题和答案，它们将帮助你打破 AngularJS 的僵局。

如果您有兴趣了解有关 AngularJS、全栈开发的更多信息，请查看 upGrad 和 IIIT-B 的全栈软件开发 PG 文凭，该文凭专为在职专业人士设计，提供 500 多个小时的严格培训、9 个以上的项目和任务、IIIT-B 校友身份、实用的实践顶点项目和顶级公司的工作协助。

快乐学习！