75 个 AngularJS 面试问题及答案 (2025)

由： 詹姆斯·哈特曼 詹姆斯·哈特曼
Hours 更新

以下是 AngularJS 面试问题和答案，可帮助新手和有经验的应聘者获得理想的工作。

 

面向新人的 AngularJS 面试问题和答案

1）什么是AngularJS？

AngularJS 是一个 Java用于创建单网页应用程序的脚本框架。它允许您使用 HTML 作为模板语言，并允许您扩展 HTML 的语法以清晰地表达应用程序的组件。

👉 免费 PDF 下载： AngularJS 面试问题与答案 >>

2）AngularJS 的主要特性是什么？

AngularJS 的主要特性包括：

  • 适用范围
  • 控制器
  • 型号
  • 首页
  • 服务范围
  • 数据绑定
  • 指令
  • 筛选
  • 可测试

3）解释 AngularJS 中的函数作用域

适用范围 指应用程序模型。它就像应用程序控制器和视图之间的粘合剂。作用域按层次结构排列，并模拟应用程序的 DOM（文档对象模型）结构。它可以监视表达式并传播事件。

4）解释 AngularJS 中的服务

AngularJS 服务是用于执行特定任务的单例对象或函数。它包含一些业务逻辑。

5）什么是 Angular Expression？解释 angular expressions 和 Java脚本表达式

喜欢 Java脚本、Angular 表达式是通常放置在绑定中的代码片段，例如 {{ expression }}

之间的主要区别 Java脚本表达式和 Angular 表达式是：

  • 语境： 在 Angular 中，表达式是根据作用域对象进行求值的，而 Java脚本表达式根据全局窗口进行评估
  • 宽容： 在 Angular 表达式中，求值对于 null 和 undefined 是宽容的，而在 Java脚本未定义的属性会产生 TypeError 或 ReferenceError
  • 没有控制流语句： 角度表达式中不能使用循环、条件或异常
  • 过滤器： 您可以在显示数据之前使用过滤器来格式化数据。

6) 如何在页面加载时初始化带有选项的选择框？

您可以使用 ng-init 指令在页面加载时初始化带有选项的选择框。

  • <div ng-controller = ” apps/dashboard/account ” ng-switch
  • 开 = “！ ！账户” ng-init = ” loadData ( ) “>

7）什么是指令？列举一些 AngularJS 应用程序中最常用的指令

指令是引入新语法的东西。它们就像 DOM 元素上的标记，为其附加特殊行为。在任何 AngularJS 应用程序中，指令都是最重要的组件。

一些常用的指令是：

1）ng-模型

2）ng-App

3）ng-bind

4）ng-重复

5）ng-show

相关文章

8）Angular JS 路由如何工作？

AngularJS 路由可让您为应用程序中的不同内容创建不同的 URL。不同内容的不同 URL 使用户能够将特定内容的 URL 添加到书签中。AngularJS 中每个这样的可添加书签的 URL 称为路由

Angular JS 中的值是一个简单的对象。它可以是数字、字符串或 Java脚本对象。值通常用作注入工厂、服务或控制器的配置。值应属于 AngularJS 模块。

通过添加与值同名的参数，可以将值注入 AngularJS 控制器函数

9）AngularJS 中的数据绑定是什么？

模型和视图组件之间的数据自动同步在 AngularJS 中称为数据绑定。数据绑定有两种方式

  1. 经典模板系统中的数据挖掘
  2. 角度模板中的数据绑定

10）AngularJS 有什么好处？

AngularJS 的优点是：

  • 注册回调： 无需注册回调。这使您的代码变得简单且易于调试。
  • 以编程方式控制 HTML DOM： 使用 Angular 创建的应用程序不需要操作 DOM。
  • 与 UI 之间传输数据： AngularJS 有助于消除几乎所有的样板代码。它可以验证表单、显示错误、返回内部模型等等。
  • 没有初始化代码： 使用 AngularJS，您可以轻松引导您的应用。您可以在 Guice 中使用自动注入服务到您的应用中。

11) Angular.JS 中的字符串插值是什么？

在 Angular.js 中，编译器在编译过程中会匹配文本和属性。它使用插值服务来查看它们是否包含嵌入的表达式。作为正常摘要周期的一部分，这些表达式会被更新并注册为监视。

12) HTML 的编译过程有哪些步骤？

HTML 的编译过程如下

  • 使用标准浏览器 API，首先将 HTML 解析为 DOM
  • 通过调用 $compile () 方法，执行 DOM 的编译。该方法遍历 DOM 并匹配指令。
  • 通过调用上一步返回的链接函数将模板与范围链接起来

13）解释指令及其类型

在编译过程中，当触发特定的 HTML 函数时，它被称为指令。当编译器在 DOM 中遇到它时，它就会被执行。

不同类型的指令包括：

1）元素指令

2）属性指令

3）CSS 类指令

4）评论指令。

14）解释链接函数及其类型

Link 将指令与范围相结合并生成实时视图。link 函数负责注册 DOM 监听器以及更新 DOM。模板克隆后，将执行该函数。

  • 预链接功能： 预链接函数在子元素链接之前执行。它不被认为是一种安全的 DOM 转换方式。
  • 帖子链接功能： 后链接函数在子元素链接完成后执行。使用后链接函数进行 DOM 转换是安全的

15）解释 AngularJS 中的注入器

注入器是一种服务定位器。它用于检索提供者定义的对象实例、实例化类型、调用方法和加载模块。每个 Angular 应用程序都有一个注入器，它有助于通过名称查找对象实例。

16) Angular.js 中链接和编译的主要区别是什么？

  • 编译函数： 它用于模板 DOM 操作并收集所有指令。
  • 链接功能： 它用于注册 DOM 监听器以及 DOM 操作。它在模板被克隆后执行。

17) AngularJS 中的工厂函数是什么？

为了创建指令，使用工厂方法。当编译器第一次匹配指令时，它只会被调用一次。通过使用 $injector.invoke 来调用工厂方法。

18）解释 ngModel 添加到 CSS 类的样式形式

NgModel 添加这些 CSS 类来允许设置表单样式。AngularJS 的验证类包括：

  1. ng-有效
  2. ng- 无效
  3. ng-pristine
  4. ng-dirty

19）“范围”有何特点？

  • 观察者模型突变范围提供 API ($watch)
  • 将任何模型更改通过系统传播到 Angular 领域之外的视图中
  • 作用域从其父作用域继承属性，同时提供对共享模型属性的访问，作用域可以嵌套以隔离应用程序组件
  • 范围提供了表达式求值的上下文

20)什么是 DI（依赖注入）以及对象或函数如何获取其依赖关系？

DI 或依赖注入是一种软件设计模式，用于处理代码如何获取其依赖项。为了检索模块加载时需要配置的应用程序元素，“config”操作使用依赖注入。

这些是对象用来保存其依赖项的方式

  • 通常使用 new 运算符可以创建依赖关系
  • 通过引用全局变量，可以查找依赖关系
  • 依赖关系可以传递到需要的地方

面向资深专业人士的 AngularJS 面试问题和答案

21）解释范围层次的概念

每个 Angular 应用程序由一个根作用域组成，但可能有多个子作用域。由于子控制器和某些指令会创建新的子作用域，因此应用程序可以有多个作用域。当形成或创建新作用域时，它们将作为其父作用域的子作用域添加。它们还会创建类似于 DOM 的层次结构。

22）解释 AngularJS 和 backbone.js 之间的主要区别

AngularJS 主干.js
AngularJS 是一个 Java基于脚本的开源框架，旨在支持动态 Web 应用程序。 backbone.js 是一个将 DOM 抽象为视图、将数据抽象为模型，然后使用事件绑定两者的框架。
它的性能很好，因为它提供了双向数据绑定过程 如果数据集较小，Backbone.js 技术比 AngularJS 提供更快的性能
它在 MVS（多虚拟存储）上运行。 它基于 MVP 架构运行。
AngularJS 使用动态 HTML 属性来使应用程序易于理解。 Backbone.js 使用下划线模板来理解应用程序。
它得到了广大社区的支持。 社区支持仅限于下划线模板。

23）谁创建了 Angular JS？

AngularJS 由 Adam Abrons 和 Misko Hevery 开发。目前由 Google 开发。

24) 如何将 AngularJS 与 HTML 集成？

开发人员可以按照以下步骤将 AngularJS 与 HTML 集成：

步骤1： 包括 AngularJS Javahtml 页面中的脚本。

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

步骤2： 指出 AngularJS 应用程序。

您必须在 HTML body 标签内添加 ng-app 属性来告诉 AngularJS 应用程序包含 HTML 的哪些部分，如下例所示：

<body ng-app = "testapp">
</body>

25) AngularJS 中的 orderby 过滤器是什么？

AngularJS 中的 Orderby 过滤器根据指定的条件对数组进行排序。以下示例说明了如何按价格对产品进行排序。

<ul>
<li ng-repeat = "company in product.products | orderBy:'price">
      {{ company.product + ', price:' + product.price }}
   </li>
</ul>

26) AngularJS 中的 ng-non-bindable 是什么？

ng-non-bindable 指定 AngularJs 不编译 HTML 元素及其子节点。例如：

<title ng-non-bindable > </title>

27）解释 AngularJS 中双击事件的使用

AgularJS 的双击事件允许您在网页上指定鼠标双击事件的自定义行为，例如：

<ELEMENT ng-dblclick="{expression}"> 
... 
</ELEMENT>

28）通过示例解释 AngularJS 中的 ng-click 指令

当你必须单击按钮或者想要执行任何操作时，可以使用 Ng-click 指令。

计费示例：

<button ng-click="count = count ++">Click</button>

29) 为什么在 AngularJS 中使用 ng-include？

AngularJS 中的 Ng-include 可帮助您在单个 HTML 页面中嵌入 HTML 页面。示例：

<div ng-app = "" ng-controller = "interviewController">
   <div ng-include = "'first.htm'"></div>
   <div ng-include = "'phases.htm'"></div>
</div>

30) 如何使用 Angular JS 进行 ajax 调用？

AngularJS 提供 $https: 控件，可帮助您进行 ajax 调用以读取服务器数据。服务器进行数据库调用以获取所需的记录。一旦 JSON 格式的数据准备就绪，您就可以使用 $https: 以以下方式从服务器检索数据：

function employeeController($scope,$https:) {
   var url = "tasks.txt";
   $https.get(url).success( function(response) {
      $scope.employee = response; 
   });
}

31）解释$routeProvider的用法

在 Angular JS 中，$routeProvider 设置 URL 配置。它与相关的 ng-template 或 HTML 页面进行映射，并附加一个控制器。

32) 如何在 AngularJS 中设置、获取和清除 cookie？

您可以使用：

  • $cookies.put() 方法来设置 cookies。
  • $cookies.get() 方法获取 cookies。
  • $cookies.remove 用于删除 AngularJS 中的 cookie。

33）什么是服务方法？

AngularJS 中的服务方法可帮助您定义服务和方法。在下面的示例中，我们注入了一个简单的加法服务，它将两个数字相加。

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<h3> Guru99 Global Event</h3>
<div ng-app = "mainApp" ng-controller = "DemoController">
    <p>Result: {{result}}</p>
</div>
<script>
    var mainApp = angular.module("mainApp", []);
    mainApp.service('AdditionService', function(){
        this.ADDITION = function(a,b) {
            return a+b;
        }
    });

    mainApp.controller('DemoController', function($scope, AdditionService) {

            $scope.result = AdditionService.ADDITION(5,6);
    });
</script>
</body>
</html>

34) 列出可以作为依赖项注入的 AngularJS 组件

可以作为依赖项注入的 AngularJS 组件有：1) 值，2) 工厂，3) 服务，4) 提供者，5) 常量。

35）常见的 Angular 全局 API 函数有哪些

一些常用的 Angular 全局 API 函数是：

  • Angular.isString： 仅当给定的引用是字符串类型时它才会返回 true。
  • 角度.小写： 它将任何字符串转换为小写
  • 角度.大写： 它将任何字符串转换为大写。
  • Angular.isNumber： 仅当引用是数值或数字时它才返回 true。

36）编写一个程序，只需单击一个按钮即可隐藏 HTML 标签

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    <input type="button" value="Hide Angular" ng-click="ShowHide()"/>
    <br><br><div ng-hide="IsVisible">Angular</div>
</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){
        $scope.IsVisible = false;
        $scope.ShowHide = function(){
            $scope.IsVisible = $scope.IsVisible = true;
        }
        });
</script>
</body>
</html>

37）什么是BOM（浏览器对象模型）？

BOM 或浏览器对象模型由历史记录、对象导航器、屏幕位置等组成。它指定全局浏览器对象，如控制台、本地存储和窗口。

38）解释 AngularJS 中的“$rootScope”

“$rootScope” 是在 DOM（文档对象模型）元素上创建的范围。

一个应用程序只能有一个与其他组件共享的 $rootScope。它具有 ng-app 指令。其他范围被称为其子范围。它可以监视表达式以及传播事件。

39）给出 Angular 中 ng-view 的示例

考虑以下示例：

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.5.9/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.5.9/angular.min.js"></script>
    <script src="lib/bootstrap.js"></script>
</head>
<body ng-app="sampleApp">
<h1> Global Event</h1>
<div class="container">
    <ul><li><a href="#!NewEvent"> Add New Event</a></li>
        <li><a href="#!DisplayEvent"> Display Event</a></li>
    </ul>
    <div ng-view></div>
</div>
<script>
    var app = angular.module('sampleApp',["ngRoute"]);
    app.config(function($routeProvider){
        $routeProvider.
        when("/NewEvent",{
            templateUrl : "add_event.html",
            controller: "AddEventController"
        }).
        when("/DisplayEvent", {
            templateUrl: "show_event.html",
            controller: "ShowDisplayController"
        }).
        otherwise ({
            redirectTo: '/DisplayEvent'
        });
    });
    app.controller("AddEventController", function($scope) {
        $scope.message = "This is to Add a new Event";
    });
    app.controller("ShowDisplayController",function($scope){
        $scope.message = "This is display an Event";
    });
</script>
</body>
</html>

40) AngularJS 中工厂方法的语法是什么？

Factory 的语法如下：

app.factory（'服务名称'，函数（）{返回serviceObj;}）

41) 说出 AngularJS Scope 生命周期的不同阶段。

以下是 AngularJS Scope 生命周期的不同阶段：

  • 创建
  • 模型突变
  • 观察者注册
  • 突变观察
  • 范围破坏

42）在 Angular 中编写一个程序来引导进程

Angular 中引导过程的程序是：

<html>
    <body ng-app="TestApp">
        <div ng-controller="Ctrl">Hi{{msg}}!</div>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"> 
</script>
        <script>
            var test = angular.module('TestApp', []);
            test.controller('Ctrl', function($scope) {
                $scope.msg = 'Good Morning';
            });
        </script>
    </body>
</html>

43) AngularJS 中的单页应用程序是什么？

SPA 或单页应用程序是与用户动态交互的网站或 Web 应用程序。在 AngularJS 中， Java脚本、HTML 和 CSS 都包含在一个页面上。它无需刷新整个 HTML 页面即可进行导航。

44）解释 webpack 的概念

Webpack 是 Angular2 及以上版本的模块打包器。它可以打包、转译和压缩 AngularJS 应用程序。

45）你所说的 NPM 是什么意思？

NPM 代表 Node 包管理器。它由一个用于与 Node.js 项目的存储库交互的命令行工具客户端组成。

46) 如何使用命令行界面在 angularJS 中创建新项目？

一旦安装了 Angular 命令行界面，您就必须运行 ng new project-name 命令才能在 Angular 中创建新项目。

47）解释 AngularJS 中的自动引导过程

Angular 会自动初始化 DOMContentLoaded 事件或者当你下载 angular.js 脚本到浏览器时。

在此之后，AngularJS 找到作为 Angular 应用编译根源的 ng-app 指令。找到 ng-app 指令后，AngularJS 执行以下步骤：

1）加载与指令关联的模块，

2）创建应用程序注入器，

3) 从 ng-app 根元素编译 DOM。此过程称为自动引导。

48) 什么是立即调用函数表达式？

IIFE 或立即调用函数表达式是一种创建后立即执行的函数。它提供了一种隔离变量声明的简单方法。IIFE 包含两个主要功能：

1）运算符（）

2）表达式（）

49) AngularJS 中的摘要周期是什么？

摘要循环是 AngularJS 中数据绑定的重要组成部分，它 比较范围模型的新旧版本。摘要循环通过使用 $apply() 函数自动或手动触发。

50) 使用 AngularJS 的基本要求是什么？

您必须从 AngularJS.com 下载最新版本的 AngularJS 才能学习或使用 AngularJS。您可能需要 JS 文件并将其托管在本地，也可以使用 google CDN（内容分发网络）来引用它。

51) 我们可以在 AngularJS 中创建嵌套控制器吗？

是的，我们可以在 AngularJS 中创建一个嵌套控制器。

嵌套控制器示例如下：

<div ng-controller="MainCtrl">
 <p>{{msg}} {{name}}!</p>
<div ng-controller="SubCtrl1">
<p>Hi {{name}}!</p>
   <div ng-controller="SubCtrl2">
     <p>{{msg}} {{name}}! Your name is {{name}}.</p>
   </div>
</div>
</div>

52）什么是身份验证？

身份验证是用于登录和注销 Angular 应用程序的服务。用户的凭据传递给服务器上的 API。然后在服务器端验证这些凭据后，将返回 JSON Web Token，其中包含有关当前用户的详细信息。

53）定义 AngularJS 材质

AngularJS Material 是 Google Material Design 规范的一个实现，它为 AngularJS 程序员提供了一套经过良好测试、可重复使用的 UI 组件。

54）Angular 7 和 Angular 8 之间的重要区别是什么

角度7 角度8
Angular 7 很难使用 Angular 8 非常容易使用
它为 Typescript 3.4 编程语言的较低版本提供支持 它不提供对 Typescript 3.4 编程语言较低版本的支持
支持所有版本 Node.js 仅支持 Node.js 12 版本。

55）什么是 ngzone？

ngzone 是一个 JavaScrip 包装器类，由 Zone.js 表示。它使开发人员能够在 Angular 区域之外明确运行某些代码，从而阻止 Angular 运行任何变更检测。

56）列出 Angular Component 和 Directive 之间的区别

元件 指示
Angular 组件是一个指令，它使您能够在整个应用程序中利用 Web 组件功能。 Angular 指令是一种将行为附加到元素的技术。
它可以帮助您将应用程序划分为更小的组件。 它可以帮助您设计可重复使用的组件。
它可以定义管道 它不能定义管道。

57）定义 ECMAScript

ECMAScript（欧洲计算机制造商协会）是脚本语言的标准。 Java脚本使用 ECMAScript 作为核心语言。开发人员可以借助它在万维网上编写客户端脚本和/或服务器应用程序和服务。ECMAScript 具有许多功能，例如功能、原型、动态和结构化功能。

58）什么是 Traceur 编译器？

Traceur 是 Java使用 ECMAScript 的类、生成器和其他功能的脚本编译器。

59) 如何将字符串转换为货币？

您可以将字符串输入转换为 Angular 中的货币类型货币过滤器。

60）AngularJS 中的模板是什么？

模板是与 AngularJs 指令和属性一起使用的 HTML 文件。

61）解释 Angular 和 jQuery 之间的区别

AngularJS JQuery的
AngularJs 很难理解 Jquery 非常容易理解。
支持双向绑定过程 不支持数据绑定过程
它提供对深度链接路由的支持 它不提供深度链接路由支持

62）什么是提前编译？

Angular AOT（Ahead of Time）是一个编译器，它可以将你的 Angular HTML 和 TypeScript 代码转换为 Java脚本代码。

63）列出 AngularJS 中的过滤器类型

AngularJS 中使用的过滤器类型有：1) 货币、2) 大写、3) 小写、4) orderBy、5) JSON 和 6) limitTo。

64）解释 ngOnInit() 函数

ngOnInit() 函数是一个生命周期钩子，在指令的数据绑定属性完成后调用。

65）AngularJS 中的包含是什么？

AngulaJS 中的嵌入功能使开发人员能够将原始指令子项重新分配到模板内的特定位置。指令 ng 显示使用嵌入的最近父指令的嵌入 DOM 的插入点。Ng-transclude-slot 或 ng-transclude 指令主要用于嵌入。

66）AngularJS 中提供了丰富的钩子

AngularJS 中的各种钩子包括：

1）ngOnInit（）

2）ngOnChanges（），

3）ngDoCheck（），

4）ngAfterContentInit（），

5）ngAfterContentChecked（），

6）ngOnDestroy（），

7）ngAfterViewChecked（）和

8）ngAfterViewInit（）

67) AngularJS 元数据的重要部分是什么？

AngularJS 元数据用于修饰类，描述特定类的预期行为。元数据的各个部分包括：1) 类修饰器、2) 方法修饰器、参数修饰器和 4) 属性修饰器。

68）什么是 Angular CLI？

Angular CLI 也称为命令行界面工具。它用于构建、初始化和维护 Angular 应用程序。CLI 软件可以通过非常交互式的 UI（如命令 shell 或 Angular 控制台）使用。

69）解释 AngularJS 中的参数化管道

在 angularJS 中，管道可以有多个参数，以便调整精细输出。您可以通过用冒号 (:) 和参数值声明管道来创建参数化管道。开发人员可以用冒号 (:) 分隔多个参数值。

70）什么是路由？

路由是一种合并各种视图的方法。控制器根据逻辑需求决定是否合并这些视图。

71）隔离单元测试是什么意思？

隔离测试是检查类实例的过程，无需使用任何注入值或 Angular 依赖项。它可以帮助您非常轻松地实现程序。

72）说出 AngularJS 中的 DSL 动画函数

AngularJS 中的 DSL 动画函数有：1) group()、2) state()、3) transition()、4) style()、5) keyframes()、6) trigger()、7) serial() 和 8) animate()。

73）什么是 AngularJS 模块？

在 angularJS 中，模块是将相关指令和服务组件分组的过程。它以某种方式排列它们，使它们可以与其他模块混合以创建应用程序。

74) AngularJs 中的管道是什么？

在 angular 中，管道提供了一种转换数据的简单方法。它将数组、整数、数据和字符串等值作为输入，并用管道 (|) 符号分隔。它将数据转换为所需的格式。管道在浏览器中显示相同的内容。在 angularJS 中，它提供了一些内置管道，但开发人员也可以开发自己的管道。

75）解释 AngularJS 中的 ViewEncapsulation

ViewEncapsulation 决定 AngularJS 组件中定义的样式是否会影响整个应用程序。

为你的求职面试做好准备！ AngularJS 教程 以便做好更好的准备。

这个详细的 AngularJS 模拟测试将帮助您消除对 AngularJS 面试问题的疑虑，并帮助您破解面试。


这些面试问题也会对你的口试有帮助

你可能会喜欢：