目录
  1. WIKI教程
  2. 学习AngularJS
  3. AngularJS面试问题(AngularJS Interview Questions)

AngularJS面试问题(AngularJS Interview Questions)

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

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

  • AngularJS是一个功能强大的基于JavaScript的开发框架，用于创建RICH Internet Application（RIA）。

  • AngularJS为开发人员提供了以干净的MVC（模型视图控制器）方式编写客户端应用程序（使用JavaScript）的选项。

  • 用AngularJS编写的应用程序是跨浏览器兼容的。 AngularJS自动处理适合每个浏览器的JavaScript代码。

  • AngularJS是开源的，完全免费，并被全球数千名开发人员使用。 它是根据Apache许可证2.0版许可的。

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

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

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

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

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

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

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

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

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

以下是AngularJS的优点。

  • AngularJS提供了以非常干净和可维护的方式创建单页应用程序的功能。

  • AngularJS为HTML提供数据绑定功能，从而为用户提供丰富的响应体验。

  • AngularJS代码是可单元测试的。

  • AngularJS使用依赖注入并利用关注点分离。

  • AngularJS提供可重用的组件。

  • 使用AngularJS，开发人员可以编写更少的代码并获得更多功能。

  • 在AngularJS中，视图是纯html页面，用JavaScript编写的控制器进行业务处理。

  • AngularJS应用程序可以在所有主流浏览器和智能手机上运行，​​包括基于Android和iOS的手机/平板电脑。

以下是AngularJS的缺点。

  • 不安全 - 仅限JavaScript框架，用AngularJS编写的应用程序并不安全。 服务器端身份验证和授权必须保证应用程序的安全。

  • Not degradable - 如果您的应用程序用户禁用JavaScript，那么用户只会看到基本页面而已。

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

  • ng-app - 该指令定义AngularJS应用程序并将其链接到HTML。

  • ng-model - 该指令将AngularJS应用程序数据的值绑定到HTML输入控件。

  • ng-bind - 该指令将AngularJS Application数据绑定到HTML标记。

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

  • HTML文档被加载到浏览器中，并由浏览器进行评估。 加载了AngularJS JavaScript文件; 角度global对象已创建。 接下来，执行注册控制器功能的JavaScript。

  • 接下来，AngularJS扫描HTML以查找AngularJS应用程序和视图。 找到视图后，它会将该视图连接到相应的控制器功能。

  • 接下来，AngularJS执行控制器功能。 然后，它使用控制器填充的模型中的数据呈现视图。 页面准备好了。

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

  • Model - 它是负责维护数据的模式的最低级别。

  • View - 它负责向用户显示全部或部分数据。

  • Controller - 它是一个控制模型和视图之间交互的软件代码。

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是一个基于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指令初始化AngularJS应用程序数据。 它用于将值放入要在应用程序中使用的变量。

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

表达式用于将应用程序数据绑定到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>

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用于创建AngularJS模块及其依赖模块。 请考虑以下示例: 

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

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

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>

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

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

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

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

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

<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提供了一种最高的依赖注入机制。 它提供了以下核心组件，这些组件可以作为依赖项互相注入。

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

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

  • Element directives - 当遇到匹配元素时，指令激活。

  • Attribute - 遇到匹配属性时激活指令。

  • CSS - 指令在遇到匹配的CSS样式时激活。

  • Comment - 当遇到匹配的注释时，指令激活。

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

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

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

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

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

↑回到顶部↑
WIKI教程 @2018