AngularJS面试题

亲爱的读者们，这些AngularJS面试题是专门为了让您熟悉在AngularJS面试中可能遇到的问题类型而设计的。根据我的经验，优秀的考官很少会在面试前计划好要问哪些具体问题，通常问题会从该主题的一些基本概念开始，然后根据进一步的讨论和您的回答继续下去。

什么是AngularJS？

AngularJS是一个用于构建大型且高性能Web应用程序的框架，同时保持其易于维护。以下是AngularJS框架的功能。

AngularJS是一个强大的基于JavaScript的开发框架，用于创建富互联网应用程序(RIA)。
AngularJS为开发人员提供了以简洁的MVC(模型-视图-控制器)方式编写客户端应用程序(使用JavaScript)的选项。
用AngularJS编写的应用程序是跨浏览器兼容的。AngularJS自动处理适合每个浏览器的JavaScript代码。
AngularJS是开源的、完全免费的，并被全球数千名开发人员使用。它是在Apache许可证版本2.0下授权的。

什么是AngularJS中的数据绑定？

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

什么是AngularJS中的作用域？

作用域是指向模型的对象。它们充当控制器和视图之间的粘合剂。

AngularJS中的控制器是什么？

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

AngularJS中的服务是什么？

AngularJS附带了一些内置服务。例如，$http服务用于进行XMLHttpRequests（Ajax调用）。服务是单例对象，在应用程序中只实例化一次。

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编写的应用程序是不安全的。必须进行服务器端身份验证和授权才能确保应用程序的安全。
不可降级 - 如果您的应用程序用户禁用了JavaScript，那么用户只会看到基本页面，而不会看到更多内容。

AngularJS的核心指令有哪些？

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

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

解释AngularJS的启动过程。

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

HTML文档加载到浏览器中，并由浏览器评估。AngularJS JavaScript文件加载；创建angular *全局*对象。接下来，执行注册控制器函数的JavaScript。
接下来，AngularJS扫描HTML以查找AngularJS应用程序和视图。找到视图后，它会将该视图连接到相应的控制器函数。
接下来，AngularJS执行控制器函数。然后，它使用控制器填充的模型数据呈现视图。页面准备就绪。

什么是MVC？

Model View Controller，简称MVC，是一种用于开发Web应用程序的软件设计模式。模型-视图-控制器模式由以下三个部分组成

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

解释ng-app指令。

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

解释ng-model指令。

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

解释ng-bind指令。

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

解释ng-controller指令。

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

AngularJS如何与HTML集成？

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

步骤1 - 在html页面中包含angularjs javascript库

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

步骤2 - 指向AngularJS应用程序

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

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

解释ng-init指令。

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

解释ng-repeat指令。

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}}

过滤器过滤器说明。

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

在下面的示例中，为了仅显示所需的科目，我们使用了 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 过滤器根据提供的条件对数组进行排序。

在下面的示例中，为了按分数对科目进行排序，我们使用了 orderBy marks。

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

ng-disabled 指令说明。

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

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

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

ng-show 指令说明。

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

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

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

ng-hide 指令说明。

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

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

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

ng-click 指令说明。

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

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

<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** - 指出确切的错误。

ng-include 指令说明。

使用 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 提供了 $http 服务，该服务可用于向服务器发出 ajax 调用以读取数据。服务器进行数据库调用以获取所需记录。AngularJS 需要 JSON 格式的数据。一旦数据准备就绪，$http 可用于以如下方式从服务器获取数据

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

$routeProvider 在 AngularJS 中有什么作用？

$routeProvider 是一个关键服务，它设置 url 的配置，将其映射到相应的 html 页面或 ng-template，并附加一个具有相同名称的控制器。

$rootScope 是什么？

作用域是一个特殊的 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 中覆盖了 message。当在 circleController 控制器模块中使用“message”时，将使用覆盖的 message。

什么是服务？

服务是 JavaScript 函数，仅负责执行特定任务。每个服务负责一项特定任务，例如，$http 用于进行 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;
});

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

工厂方法用于定义一个工厂，该工厂可以根据需要创建服务，而服务方法用于创建一个服务，其目的是执行某些已定义的任务。

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

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

值
工厂
服务
提供程序
常量

什么是提供程序？

提供程序由 AngularJS 在内部用于在配置阶段（AngularJS 自举自身的阶段）创建服务、工厂等。下面提到的脚本可用于创建我们之前创建的 MathService。提供程序是一种特殊的工厂方法，它具有一个 get() 方法，用于返回值/服务/工厂。

//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 的功能。自定义指令使用“directive”函数定义。自定义指令只是替换激活它的元素。AngularJS 应用程序在引导过程中查找匹配的元素，并使用其自定义指令的 compile() 方法执行一次性活动，然后根据指令的作用域使用自定义指令的 link() 方法处理元素。

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

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

**元素指令** - 当遇到匹配的元素时，指令被激活。
**属性** - 当遇到匹配的属性时，指令被激活。
**CSS** - 当遇到匹配的 css 样式时，指令被激活。
**注释** - 当遇到匹配的注释时，指令被激活。

什么是国际化？

国际化是在网站上显示特定于区域设置的信息的一种方式。例如，在美国以英语显示网站内容，在法国以丹麦语显示。

如何在 AngularJS 中实现国际化？

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

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

下一步是什么？

接下来，您可以回顾一下您过去完成的科目作业，并确保您能够自信地谈论它们。如果您是应届毕业生，面试官不会期望您回答非常复杂的问题，而是您必须使您的基础概念非常扎实。

其次，如果您无法回答几个问题，这实际上并不重要，重要的是，无论您回答了什么，都必须充满自信地回答。所以在面试中要有信心。我们在 tutorialspoint 祝您面试顺利，并祝您未来的事业一切顺利。干杯 :-)

angularjs_questions_answers.htm

打印页面