AngularJS 面试问题（AngularJS Interview Questions）

优质

小牛编辑

131浏览

2023-12-01

亲爱的读者，这些AngularJS Interview Questions专门设计用于让您熟悉在面试AngularJS时可能遇到的问题的本质。根据我的经验，很好的面试官在你的面试中几乎不打算问任何特定的问题，通常问题从这个主题的一些基本概念开始，然后他们继续基于进一步的讨论和你回答的问题 -

什么是AngularJS？

AngularJS是一个构建大规模和高性能Web应用程序的框架，同时使它们易于维护。以下是AngularJS框架的功能。

AngularJS是一个功能强大的基于JavaScript的开发框架，用于创建RICH Internet Application（RIA）。
AngularJS为开发人员提供了以干净的MVC（模型视图控制器）方式编写客户端应用程序（使用JavaScript）的选项。
用AngularJS编写的应用程序是跨浏览器兼容的。 AngularJS自动处理适合每个浏览器的JavaScript代码。
AngularJS是开源的，完全免费，并被全球数千名开发人员使用。它是根据Apache许可证2.0版许可的。

什么是AngularJS中的数据绑定？

数据绑定是模型和视图组件之间数据的自动同步。 ng-model指令用于数据绑定。

AngularJS的范围是什么？

范围是引用模型的对象。它们充当控制器和视图之间的粘合剂。

AngularJS中的控制器是什么？

控制器是绑定到特定范围的JavaScript函数。它们是AngularJS框架中的主要参与者，并承载对数据进行操作的功能，并决定更新哪个视图以显示更新的基于模型的数据。

AngularJS有哪些服务？

AngularJS带有几个内置服务。例如，$ https:service用于生成XMLHttpRequests（Ajax调用）。服务是单例对象，在app中只实例化一次。

AngularJS中有哪些过滤器？

过滤器从数组中选择项的子集并返回新数组。过滤器用于根据定义的条件显示项目列表中的过滤项目。

解释AngularJS中的指令。

指令是DOM元素的标记（例如元素，属性，css等）。这些可用于创建自定义HTML标记，用作新的自定义窗口小部件。 AngularJS具有内置指令（ng-bind，ng-model等）来执行开发人员必须完成的大部分任务。

解释AngularJS中的模板。

模板是包含来自控制器和模型的信息的渲染视图。这些可以是单个文件（如index.html）或使用“partials”在一个页面中的多个视图。

什么是AngularJS中的路由？

这是切换视图的概念。基于AngularJS的控制器根据业务逻辑决定要呈现的视图。

什么是AngularJS中的深层链接？

深层链接允许您对URL中的应用程序状态进行编码，以便对其进行书签。然后，可以将应用程序从URL还原到相同的状态。

AngularJS有哪些优点？

以下是AngularJS的优点。

AngularJS提供了以非常干净和可维护的方式创建单页应用程序的功能。
AngularJS为HTML提供数据绑定功能，从而为用户提供丰富的响应体验。
AngularJS代码是可单元测试的。
AngularJS使用依赖注入并利用关注点分离。
AngularJS提供可重用的组件。
使用AngularJS，开发人员可以编写更少的代码并获得更多功能。
在AngularJS中，视图是纯html页面，用JavaScript编写的控制器进行业务处理。
AngularJS应用程序可以在所有主流浏览器和智能手机上运行，包括基于Android和iOS的手机/平板电脑。

AngularJS有哪些缺点？

以下是AngularJS的缺点。

不安全 - 仅限JavaScript框架，用AngularJS编写的应用程序并不安全。服务器端身份验证和授权必须保证应用程序的安全。
Not degradable - 如果您的应用程序用户禁用JavaScript，那么用户只会看到基本页面而已。

哪个是AngularJS的核心指令？

以下是AngularJS的三个核心指令。

ng-app - 该指令定义AngularJS应用程序并将其链接到HTML。
ng-model - 该指令将AngularJS应用程序数据的值绑定到HTML输入控件。
ng-bind - 该指令将AngularJS Application数据绑定到HTML标记。

解释AngularJS启动过程。

在浏览器中加载页面时，会发生以下情况:

HTML文档被加载到浏览器中，并由浏览器进行评估。加载了AngularJS JavaScript文件; 角度global对象已创建。接下来，执行注册控制器功能的JavaScript。
接下来，AngularJS扫描HTML以查找AngularJS应用程序和视图。找到视图后，它会将该视图连接到相应的控制器功能。
接下来，AngularJS执行控制器功能。然后，它使用控制器填充的模型中的数据呈现视图。页面准备好了。

什么是MVC？

M称为M odel V iew C ontroller或MVC，是用于开发Web应用程序的软件设计模式。模型视图控制器模式由以下三个部分组成:

Model - 它是负责维护数据的模式的最低级别。
View - 它负责向用户显示全部或部分数据。
Controller - 它是一个控制模型和视图之间交互的软件代码。

解释ng-app指令。

ng-app指令定义AngularJS应用程序并将其链接到HTML。它还表明应用程序的开始。

解释模型指令。

ng-model指令将AngularJS应用程序数据的值绑定到HTML输入控件。它创建了一个模型变量，可以与html页面一起使用，也可以在具有ng-app指令的容器控件（例如div）中使用。

解释绑定指令。

ng-bind指令将AngularJS Application数据绑定到HTML标记。 ng-bind更新由ng-model指令创建的模型，以便在用户在控件中输入内容时显示在html标记中，或者在控制器更新模型数据时更新html控件的数据。

解释控制器指令。

ng-controller指令告诉AngularJS该视图使用什么控制器。 AngularJS应用程序主要依靠控制器来控制应用程序中的数据流。控制器是包含属性/属性和函数的JavaScript对象。每个控制器接受$ scope作为参数，该参数指控制器要控制的应用程序/模块。

AngularJS如何与HTML集成？

AngularJS是一个基于javaScript的纯库，可以轻松地与HTML集成。

Step 1 - 在html页面中包含angularjs javascript libray

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

Step 2 - 指向AngularJS应用程序

接下来我们告诉HTML的哪一部分包含AngularJS应用程序。这是通过将ng-app属性添加到AngularJS应用程序的根HTML元素来完成的。您可以将其添加到html元素或body元素，如下所示:

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

解释ng-init指令。

ng-init指令初始化AngularJS应用程序数据。它用于将值放入要在应用程序中使用的变量。

解释重复指令。

ng-repeat指令为集合中的每个项重复html元素。

什么是AngularJS表达式？

表达式用于将应用程序数据绑定到html。表达式写在{{expression}}之类的双括号内。表达式的行为与ng-bind指令相同。 AngularJS应用程序表达式是纯JavaScript表达式，并输出使用它们的数据。

解释大写过滤器。

大写过滤器将文本转换为大写文本。

在下面的示例中，我们使用管道字符向表达式添加了大写过滤器。在这里，我们添加了大写过滤器，以所有大写字母打印学生姓名。

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

解释小写过滤器。

小写过滤器将文本转换为小写文本。

在下面的示例中，我们使用管道字符向表达式添加了小写过滤器。在这里，我们添加了小写过滤器，以全小写字母打印学生姓名。

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

解释货币过滤器。

货币过滤器以货币格式格式化文本。

在下面的示例中，我们使用管道符号将货币过滤器添加到表达式返回数字。在这里，我们添加了货币过滤器以使用货币格式打印费用。

Enter fees: <input type = "text" ng-model = "student.fees">
fees: {{student.fees | currency}}

解释过滤器过滤器。

filter filter用于根据提供的条件将数组过滤到其子集。

在下面的示例中，为了仅显示所需的主题，我们使用subjectName作为过滤器。

Enter subject: <input type = "text" ng-model = "subjectName">
Subject:
<ul>
   <li ng-repeat = "subject in student.subjects | filter: subjectName">
      {{ subject.name + ', marks:' + subject.marks }}
   </li>
</ul>

通过过滤器解释顺序。

orderby过滤器根据提供的标准对数组进行排序。

在下面的示例中，为了按标记对主题进行排序，我们使用了orderBy标记。

Subject:
<ul>
   <li ng-repeat = "subject in student.subjects | orderBy:'marks'">
      {{ subject.name + ', marks:' + subject.marks }}
   </li>
</ul>

解释禁用指令。

ng-disabled指令禁用给定的控件。

在下面的示例中，我们将ng-disabled属性添加到HTML按钮并将其传递给模型。然后我们将模型附加到一个复选框，可以看到变化。

<input type = "checkbox" ng-model = "enableDisableButton">Disable Button
<button ng-disabled = "enableDisableButton">Click Me!</button>

解释show show。

ng-show指令显示给定的控件。

在下面的示例中，我们将ng-show属性添加到HTML按钮并将其传递给模型。然后我们将模型附加到一个复选框，可以看到变化。

<input type = "checkbox" ng-model = "showHide1">Show Button
<button ng-show = "showHide1">Click Me!</button>

解释隐藏指令。

ng-hide指令隐藏给定的控件。

在下面的示例中，我们将ng-hide属性添加到HTML按钮并将其传递给模型。然后我们将模型附加到一个复选框，可以看到变化。

<input type = "checkbox" ng-model = "showHide2">Hide Button
<button ng-hide = "showHide2">Click Me!</button>

解释点击指令。

ng-click指令表示AngularJS单击事件。

在下面的示例中，我们将ng-click属性添加到HTML按钮并添加了表达式以更新模型。然后我们可以看到变化。

<p>Total click: {{ clickCounter }}</p></td>
<button ng-click = "clickCounter = clickCounter + 1">Click Me!</button>

升

angular.module的工作原理如何？

angular.module用于创建AngularJS模块及其依赖模块。请考虑以下示例:

var mainApp = angular.module("mainApp", []);

这里我们使用angular.module函数声明了一个应用程序mainApp模块。我们已经传递了一个空数组。此数组通常包含先前声明的依赖模块。

如何在AngularJS中验证数据？

AngularJS丰富了表单填写和验证。我们可以使用$ dirty和$ invalid标志以无缝方式进行验证。将novalidate与表单声明一起使用可禁用任何特定于浏览器的验证。

以下可用于跟踪错误。

$dirty - 说明价值已经改变。
$invalid - 表示输入的值无效。
$error - 说明确切的错误。

解释包含指令。

使用AngularJS，我们可以使用ng-include指令在HTML页面中嵌入HTML页面。

<div ng-app = "" ng-controller = "studentController">
   <div ng-include = "'main.htm'"></div>
   <div ng-include = "'subjects.htm'"></div>
</div>

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

AngularJS提供$ https:control作为服务来进行ajax调用以从服务器读取数据。服务器进行数据库调用以获取所需的记录。 AngularJS需要JSON格式的数据。数据准备好后，可以使用$ https:以下列方式从服务器获取数据:

function studentController($scope,$https:) {
   var url = "data.txt";
   $https:.get(url).success( function(response) {
      $scope.students = response; 
   });
}

在AngularJS中使用$ routeProvider有什么用？

$ routeProvider是设置url配置的关键服务，用相应的html页面或ng-template映射它们，并附加一个控制器。

什么是$ rootScope？

Scope是一个特殊的JavaScript对象，它扮演着将控制器与视图连接的角色。范围包含模型数据。在控制器中，模型数据通过$ scope对象访问。 $ rootScope是所有范围变量的父级。

AngularJS中的范围层次结构是什么？

范围是特定于控制器的。如果我们定义嵌套控制器，那么子控制器将继承其父控制器的范围。

<script>
      var mainApp = angular.module("mainApp", []);
      mainApp.controller("shapeController", function($scope) {
         $scope.message = "In shape controller";
         $scope.type = "Shape";
      });
      mainApp.controller("circleController", function($scope) {
         $scope.message = "In circle controller";   
      });
</script>

以下是上述例子中要考虑的重点。

我们在shapeController中为模型设置了值。
我们在子控制器circleController中覆盖了消息。当在控制器circleController的模块内使用“message”时，将使用被覆盖的消息。

什么是服务？

服务是JavaScript函数，仅负责执行特定任务。每个服务都负责一个特定的任务，例如，$ https:用于进行ajax调用以获取服务器数据。 $ route用于定义路由信息等。内置服务始终以$符号为前缀。

什么是服务方式？

使用服务方法，我们定义一个服务，然后为它分配方法。我们还为它注入了一项已经可用的服务。

mainApp.service('CalcService', function(MathService) {
   this.square = function(a) { 
      return MathService.multiply(a,a); 
	}
});

什么是工厂方法？

使用工厂方法，我们首先定义工厂，然后为其分配方法。

var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {     
   var factory = {};  
   factory.multiply = function(a, b) {
      return a * b 
   }
   return factory;
});

服务和工厂方法有什么区别？

factory方法用于定义工厂，以后可以在需要时用于创建服务，而service方法用于创建服务，其目的是执行某些已定义的任务。

哪些组件可以作为AngularJS中的依赖项注入？

AngularJS提供了一种最高的依赖注入机制。它提供了以下核心组件，这些组件可以作为依赖项互相注入。

value
factory
service
provider
constant

什么是提供者？

AngularJS内部使用provider来在配置阶段（AngularJS引导自身的阶段）创建服务，工厂等。下面提到的脚本可用于创建我们之前创建的MathService。 Provider是一个特殊的工厂方法，带有get（）方法，用于返回值/ service/factory。

//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service using provider which defines a method square to return square of a number.
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
});

什么是常数？

考虑到在配置阶段不能使用值传递的事实，常量用于在配置阶段传递值。

mainApp.constant("configParam", "constant value");

AngularJS是否可扩展？

是! 在AngularJS中，我们可以创建自定义指令来扩展AngularJS现有的功能。

AngularJS中使用自定义指令来扩展HTML的功能。自定义指令使用“指令”功能定义。自定义指令只是替换了激活它的元素。引导期间的AngularJS应用程序找到匹配的元素并使用其自定义指令的compile（）方法执行一次活动，然后根据指令的范围使用自定义指令的link（）方法处理该元素。

我们可以在哪些类型的组件上创建自定义指令？

AngularJS支持为以下类型的元素创建自定义指令。

Element directives - 当遇到匹配元素时，指令激活。
Attribute - 遇到匹配属性时激活指令。
CSS - 指令在遇到匹配的CSS样式时激活。
Comment - 当遇到匹配的注释时，指令激活。

什么是国际化？

国际化是一种在网站上显示特定于语言环境的信息的方法。例如，在美国和法国的丹麦语中显示英语网站的内容。

如何在AngularJS中实现国际化？

AngularJS支持三种类型的过滤器货币，日期和数字的内置国际化。我们只需要根据国家的地区包含相应的js。默认情况下，它处理浏览器的区域设置。例如，要使用丹麦语语言环境，请使用以下脚本

<script src = "https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js"></script>

接下来是什么？ (What is Next ?)

此外，您可以查看您对该主题所做的过去作业，并确保您能够自信地说出这些作业。如果你更新鲜，那么面试官不会指望你会回答非常复杂的问题，而是你必须使你的基本概念非常强大。