AngularJS面试题及答案 - [ Web技术面试题及答案 ]

AngularJS面试题及答案

AngularJS是一个开源模型视图控制器MVC JavaScript框架,用于创建丰富,可扩展的Web应用程序。 它运行在纯JavaScript和HTML上,因此不需要任何其他依赖项来工作。通过阅读下面AngularJS面试题和答案,有助于让您在面试过程中应付自如,也可作为测评或复习巩固AngularJS知识。

1. 设置Angular JS应用程序的基本步骤是什么?

设置Angular JS应用程序的基本步骤如下: 创建一个angular.module将控制器分配给模块使用ng-app将模块链接到HTML使用ng-controller指令将控制器链接到HTML详细答案>>

2. AngularJS是什么?

模板是AngularJS应用程序的HTML部分。 它与静态HTML页面完全相同,只是模板包含允许将数据注入其中的附加语法,以便提供定制的用户体验。

详细答案>>

3. AngularJS的范围是什么?

范围是表示应用程序“模型”的对象。 它包含存储通过模板呈现给用户的数据的字段,以及当用户执行某些操作(例如单击按钮)时可以调用的功能。

详细答案>>

4. AngularJS中的控制器是什么?

控制器是一个函数,它通常将空范围对象作为参数,并向其添加稍后将通过视图向用户公开的字段和函数。

详细答案>>

5. AngularJs中的指令主要有哪几个?

AngularJS指令是扩展的HTML属性,前缀为ng-AngularJS的3个主要指令是: ng-app: - 指令用于标记Angular应该认为是我们应用程序的根元素的HTML元素。 Angular使用脊椎案例作为其自定义属性,使用camelCase作为实现它们的相应指令。ng-model: - 指令允许我们将HTML控件(input,select,textarea)的值绑定到应用程序数据。 使用ngModel时,不仅要更改视图中反映的范围,还要将视图中的更改反射回范围。ng-bind: - 指令...详细答案>>

6. 如何在AngularJs中的控制器之间共享数据?

可以通过创建服务(Services)来共享数据,服务是在AngularJs中控制器之间共享数据的最简单,最快速和更简洁的方式。还有其他方法可以在控制器之间共享数据: 使用事件$parent,nextSibling,controllerAs使用$rootScope详细答案>>

7. AngularJS摘要周期是什么?

AngularJS摘要周期是Angular JS数据绑定背后的过程。在每个摘要周期中,Angular会比较范围模型值的旧版本和新版本。 摘要周期自动触发。 如果我们想手动触发摘要周期,也可以使用$apply()函数。详细答案>>

8. Angularjs的国际化是什么?

国际化是一种在网站上显示特定于语言环境的信息的方式。它用于创建多语言语言网站。

详细答案>>

9. AngularJS和JavaScript表达式有什么区别?

以下是AngularJS和JavaScript表达式之间的一些主要区别: 两者都可以包含文字,运算符和变量。AngularJS表达式可以用HTML编写,但JavaScript表达式不能。AngularJS表达式不支持条件,循环和异常,而JavaScript表达式则支持条件,循环和异常。AngularJS表达式支持过滤器,而JavaScript表达式则不支持。详细答案>>

10. AngularJS中模块(Modules)是什么?

Angular Modules是编写Angular应用程序代码的地方。编写Modules使代码更易于维护,可测试和可读。应用程序的所有依赖项都在模块中定义。

详细答案>>

11. Angular中有哪几种类型的指令范围?

Angular中有三种类型的指令范围。 父范围:是默认范围子范围:如果您在范围上设置的属性和函数与其他指令和父级指令无关,则应该创建一个新的子范围。隔离范围:如果要构建的指令是自包含且可重用的,则使用隔离范围。 不从父作用域继承,用于私有/内部使用。详细答案>>

12. AngularJS中的单向绑定和双向绑定有什么区别?

在单向数据绑定中,当数据模型更改时,视图(UI部分)不会自动更新。 我们需要编写自定义代码以使其每次都更新。ng-bind具有单向数据绑定。 虽然双向绑定范围变量将在每次更改数据模型时将其值更改为不同的值。详细答案>>

13. 如何让AngularJS服务返回promise? 请编写代码示例。

要向服务添加promise功能,在服务中注入$q依赖项,然后像这样使用它: angular.factory('testService', function($q){ return { getName: function(){ var deferred = $q.defer(); //API call here that returns data testAPI.getName().then(function(nam...详细答案>>

14. $routeProvider在AngularJS中有什么作用?

$routeProvider用于在AngularJS应用程序中配置根。 它可用于链接URL与相应的HTML页面或模板以及控制器(如果适用)。

详细答案>>

15. AngularJS如何实现双向绑定?

Angular应用程序中的数据绑定是模型和视图组件之间数据的自动同步。 Angular实现数据绑定的方式用于将模型视为应用程序中的单一事实源。 视图始终是模型的投影。 当模型改变时,视图反映了变化,反之亦然。详细答案>>

16. AngularJS $rootscope$scope有什么区别?

在AngularJS $rootscope和$scope中,两者都是一个对象,用于从控制器共享数据以进行查看。$rootscope和$scope之间的主要区别在于$rootscope在全局范围内可用于所有控制器,而$scope仅在与其子控制器一起创建它的控制器中可用。详细答案>>

17. AngularJS中$scopescope的区别是什么?

在Angular中,依赖注入(D.I)时必须使用$scope,而scope用于指令链接。

详细答案>>

18. Angularjs表达式是什么?

Angularjs表达式(Expression)是用于在视图或HTML中绑定表达式数据的JavaScript相似的代码片段。 Angular表达式写在两个花括号内。例如:

{{a+b}}
详细答案>>

19. Angularjs支持的浏览器有哪些?

以下是Angularjs支持的一些主流浏览器: 火狐浏览器(Firefox)谷歌浏览器(Chrome)Microsoft EdgeIE 10,11IE Mobile,Safari,iOSAndroid:Nougat(7.0)Marshmallow(6.0)详细答案>>

20. 如何在Angular 1.x中启用HTML5模式?

$locationProvider模块的html5Mode方法用于在Angular 1.x中启用HTML5模式。 要创建漂亮的URL并从URL中删除#,html5Mode需要为true。 在Angular 1.x中启用html5Mode为true。如下示例代码: angular.module('myApp', []) .config(function($routeProvider, $locationProvider) { $routeProvider ...详细答案>>

21. 什么是指令?如何在AngularJS中创建和使用自定义指令。

在angularJs指令中用于扩展Html元素的属性。在Angularjs中创建自定义指令。Angularjs指令仅限于元素和属性,并使用指令函数创建。下面是在Angularjs中创建指令的示例代码。 var app = angular.module("myApp", []); app.controller('AppController', function($scope) { var users=[]; var user1={}; user1...详细答案>>

22. 如何从AngularJS中的子控制器访问父作用域?

在angular中有一个名为$parent的范围变量(即$scope.$parent)。$parent用于从Angular JS中的子控制器访问父作用域。示例: <div ng-controller="ParentCtrl"> <h1>{{ name }}</h1> <p>{{ address }}</p> <div ng-controller="ChildCtrl">...详细答案>>

23. 如何使用AngularJS验证电子邮件和电话号码?

Angular表单验证和ng-pattern指令可用于验证AngularJS中的电子邮件和电话号码。 示例代码: <form name="signUpForm" novalidate> <div class="form-group"> <div class="row clearfix"> <label for="tel1" class="col...详细答案>>

24. AngularJS中的链接和编译有什么区别?

AngularJS中的链接和编译有以下区别:

  • 编译功能:为了模板DOM操作并收集所有指令,使用编译功能。
  • 链接功能:要注册DOM侦听器以及实例DOM操作,使用链接功能。
详细答案>>

25. 如何从AngularJS控制器获取URL参数?

RouteProviderRouteParams可用于获取控制器中的URL参数。
当路由将URL连接到控制器时,RouteParams可以传递给控制器以获取URL参数。

详细答案>>

26. 如何在Angular 1.x中启用缓存?

可以通过将config.cache值或默认缓存值设置为TRUE,或使用$cacheFactory创建的缓存对象来启用缓存。如果要缓存所有响应,则可以将默认缓存值设置为TRUE。并且,如果要缓存特定响应,则可以将config.cache值设置为TRUE。详细答案>>

27. 在AngularJS中如何使用ng-ifng-switchng-repeat指令?

ng-if - 该指令删除DOM树的一部分,该树基于表达式。如果将表达式分配给ng-if,则计算结果为false值,然后从DOM树中删除该元素,否则将元素的克隆重新插入DOM。ng-switch - 该指令基于范围表达式使用,以有条件地交换模板上的DOM结构。ng-switch default指令将保留在模板中的特定位置。ng-repeat - 该指令用于从集合中为每个项目实例化一次模板。实例化的每个模板都有自己的范围,其中给定的循环变量设置为当前的项集合。详细答案>>

28. 如何更改用于AngularJS表达式的开始和结束符号?

在配置中传递$interpolateprovider可以帮助我们更改AngularJS表达式中使用的开始和结束符号。

详细答案>>

29. 如何在AngularJS中验证URL?

将正则表达式直接添加到属性的ng模式可以用于验证AngularJS中的URL。

详细答案>>

30. AngularJS中$locale服务的用途是什么?

$locale服务提供AngularJS组件的本地化规则。

详细答案>>

31. AngularJS的转换是什么?

AngularJS中的转换允许将指令的原始子项移动到新模板内的特定位置。ng指令标记使用转置的非常接近的父指令的转换DOM的插入点。ng-transclude或ng-transclude-slot属性指令用于AngularJS中的转换。详细答案>>

32. AngularJs中的内置服务有哪些?

AngularJs中有30个内置服务。 以下是AngularJs中几乎最常用的服务 - $location$scope$http$timeout$interval$window详细答案>>

33. AngularJs的路由是什么?

路由是AngularJs Framework的核心功能之一,可用于构建具有多个视图的单页Web应用程序。 在Angular中,ngRoute模块用于实现路由。 ngView,$routeProvider,$route和$routeParams是ngRoute模块的不同组件,有助于配置Url并将其映射到视图。详细答案>>

34. AngularJS中的$emit$broadcast$on是什么?

$broadcast,$emit和$on是AngularJs中的服务。下面列出了它们在AngularJS中使用的原因。 $broadcast():Angular的$broadcast()服务用于将事件传播到他的所有子控制器,并且它是已注册的父$rootscope.scope监听器。 $rootScope.$broadcast('SummaryEvent', { priority: priority }); $on():AngularJS $on...详细答案>>

35. AngularJS前缀$$$是什么?

AngularJs使用这些前缀来防止意外的代码与用户代码冲突。$prefix用于公共对象,而$$prefix用于私有对象。

详细答案>>

36. 在AngularJs中DDO是什么?

DDO代表指令定义对象。 在AngularJs中创建自定义指令时使用DDO。

详细答案>>

37. Angular中的拦截器是什么? 为什么用它?

拦截器是AngularJs中的中间件代码,其中所有$http请求都通过。 它附带了$httpProvider服务,能够拦截请求和响应对象。 拦截器中间件对于希望在请求和响应时应用的错误处理,身份验证和其他过滤器非常有用。详细答案>>

38. AngularJS中的区域设置ID是什么?

区域设置是特定的地理区域。常用的区域设置ID包括两部分,语言代码和国家/地区代码。

详细答案>>

39. AngularJs中有状态和无状态组件有什么区别?

有状态组件是组件的详细实现,可以随时间变化,有状态组件可以在其中包含无状态组件,而无状态组件是纯JavaScript函数。

详细答案>>

40. AngularJS $http服务支持的方法有哪些?

$http服务支持的一些方法是:

  • GET
  • HEAD
  • POST
  • PUT
  • DELETE
  • CONNECT
  • OPTIONS
  • TRACE
详细答案>>

41. AngularJS中”track by”是什么?它是如何工作的?

track byng-repeat一起使用,并向AngularJS描述它如何跟踪DOM和模型之间的关联。 它提高了渲染性能。

详细答案>>

42. AngularJs中$templateCache是什么?

$templateCache$cache工厂创建的Cache对象。 第一次使用模板时,它会加载到$templateCache中,以便于快速检索。

详细答案>>

43. AngularJS中的单元和端到端(e2e)测试有什么区别?

AngularJS为单元和端到端测试提供全面支持。单元测试是一种帮助开发人员验证隔离代码片段的方法,当想要确定集成在一起的组件集合按预期工作时,需要进行端到端测试。

详细答案>>

44. AngularJS中的.config().run()方法是什么?

  • .config() - .config()函数用于在模块上添加配置块。
  • .run() - .run()函数用于在模块上添加运行块。
详细答案>>

45. AngualrJS中有哪些过滤器?请列出并说明它们的功能。

Angularjs过滤器可以有效地修改数据。在管道(|)字符的帮助下,它们被赋予指令或表达。 过滤器 功能 Uppercase 它用于将文本转换为大写文本。 Lowercase 它用于将文本转换为小写文本。 Currency 用于将数字格式化为货币格式。 Order by 用于根据给定的标准对数组进行排序。 Filter 它用于根据给定的标准将数组排序为其子集。 详细答案>>

46. AngularJs中的Mocked服务是什么? 如何使用它?

它是AngularJS应用程序最常见的依赖类型。 可以通过两种方式模拟服务,方法是使用注入块获取实际服务的实例,或者使用$provide实现模拟服务。

详细答案>>

47. 如何在Angular 1.x中实现缓存?

缓存是通过使用存储和检索数据的缓存对象实现的,主要由$templaterequestscript指令用于缓存模板。

详细答案>>

48. AngularJS中的编译,前置和后置链接是什么?

编译 - 它将HTML DOM编译为模板,并生成用于将范围和模板链接在一起的模板函数。 它只执行一次。前置链接 - 在子元素链接之前执行。后置链接 - 在子元素链接后执行。详细答案>>

49. AngularJS的劣势/缺点有哪些?

以下是AngularJS的劣势/缺点: JavaScript支持强制 - 想象一下,当访问您的服务器的设备被禁用JavaScript时,那么用户无法正常网络应用或网站。 对于大量用户而言,基于AngularJS的Web效率不高。 尽管如此,它仍然适用于基于HTML的纯网络。 模型视图控制器(MVC) - 如果您是一名开发人员,并希望只使用Zilch MVC知识做一些传统功能,那么建议不要使用Angular.JS,因为这对您来说非常耗时。 如果没有及时提交项目,应聘请具备MVC知识的开发人员。 困境范围...详细答案>>

50. 在AngularJS中如何使用$scope.$watch$scope.$apply

在AngularJS $scope中。$watch该函数用于创建一些变量和监听。$scope.$apply函数用于执行一些代码并调用$digest函数。

详细答案>>

51. angular.copy()方法实现的功能是什么?

它用于将对象的值分配到另一个对象中,但不得更改对象值。
如果要添加任何新属性或更改属性的任何值,则同一对象的对象将通过应用angular.copy()方法进行更新。

详细答案>>

52. 如何在AngularJS的页面中使用多个ng-app?

在AngularJS中,有两种方法可以在单个页面中使用多个ng-app。 一个是bootstrap方法,另一个是ngModules指令。

详细答案>>

53. 如何在Angular 1.x的输入字段上设置焦点?

定义一个指令,在所针对的元素上使用该指令,让$watch触发/属性以知道何时焦点元素。

详细答案>>

54. 如何在AngularJS中发送Http post请求?

$http.post方法用于在AngularJS中发送http post请求。 该方法有三个参数,即URL,data,config。

详细答案>>

55. AngularJS控制器中this$scope的区别是什么?

$scope是具有可用方法和属性的对象。 它用于获取控制器js文件的所有控件。 它适用于控制器和视图。this是调用控制器构造函数时使用的控制器。

详细答案>>

56. $location与AngularJS中的window.location有何不同?

如果不希望在更改URL时重新加载整页,并且在想要更改URL,重新加载页面或导航到其他页面时使用window.location,则使用$Location

详细答案>>

57. AngularJS中ng-cloak指令的用途是什么?

它用于防止Angular HTML模板在应用程序仍在加载时以未编译的形式由浏览器短暂显示。 它用于避免由HTML模板显示引起的不良闪烁效应。

详细答案>>

58. 如何在AngularJS中设置动画?

要为应用程序设置动画,需要包含AngularJS Animate库,然后将ngAnimate模块引用到应用程序中,或者将ngAnimate添加为应用程序模块中的依赖项。

详细答案>>

59. AngularJS如何格式化日期?

AngularJS提供了一个日期过滤器,可以通过该过滤器将日期格式化为所需的格式(形式)。

语法:

{{ today | date:'MM/dd/yyyy'}}
详细答案>>

60. AngularJS中的无空间控制器是什么? 为什么要使用它们?

无空间控制器没有注入$scope,功能和属性直接绑定到控制器上。无范围控制器用于控制器变得复杂的情况,使用$scope来提供数据。

详细答案>>

61. AngularJS中的隔离范围是什么?为什么需要它?

它是一个单独存在的范围,没有原型继承。 它使组件可重复使用,并允许单向或双向控制绑定。

详细答案>>

62. AngularJS中的$evalAsync$timeout有什么区别?

$evalAsync稍后在当前作用域上执行表达式,并不保证何时执行表达式。 $timeout还会在以后执行当前作用域上的表达式,但也会在Angular操纵DOM之后运行,并且在某些情况下浏览器呈现后会导致闪烁。详细答案>>

63. 如何在AngularJS中禁用右键单击事件?

要在AngularJS中禁用右键单击事件,需要添加disable-right-click作为元素的属性。 只需使用preventDefault(),这将取消事件并停止事件的进一步传播。

详细答案>>

64. AngularJS的提供程序(provider)是什么?

AngularJS中的提供程序用于在配置阶段内部创建工厂,服务等。 提供程序是特殊的工厂方法,用于返回服务/值/工厂。

详细答案>>

65. AngularJS与Jquery有什么区别(不同)?

AngularJS是一个框架,具有关键功能,如模型,双向绑定,指令,路由,依赖注入,单元测试等,而Jquery是一个用于DOM操作的库,没有双向绑定功能。

详细答案>>

66. AngularJS中有哪些内置验证器?

AngularJS支持所有标准HTML5属性以验证输入。以下是AngularJS中的几个内置验证器: requiredminmaxtype="number" OR type="email"详细答案>>

67. 测试AngularJS应用程序的工具有哪些?

要测试AngularJS应用程序,应该使用某些工具来使测试更容易设置和运行。 Karma Karma是一个JavaScript命令行工具,可用于生成Web服务器,该服务器加载应用程序的源代码并执行测试。 您可以将Karma配置为针对多种浏览器运行,这有助于确保您的应用程序适用于您需要支持的所有浏览器。 Karma在命令行上执行,一旦在浏览器中运行,就会在命令行上显示测试结果。 Karma是NodeJS应用程序,应该通过NPM/YARN安装。 Karma网站上提供了完整的安装说明。 Jasmine Jas...详细答案>>

68. AngularJS的架构是什么样的?

AngularJS是3个组件的架构。它们分别是 -

  • 模板(视图)
  • 范围(模型)
  • 控制器(控制器)

AngularJS使用Directives扩展HTML属性,并使用Expressions将数据绑定到HTML。

详细答案>>

69. 在AngularJs中依赖注入是什么?它是如何工作的?

AngularJS旨在突出依赖注入的强大功能,这是一种软件设计模式,强调提供其依赖项的组件,而不是在组件内对其进行硬编码。 例如,如果有一个需要访问客户列表的控制器,可以将实际的客户列表存储在可以注入控制器的服务中,而不是将客户列表硬编码到控制器本身的代码中。 在AngularJS中,可以注入值,工厂,服务,提供程序和常量。详细答案>>

70. AngularJS中的UI路由是什么?

它是AngularJS的路由框架,提供了与ngRoute不同的方法。它根据应用程序的状态更改应用程序视图,而不仅仅是路由URL。

详细答案>>

71. AngularJS和Angular 2的区别是什么?

AngularJS和Angular 2之间的区别,如下表所示 - Angular Angular 2 Angular js或Angular 1.x基于MVC架构。 Angular 2基于服务/组件。 在Angular js中使用Javascript编写应用程序。 在Angular2中使用Typescript(javascript的超集)编写应用程序。 控制器用于编写逻辑并与模型和视图交互。 在Angular 2中,控制器完全被淘汰,组件取而代之。 Angular 1用于开发单页...详细答案>>

72. AngularJS中如何使用Factory创建服务?

使用模块的工厂API创建服务是创建服务的最常用方法之一。 我们首先创建一个对象,向对象添加属性并返回相同的对象,之后可以将其注入到服务,控制器,过滤器或指令等组件中。

详细答案>>

73. 在AngularJS中如何隐藏/显示div?

为了隐藏/显示AngularJS中的div,只需删除display:none,其余部分在控件中。 如果要在默认情况下隐藏它,请将scope.myvalue的值设置为false

详细答案>>

74. 在AngularJS中的ng-include指令有什么作用?

可以使用ng-include指令将HTML页面嵌入HTML页面中。

详细答案>>

75. 在AngularJS中如何禁用元素或控件?

使用ng-disabled属性将用来禁用AngularJS中的元素。

详细答案>>

76. AngularJS中如何创建服务?

AngularJS中的服务是通过将其注册到要运行的模块来创建的。有三种方法可以创建AngularJS服务。 它们分别是:

  • Factory
  • Service
  • Provider
详细答案>>

77. AngularJS中的事件是什么?请列出一些常见的事件。

AngularJS框架包含某些指令,可用于在各种DOM事件上提供自定义行为。 一些事件如下: ng-clickng-keyupng-keydownng-keypressng-dblclickng-mousedownng-mouseleaveng-mouseenterng-change详细答案>>

78. AngularJS中的ng路由和UI路由有什么区别(不同)?

ng路由是角度应用程序的深层链接服务和指令,而UI路由是第三方模块路由,功能非常强大。 它完成了ng路由器所做的一切,并具有许多其他额外功能。

详细答案>>

79. AngularJS中的动态路由是什么?如何实现它?

动态路由是使用HTTP服务器进行服务器通信的典型方法。 为了实现它,首先编写一个使用$http$routeprovider的配置函数来收集有关可用路由的所有信息。

详细答案>>

80. AngularJS中提供的指令类型有哪些?

AngularJS中提供的不同类型的指令是: 元素指令 - 在遇到匹配元素时激活。属性 - 在遇到匹配属性时激活。CSS - 当遇到匹配的CSS样式时激活它。注释 - 在遇到匹配的注释时激活。详细答案>>
注: 此试题仅作为相关知识水平测试,不能作为权威试题和答案。非商业转载注明原文链接即可;商业转载需本站授权同意。