AngularJS 面试问题

2025 年 3 月 29 日 | 阅读 19 分钟

以下是常见且常问的 AngularJS 面试问题和答案列表。

1) 什么是 AngularJS？

AngularJS 是一个开源的 JavaScript 框架，用于构建丰富且可扩展的 Web 应用程序。它由 Google 开发，遵循 MVC（模型-视图-控制器）模式。它支持 HTML 作为模板语言，并允许开发人员创建扩展的 HTML 标签，这将有助于更清晰地表示应用程序的内容。它易于更新和接收来自 HTML 文档的信息。它还有助于编写一个可维护的架构，该架构可以在客户端进行测试。

2) AngularJS 的主要优点是什么？

AngularJS 的一些主要优点如下所示

允许我们创建单页应用程序。
遵循 MVC 设计模式。
预定义的表单验证。
支持动画。
开源。
跨浏览器兼容。
支持双向数据绑定。
其代码可进行单元测试。

3) AngularJS 的缺点是什么？

AngularJS 存在一些缺点，如下所示

依赖 JavaScript
如果最终用户禁用 JavaScript，AngularJS 将无法工作。
不安全
它是一个基于 JavaScript 的框架，因此仅通过 AngularJS 验证用户是不安全的。
旧设备上的时间消耗
旧计算机和手机上的浏览器无法或需要更多时间来渲染使用该框架设计的应用程序和网站页面。这是因为浏览器会执行一些辅助任务，例如 DOM (文档对象模型) 操作。
难以学习
如果您是 AngularJS 新手，那么处理像分层、层次结构和作用域这样的复杂实体对您来说并不容易。对于许多程序员来说，调试作用域被认为是一项艰巨的任务。

4) 参照 Angular 描述 MVC。

AngularJS 基于 MVC 框架，其中 MVC 代表 Model-View-Controller（模型-视图-控制器）。MVC 执行以下操作

模型是负责维护数据的模式的最低层。
控制器负责一个视图，该视图包含用于操作数据的逻辑。它基本上是一个软件代码，用于控制模型和视图之间的交互。
视图是负责显示数据的 HTML。

例如， $scope 可以定义为模型，而 angular 控制器中编写的函数修改 $scope，HTML 显示作用域变量的值。

5) 什么是 $scope？

$scope 是一个对象，它代表 Angular 应用程序的应用程序模型。

每个 AngularJS 应用程序只能有一个根作用域，但可以有多个子作用域。例如：

var app = angular.module('myApp', []);    
app.controller('myCtrl', function($scope) {    
    $scope.carname = "Volvo";    
});

$scope 对象的一些主要特性如下所示

它提供观察器来检查所有模型更改。
它提供通过应用程序以及系统外部向其他相关组件传播模型更改的能力。
作用域可以嵌套，以便它们可以隔离功能和模型属性。
它提供了一个执行环境，其中表达式被评估。

6) AngularJS 是否依赖于 JQuery？

AngularJS 是一个 JavaScript 框架，具有模型、双向绑定、指令、路由、依赖注入、单元测试等主要功能。另一方面，JQuery 是一个用于 DOM 操作的 JavaScript 库，没有双向绑定功能。

7) 当前用于 AngularJS 开发的 IDE 有哪些？

IDE 代表 集成开发环境。以下是一些用于 AngularJS 开发的 IDE

Eclipse
它是最流行的 IDE 之一。它支持 AngularJS 插件。
Visual Studio
它是 Microsoft 的一款 IDE，提供了一个轻松即时开发 Web 应用程序的平台。
WebStorm
它是用于现代 JavaScript 开发的最强大的 IDE 之一。它提供了一种使用 angular CLI 添加依赖项的更简单方法。
Aptana
它是 Eclipse 的定制版本。它是免费使用的。
Sublime Text
它是 HTML、CSS 和 JavaScript 最值得推荐的编辑器之一。它与 AngularJS 代码非常兼容。

8) AngularJS 的特点是什么？

AngularJS 的一些重要特性如下所示

MVC- 在 AngularJS 中，您只需将应用程序代码拆分为 MVC 组件，即模型、视图和控制器。
验证- 它执行客户端表单验证。
模块- 它定义了一个应用程序。
指令- 它指定 DOM 元素的行为。
模板- 它渲染动态视图。
作用域- 它将控制器与视图连接起来。
表达式- 它将应用程序数据绑定到 HTML。
数据绑定- 它在选定的元素和 $ctrl.orderProp 模型之间创建双向数据绑定。
过滤器- 它提供过滤器来格式化数据。
服务- 它在整个应用程序中存储和共享数据。
路由- 它用于构建单页应用程序。
依赖注入- 它指定了一种设计模式，其中组件被赋予其依赖项，而不是在组件内部硬编码它们。
测试- 通过单元测试和端到端测试，AngularJS 的任何组件都可以轻松进行测试。

9) AngularJS 中的指令是什么？

指令是 DOM 元素上的标记，用于指定该 DOM 元素的行为。所有 AngularJS 指令都以“ng”开头。AngularJS 中有许多内置指令，例如“ng-app”、“ng-init”、“ng-model”、“ng-bind”、“ng-repeat”等。

ng-app
ng-app 指令是 Angular 应用程序最重要的指令。它用于定位 AngularJS HTML 编译器中 Angular 应用程序的开头。它标记 Angular 打算作为应用程序根元素的 HTML 元素。自定义属性使用脊椎式命名，而相应的指令遵循驼峰式命名。如果我们不使用此指令并尝试处理其他指令，则会产生错误。
ng-init
ng-init 指令对于初始化 AngularJS 应用程序的数据变量的内联语句非常有用。因此，这些语句可以在我们可以声明它们的指定块中使用。ng-init 指令就像 ng-app 指令的局部成员，它可以是单个值或一组值。它直接支持 JSON 数据。
ng-model
ng-model 指令将 HTML 元素（如 input、select、textarea）的值绑定到应用程序数据。它提供与模型值的双向绑定行为。有时，它也用于数据绑定。
ng-bind
ng-bind 指令用于将模型/变量的值绑定到 AngularJS 应用程序的 HTML 控件。它也可以与 HTML 标签属性一起使用，例如：
、等，但它不支持双向绑定。我们只能检查模型值的输出。
ng-repeat
ng-repeat 指令用于重复 HTML 语句。它的工作方式与 C#、Java 或 PHP 中对特定集合项（如数组）的 foreach 循环相同。

让我们看一个 AngularJS 指令的简单示例

<div ng-app = "" ng-init = "countries = [{locale:'en-IND',name:'India'}, {locale:'en-PAK',name:'Pakistan'}, {locale:'en-AUS',name:'Australia'}]">
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span>!</p>
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat = "country in countries">
               {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}    
</li>
</ol>
</div>

10) AngularJS 中的控制器是什么？

控制器是 JavaScript 函数，用于向 HTML UI 提供数据和逻辑。它充当服务器和 HTML UI 之间的接口。每个控制器都接受 $scope 作为参数，它指向该控制器将控制的应用程序/模块。例如：

<script>
var app = angular.module('myApp', []);    
app.controller('myCtrl', function($scope) {    
    $scope.firstName = "Aryan";    
    $scope.lastName = "Khanna";    
});    
</script>

11) AngularJS 中控制器的用途是什么？

AngularJS 控制器用于

设置 $scope 对象的初始状态
向 $scope 对象添加行为

12) AngularJS 中的数据绑定是什么？

数据绑定是模型和视图之间数据的自动同步。在 AngularJS 中，它执行模型和视图之间的自动同步过程。

如果模型发生更改，视图会自动反映，反之亦然。AngularJS 支持两种数据绑定方式

单向数据绑定
在单向数据绑定中，当数据模型发生更改时，视图（UI 部分）不会自动更新。我们需要编写自定义代码以使其每次都更新。ng-bind 指令具有单向数据绑定。在这里，值从数据模型中获取并插入到 HTML 元素中。

双向数据绑定
在双向数据绑定中，每当数据模型被分配给不同的值时，作用域变量就会改变其值。它将模型视为应用程序中唯一的真实来源。视图始终是模型的投影。如果模型发生更改，视图会反映更改，反之亦然。

13) AngularJS 中的服务是什么？

服务是可用于在整个应用程序中存储和共享数据的对象。AngularJS 提供了许多内置服务，每个服务都负责特定任务。它们总是使用 $ 符号作为前缀。

任何 AngularJS 应用程序中使用的一些重要服务如下

$http- 它用于进行 Ajax 调用以获取服务器数据。
$window- 它提供对 DOM 对象的引用。
$Location- 它提供对浏览器位置的引用。
$timeout- 它提供对 window.set timeout 函数的引用。
$Log- 它用于日志记录。
$sanitize- 它用于避免脚本注入并在页面中显示原始 HTML。
$Rootscope- 它用于作用域层次结构操作。
$Route- 它用于在浏览器 URL 中显示基于浏览器的路径。
$Filter- 它用于提供过滤器访问。
$resource- 它用于处理 Restful API。
$document- 它用于访问 window.Document 对象。
$exceptionHandler- 它用于处理异常。
$q- 它提供一个 Promise 对象。
$cookies- 它用于读取、写入和删除浏览器的 cookie。
$parse- 它用于将 AngularJS 表达式转换为函数。
$cacheFactory- 它用于在用户更改输入时评估指定的表达式。

14) AngularJS 中的模块是什么？

模块是应用程序不同部分（如控制器、服务、过滤器、指令等）的容器。它被视为 main() 方法。应用程序的所有依赖项通常仅在模块中定义。模块是使用 angular 对象的 module() 方法创建的。例如：

15) AngularJS 中的路由是什么？

路由是 AngularJS 框架的主要功能之一，它对于创建具有多个视图的单页应用程序（也称为 SPA）非常有用。它将应用程序路由到不同的页面而无需重新加载应用程序。在 Angular 中，ngRoute 模块用于实现路由。ngView、$routeProvider、$route 和 $routeParams 是 ngRoute 模块的不同组件，它们有助于配置 URL 并将其映射到视图。

16) AngularJS 中的模板是什么？

模板由 HTML、CSS 和 AngularJS 指令组成，用于渲染动态视图。它更像是一个网页的静态版本，带有一些附加属性，可以在运行时注入和渲染数据。模板与来自模型和控制器的信息结合在一起。

17) AngularJS 中的表达式是什么？

AngularJS 中的表达式是解析为值的代码片段。AngularJS 表达式放在 {{expression}} 中。表达式包含在 HTML 元素中。

AngularJS 表达式还可以包含类似于 JavaScript 表达式的各种有效表达式。我们还可以在表达式 {{ }} 中使用数字、字符串、文字、对象和数组之间的运算符。

例如

{{1+1}}
{{Name + " " + email}} (string)
{{ Country.Name }} (object)
{{ fact[4] }} (array)

AngularJS 支持一次性绑定表达式。

18) Angular 表达式和 JavaScript 表达式之间的主要区别是什么？

Angular 表达式和 JavaScript 表达式之间的主要区别如下所示

Angular 表达式	JavaScript 表达式
Angular 表达式不支持条件语句、循环和异常。	JavaScript 表达式支持条件语句、循环和异常。
Angular 表达式支持过滤器。	JavaScript 表达式不支持过滤器。
Angular 表达式可以写在 HTML 中。	JavaScript 表达式不能写在 HTML 中。

19) AngularJS 中过滤器的用途是什么？

过滤器用于格式化表达式的值以显示格式化的输出。AngularJS 允许我们编写自己的过滤器。过滤器可以通过使用管道字符 | 添加到表达式中，后跟一个过滤器。例如：

<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ firstName | uppercase }}</p>
</div>
<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {    
    $scope.firstName = "Sonoo",    
    $scope.lastName = "Jaiswal"    
});    
</script>

过滤器可以应用于视图模板、控制器、服务和指令。重要的是要知道过滤器是区分大小写的。AngularJS 提供了一些内置过滤器，例如 Currency、Date、Filter、JSON、Limit、Lowercase、Number、Orderby 和 Uppercase。

20) 您对 AngularJS 中的大写过滤器和小写过滤器了解多少？

大写过滤器用于将文本转换为大写文本。例如：

Type first name:<input type = "text" ng-model = "student.firstName">
Type last name: <input type = "text" ng-model = "student.lastName">
Name in Upper Case: {{student.fullName() | uppercase}}

在上面的示例中，大写过滤器通过管道字符添加到表达式中。它将以大写字母打印学生姓名。

另一方面，小写过滤器用于将文本转换为小写文本。例如：

Type first name:<input type = "text" ng-model = "student.firstName">
Type last name: <input type = "text" ng-model = "student.lastName">
Name in Upper Case: {{student.fullName() | lowercase}}

它将以小写字母打印学生姓名。

21) 用示例解释自定义过滤器。

我们可以在 AngularJS 中创建自己的过滤器。这可以通过将过滤器与我们的模块关联来完成。这些类型的过滤器称为自定义过滤器。

下面的示例可以使用过滤器计算字符串中的元素数量

angular.module('myCountFilterApp', [])
   .filter('count',function()
{
    return(function(input)
    {
        var out=[];
        out=input.split(',');
        return out.length;
    })
});

根据上面的示例，如果字符串是“21, 34, 45”，则应用过滤器后的输出将是 3。

22) 解释 AngularJS 中的货币过滤器。我们如何使用它？

货币过滤器默认包含“$”美元符号。我们可以将以下代码用作货币过滤器的 HTML 模板格式。

我们可以通过以下方法使用货币过滤器

默认
如果我们不提供任何货币符号，则默认将使用美元符号，如下所示

默认货币{{amount | currency}}
用户定义
要使用不同类型的货币符号，我们必须通过应用该货币的十六进制代码或 Unicode 来定义我们自己的符号。
例如，要定义印度货币符号，我们必须使用 Unicode 值或十六进制值。
印度货币{{amount | currency:"&# 8377"}}

23) 您对 AngularJS 中的依赖注入有什么了解？

依赖注入（也称为 DI）是 AngularJS 的最佳功能之一。它是一种软件设计模式，其中对象作为依赖项传递，而不是在组件中硬编码它们。它有助于消除硬编码依赖项并使依赖项可配置。为了检索模块加载时需要配置的应用程序所需元素，“config”操作使用依赖注入。它允许分离应用程序中不同组件的关注点，并提供一种将依赖组件注入到客户端组件中的方法。通过使用依赖注入，我们可以使组件可维护、可重用和可测试。

下面显示了一个简单的 AngularJS 依赖注入示例

myApp.controller('myController', function ($scope, $http, $location)
    {
        //logic 
    });

在这里，控制器与其依赖项一起声明。

AngularJS 提供以下核心组件，它们可以作为依赖项相互注入

值
工厂模式
服务
Provider
Constant

24) 您对 AngularJS 中的数据验证有什么了解？

AngularJS 丰富了表单填写和验证功能。AngularJS 提供客户端表单验证。它检查表单和输入字段（input、textarea、select）的状态，并通知用户当前状态。它还保存有关输入字段是否已被触摸、修改的信息。

可以使用以下指令来跟踪错误

$dirty
它表示值已更改。
$invalid
它表示输入的值无效。
$error
它表示确切的错误。

此外，我们可以使用 novalidate 和表单声明来禁用浏览器的原生表单验证。

25) 您对链接函数有什么了解？解释其类型。

链接用于将指令与作用域结合并生成实时视图。链接函数用于注册 DOM 监听器以及更新 DOM。链接函数在模板克隆后立即执行。

有两种类型的链接函数

预链接函数
预链接函数在子元素链接之前执行。此方法不被认为是 DOM 转换的安全方法。
后链接函数
后链接函数在子元素链接后执行。此方法是 DOM 转换的安全方法。

26) 您对注入器了解多少？

注入器被称为服务定位器。它用于接收由提供者定义的对象实例、调用方法、实例化类型和加载模块。每个 Angular 应用程序都包含一个注入器，它有助于按名称查找实例。

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

工厂方法用于创建指令。当编译器第一次匹配指令时，工厂方法被调用。工厂方法使用 $injector.invoke 调用。

语法

28) 您将如何解释层次结构的概念？一个应用程序可以有多少个作用域？

每个 Angular 应用程序都包含一个根作用域，但可以有多个子作用域。应用程序可以有多个作用域，因为子控制器和一些指令会创建新的子作用域。当新的作用域形成或创建时，它被添加为父作用域的子作用域。与 DOM 类似，作用域也创建层次结构。

29) 解释 AngularJS 中如何维护日志？

可以使用 $log 服务维护日志。$log 服务的主要目的是帮助调试和故障排除。它通过以下方法完成。

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

30) AngularJS 中 find index 的主要目的是什么，如果找不到值它会返回什么？

Find index 用于返回元素的位置。如果找不到请求的元素，它返回值 (-1)。

在给定代码中，返回 item.date=2018-12-12 的对象的索引。

31) 我们可以在不发送 HTTP 请求的情况下从 PHP 会话变量设置 Angular 变量吗？

是的，我们可以通过在所需位置注入 PHP 来执行此操作。即，

只有当我们使用 PHP 渲染 HTML 并在 PHP 文件中

我们提供所有技术（如 Java 教程、Android、Java 框架）的教程和面试问题

联系信息

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

hr@tpointtech.com

+91-9599086977

关注我们

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview