最新AngularJS面试题和答案汇总 _AngularJS

文章图片
下面列出了最常见的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的新手, 那么处理复杂的实体(例如Quite分层, 分层和范围)将不容易。对于许多程序员来说, 调试范围是一项艰巨的任务。

4)参照Angular描述MVC。
AngularJS基于MVC框架, 其中MVC代表模型-视图-控制器。 MVC执行以下操作：

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

例如, 可以将$ scope定义为模型, 而用Angular控制器编写的函数将修改$ scope, HTML将显示scope变量的值。
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)当前使用哪些IDE进行AngularJS的开发？
IDE一词代表集成开发环境。下面给出了一些用于AngularJS开发的IDE：

日食
它是最受欢迎的IDE之一。它支持AngularJS插件。
视觉工作室
它是Microsoft提供的一个IDE, 它提供了一个平台, 可以轻松, 即时地开发Web应用程序。
网络风暴
它是现代JavaScript开发中功能最强大的IDE之一。它提供了一种使用AngularCLI添加依赖项的简便方法。
阿普塔纳
它是Eclipse的定制版本。它是免费使用。
崇高文字
它是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指令是Angular应用程序中最重要的指令。它用于为AngularJS HTML编译器定位Angular应用程序的开始。它标记了Angular打算作为应用程序根元素的HTML元素。自定义属性使用脊柱大小写, 而相应的指令遵循camelCase。如果我们不使用此指令, 而是尝试处理其他指令, 则会产生错误。
热
ng-init指令对于初始化AngularJS应用程序的数据变量的内联语句很有用。因此, 这些语句可以在我们可以声明它们的指定块中使用。指令ng-init类似于ng-app指令的本地成员, 它可以是单个值或一组值。它直接支持JSON数据。
造型
ng-model指令将HTML元素(例如输入, 选择, 文本区域)的值绑定到应用程序数据。它通过模型值提供双向绑定行为。有时, 它也用于数据绑定。
捆绑
ng-bind指令用于将模型/变量的值绑定到AngularJS应用程序的HTML控件。它也可以与HTML标记属性一起使用, 例如：< p /> , < span /> 等, 但它不支持双向绑定。我们只能检查模型值的输出。
重复
ng-repeat指令用于重复HTML语句。它与特定集合项(如数组)上C＃, Java或PHP中的每个循环的工作原理相同。

让我们看一个简单的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超时功能的引用。
$ 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()方法创建一个模块。例如：

var app = angular.module('myApp', []);

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 Expressions
JavaScript表达式支持条件语句, 循环和异常。
JavaScript表达式不支持过滤器。
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, Lowcase, Number, Orderby和Largecase。
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中的Currency过滤器。我们如何使用它？
货币过滤器默认包含” $” 美元符号。我们可以将以下代码用作” 货币过滤器” 的html模板格式。

{{ currency_expression | currency : symbol : fractionSize}}

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

default
如果我们不提供任何货币符号, 则默认情况下将使用美元符号, 如下所示：
< ！-默认–
默认货币{{金额|货币}}
用户自定义
要使用不同类型的货币符号, 我们必须通过应用该货币的十六进制十进制代码或Unicode来定义自己的符号。
例如, 要定义印度货币符号, 那么我们必须使用Unicode值或十六进制小数值。
印度货币{{金额|货币：” ＆＃8377″ }}

23)你对AngularJS中的依赖注入有什么了解？
依赖注入(也称为DI)是AngularJS的最佳功能之一。这是一种软件设计模式, 其中对象作为依赖项传递, 而不是在组件中对其进行硬编码。这对于删除硬编码的依赖项并使依赖项可配置非常有用。为了检索模块加载时需要配置的应用程序的必需元素, ” config” 操作使用了依赖注入。它允许分离应用程序中不同组件的关注, 并提供一种将依赖组件注入客户端组件的方法。通过使用依赖注入, 我们可以使组件可维护, 可重用和可测试。
AngularJS中的依赖注入的一个简单例子如下所示：

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

在此, 声明了一个控制器及其依赖项。
AngularJS提供了以下核心组件, 它们可以作为依赖项相互注入：

值
厂
服务
提供者
常量

24)通过AngularJS中的数据验证你了解什么？
AngularJS丰富了表单填充和验证。 AngularJS提供客户端表单验证。它检查表单和输入字段(输入, 文本区域, 选择)的状态, 并通知用户当前状态。它还保留有关是否已触摸或修改输入字段的信息。
以下指令可用于跟踪错误：

$脏
它指出该值已更改。
$无效
它指出输入的值无效。
$错误
它指出了确切的错误。

此外, 我们可以在表单声明中使用novalidate来禁用浏览器的本机表单验证。
25)通过链接功能你了解什么？解释其类型。
Link用于将指令与作用域组合并生成实时视图。链接功能用于注册DOM侦听器以及更新DOM。克隆模板后立即执行链接功能。
链接功能有两种：

预链接功能
在链接子元素之前执行预链接功能。这种方法不被认为是DOM转换的安全方法。
帖子链接功能
链接子元素后执行链接后功能。此方法是DOM转换的安全方法。

26)你对喷油器了解多少？
喷射器称为维修定位器。它用于接收提供者定义的对象实例, 调用方法, 实例化类型和加载模块。每个Angular应用程序都包含一个注入器, 该注入器可以帮助按实例名称查找实例。
27)AngularJS中的工厂方法是什么？
工厂方法用于创建指令。每当编译器首次与指令匹配时, 都会调用factory方法。工厂方法是使用$ injector.invoke调用的。
语法

module.factory('factoryName', function);

28)你将如何解释层次结构的概念？一个应用程序可以有几个作用域？
每个Angular应用程序都包含一个根范围, 但是可以有多个子范围。该应用程序可能具有多个作用域, 因为子控制器和某些指令会创建新的子作用域。形成或创建新范围时, 将其添加为父范围的子级。与DOM相似, 范围也创建了层次结构。
29)说明如何在AngularJS中维护日志？
可以使用$ log服务维护日志。 $ log服务的主要目的是帮助调试和故障排除。它是通过以下方法完成的。

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

$log.error('this will displayed as an error in console')

30)AngularJS中的find索引的主要目的是什么, 如果找不到值, 它会返回什么？
查找索引用于返回元素的位置。如果找不到请求的元素, 则返回值(-1)。

var index = $scope.items.findIndex(record => record.date =='2018-12-12');

在给定的代码中, 返回对象的索引, 其中item.date = 2018-12-12。
31)是否可以在不发送HTTP请求的情况下从PHP会话变量设置Angular变量？
是的, 我们可以通过在所需位置注入PHP来执行此操作。即

$scope.name='< ?= $session['name'] ?> ';

仅当我们使用PHP在PHP文件中的< script> 标记中呈现HTML和以上JavaScript时, 它才起作用。
32)通过严格的概念转义, 你了解什么？
AngularJS将所有值视为HTML或敏感URL绑定中的不可信/不安全。 AngularJS在绑定不受信任的值时会自动运行安全检查。如果不能保证结果的安全性, 它将引发错误。这种类型的行为取决于上下文：可以清除HTML, 但不能清除模板URL。
为了说明这一点, 请考虑以下指令

Ng-bind-html

它直接将其值呈现为HTML。当存在不可信的输入时, 如果可用的清理工具可用, AngularJS将尝试在渲染之前对其进行清理。我们将需要将其标记为可信任, 以绕过清理并提供输入。
33)有人如何使用AngularJS进行ajax调用？
AngularJS包含$ https：控件, 该控件用作服务以进行ajax调用以从服务器读取数据。服务器创建数据库调用以检索所需的记录。 AngularJS需要JSON格式的数据。数据准备就绪后, 可以使用$ https：通过以下方式从服务器检索数据。

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

34)你对国际化了解多少？你将如何在AngularJS中实现国际化？
国际化是用于在网站上显示特定于区域的信息的方法。考虑一个在美国以法语显示丹麦语内容的网站。
AngularJS对三种类型的过滤器内置了国际化支持：

货币
日期
号码

我们需要根据国家/地区的地理位置合并相应的JS。默认情况下, 它被配置为处理浏览器的语言环境。
35)你将如何解释AngularJS中的深层链接？
深度链接是一种方法, 它允许我们以可以将其添加为书签的方式在URL中编码应用程序的状态。然后, 可以将应用程序从URL进一步还原到相同状态。
36)描述AngularJS启动过程。
将页面加载到浏览器中时, 会发生几件事：

HTML文档文件被加载, 并由浏览器评估。 AngularJS JavaScript文件被加载, 并创建了Angular全局对象。接下来, 执行负责注册控制器功能的JavaScript文件。
AngularJS通过HTML进行扫描以查找AngularJS应用和视图。找到该视图后, 它将将该特定视图连接到相应的控制器功能。
AngularJS执行控制器功能。它还使用控制器填充的模型中的数据呈现视图, 页面准备就绪。

37)一个Angular应用程序可能有两个ng-app指令吗？
不, 单个AngularJS应用程序不能有多个ng-app指令。
【最新AngularJS面试题和答案汇总】ng-app指令可帮助AngularJS应用程序确保它是根元素。在我们的HTML文档中, 我们只能有一个ng-app指令。如果有多个ng-app指令, 则将使用最先出现的那个。
38)创建新日期对象的语法是什么？
创建新日期对象的语法如下：

$scope.newDate=new Date();

39)你是否认为父控制器可以访问子控制器的方法, 反之亦然？
否, 父控制器无法访问子控制器的方法, 但是子控制器可以访问父控制器的方法。
40)在AngularJS中解释$ rootScope。
每个AngularJS应用程序都包含一个$ rootScope, 这是在DOM元素上创建的最高级范围。一个应用程序只能包含一个$ rootScope, 它将在所有组件之间共享。其他所有范围都被视为其子范围。它可以监视表达式并传播事件。通过使用根作用域, 一个人可以在一个控制器中设置该值, 并从另一个控制器中读取它。
41)$ routeProvider在AngularJS中的主要目的是什么？
$ routeProvider是设置URL配置的重要服务之一。它还将它们与相应的HTML页面或ng-templates映射, 并为其附加控制器。
42)你将如何解释AngularJS中的自动引导过程？
AngularJS在” DOMContentLoaded” 事件自动初始化。当浏览器下载Angular.js脚本并将document.readyState同时设置为” complete” 时, 它也会初始化。 AngularJS寻找ng-app指令, 它是Angular应用程序编译过程的根。
如果找到指令” ng-app” , 则AngularJS将执行以下步骤：

它将加载与指令关联的模块。
它将创建应用程序注入器。
它将从ng-app根元素开始编译DOM。

此过程称为自动引导。
43)你将如何解释AngularJS中的手动引导过程？
有时, 我们可能需要手动初始化Angular应用程序, 以更好地控制初始化过程。我们可以使用angular.element(document).ready()函数中的angular.bootstrap()函数执行此类任务。当DOM准备好进行操作时, AngularJS使用此函数。
angular.bootstrap()函数使用两个参数, 即文档和模块名称注入器。
44)你通过$ watch了解什么？
在angularJS中, $ watch()函数用于监视$ scope对象中变量的变化。通常, $ watch()函数是在内部创建的, 用于处理应用程序中的变量更改。
如果需要为某些特定操作创建自定义监视, 则最好使用$ scope.watch函数。 $ scope.watch()函数用于创建某些变量的监视。注册手表时, 我们将两个函数作为参数传递给$ watch()函数：

值函数
监听器功能

下面是一个示例：

$scope.$watch(function() {}, function() {} );

在此, 第一个功能是值功能, 第二个功能是侦听器功能。
45)AngularJS提供哪些不同类型的指令？
AngularJS支持为以下类型的元素创建自定义指令：

元素指令
遇到匹配的元素时, 将激活元素指令。
属性
遇到匹配的属性时, 将激活属性指令。
的CSS
遇到匹配的CSS样式时, 将激活CSS指令。
注释
遇到匹配的注释时, 将激活注释指令。

46)解释AngularJS的编译过程吗？
Angular的HTML编译器使我们可以向浏览器教授新的HTML语法。它还允许开发人员将新的行为或属性附加到任何称为指令的HTML元素。 AngularJS编译过程自动在Web浏览器中进行。它不包含任何服务器端或预编译过程。
AngularJS使用< $ compiler> 服务进行Angular HTML页面的编译过程。 HTML页面(静态DOM)完全加载后, 其编译过程开始。
它分为两个阶段：

编译
它检查整个DOM并收集所有指令。
链接
它将指令与作用域连接起来并产生实时视图。

编译和链接的概念已从C语言中添加。该代码被编译, 然后链接。
47)AngularJS中的Global API是什么？
全局API是全局JavaScript函数的组合, 用于执行比较对象, 迭代对象以及转换数据等任务。
有一些常见的API函数, 例如：

角小写
用于将字符串转换为小写字符串。
角大写
用于将字符串转换为大写字符串。
angular.IsString
如果当前引用为字符串, 则返回true。
angular.IsNumber
如果当前引用是数字, 则返回true。

48)AngularJS是否适合所有浏览器？
是的, 所有浏览器(例如Safari, Chrome, Mozilla, Opera和Internet Explorer等)都支持AngularJS。它也可与移动浏览器一起使用。
49)” AngularJS前缀$和$$如何使用？
AngularJS中的$$前缀用作私有变量, 因为它负责防止意外代码与用户代码冲突。
而$前缀用于定义角核功能, 例如变量, 参数, 属性或方法等。
50)有人如何在AngularJS中设置, 获取和清除cookie？
AngularJS有一个称为ngCookies的模块。在注入ngCookies之前, 应将angular-cookies.js包含到应用程序中。