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)参照角度描述MVC。

AngularJS基于MVC框架，其中MVC代表Model-View-Controller 。 MVC执行以下操作：

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

例如，可以将$ scope定义为模型，而用角度控制器编写的函数会修改$ 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：

• Eclipse它是最流行的IDE之一。它支持AngularJS插件。
• Visual Studio这是Microsoft的IDE，它提供了一个平台，可以轻松，即时地开发Web应用程序。
• WebStorm它是用于现代JavaScript开发的功能最强大的IDE之一。它提供了一种使用角度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元素。自定义属性使用脊柱大小写，而相应的指令遵循camelCase。如果我们不使用此指令，而是尝试处理其他指令，则会产生错误。
• ng-init ng-init指令可用于初始化AngularJS应用程序的数据变量的内联语句。因此，可以在可以声明它们的指定块中使用这些语句。指令ng-init类似于ng-app指令的本地成员，它可以是单个值或一组值。它直接支持JSON数据。
• ng-model ng-model指令将HTML元素的值(例如输入，选择，文本区域)绑定到应用程序数据。它通过模型值提供双向绑定行为。有时，它也用于数据绑定。
• ng-bind ng-bind指令用于将模型/变量的值绑定到AngularJS应用程序的HTML控件。它也可以与HTML标记属性(例如

  ，等)一起使用，但不支持双向绑定。我们只能检查模型值的输出。

• ng-repeat ng-repeat指令用于重复HTML语句。它与特定集合项(如数组)上C＃，Java或PHP中的每个循环的工作原理相同。

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

Enter your Name: 
Hello !
List of Countries with locale:


               {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}    

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

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

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()方法。应用程序的所有依赖关系通常仅在模块中定义。使用角度对象的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表达式之间的主要区别如下：

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

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

The name is {{ firstName | uppercase }}

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

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

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

Type first name:
Type last name: 
Name in Upper Case: {{student.fullName() | uppercase}}

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

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

Type first name:
Type last name: 
Name in Upper Case: {{student.fullName() | lowercase}}

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

21)举例说明自定义过滤器。

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

下面给出的示例可用于通过使用过滤器来计算字符串中元素的数量：

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

根据上面的示例，如果字符串为“ 21，34，45 ”，则在应用filter之后的输出将为3 。

22)解释AngularJS中的Currency过滤器。我们如何使用它?

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

{{ currency_expression | currency : symbol : fractionSize}}

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

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

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

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

下面显示了AngularJS中依赖项注入的简单情况：

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

在这里，声明了一个控制器及其依赖项。

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

• 值
• 厂
• 服务
• 提供者
• 不变

24)通过AngularJS中的数据验证您了解什么?

AngularJS丰富了表单填充和验证。 AngularJS提供客户端表单验证。它检查表单和输入字段(输入，文本区域，选择)的状态，并通知用户当前状态。它还保留有关是否已触摸或修改输入字段的信息。

以下指令可用于跟踪错误：

• $ dirty指出值已更改。
• $ invalid它指出输入的值无效。
• $ error指出确切的错误。

此外，我们可以在表单声明中使用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中查找索引的主要目的是什么，如果没有找到值，返回什么?

查找索引用于返回元素的位置。如果找不到请求的元素，则返回值(-1)。

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

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

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

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

$scope.name='';

仅当我们使用PHP在PHP文件中的