我们整理了一份Angular面试的主要问题列表,分为三个部分:Angular面试题-初级Angular面试题-Angular中级面试题-高级初学者级别——面试问题区分Angular和AngularJS。2.什么是角?Angular是一个开源的前端Web框架。它是最流行的JavaScript框架之一,主要由谷歌维护。它提供了一个平台,可以轻松开发基于Web的应用程序,并使前端开发人员能够管理跨平台应用程序。它集成了强大的功能,例如声明性模板、端到端工具、依赖项注入和其他各种使开发路径更加顺畅的最佳实践。3.使用Angular有什么优势?下面列出了使用Angular框架的一些主要优点:支持双向数据绑定遵循MVC模式架构支持静态模板和Angular模板可以添加自定义指令它还支持RESTfull服务支持客户端和客户端之间通信的身份验证serverConvenience支持依赖注入,具有强大的功能,如事件处理程序、动画等。4.Angular主要用于什么?Angular通常用于开发代表单页应用程序的SPA。Angular提供了一组现成的模块,可以简化单页应用程序的开发。不仅如此,Angular还被认为是一个成熟的Web框架,具有内置的数据流、类型安全和模块化CLI。5.什么是角度表达式?Angular表达式是类似于JavaScript的代码片段,通常放置在诸如{{expression}}之类的绑定中。这些表达式用于将应用程序数据绑定到HTML语法:{{expression}}6.Angular中的模板是什么?Angular中的模板是使用包含Angular特定元素和属性的HTML编写的。这些模板与来自模型和控制器的信息相结合,进一步呈现以向用户提供动态视图。7.Angular中的字符串插值是什么?Angular中的字符串插值是一种特殊的语法,它使用双花括号{{}}内的模板表达式来显示组件数据。它也被称为小胡子语法。JavaScript表达式包含在花括号中,由Angular执行,然后将相关输出嵌入到HTML代码中。这些表达式通常像表格一样更新和注册,作为摘要循环的一部分。8.Angular中的注解和装饰器有什么区别?使用ReflectMetadata库,角度注释是类的“唯一”元数据集。它们用于创建“评论”数组。另一方面,装饰器是一种设计模式,用于在不实际更改原始源代码的情况下分离装饰或修改类。9.你对Angular中的控制器了解多少?控制器是为HTMLUI提供数据和逻辑的JavaScript函数。顾名思义,它们控制着数据如何从服务器流向HTMLUI。10.Angular的范围是什么?Angular中的范围是引用应用程序模型的对象。它是表达式的执行上下文。作用域以模仿应用程序DOM结构的层次结构排列。作用域可以监视表达式和传播事件。11.Angular中的指令是什么?Angular的核心是指令,允许您编写特定于您的应用程序的新HTML语法的属性。它们本质上是Angular编译器在DOM中找到它们时执行的函数。Angular指令分为三部分:组件指令结构指令属性指令12.什么是数据绑定?在Angular中,数据绑定是最强大和最重要的功能之一,它允许您定义组件和DOM(文档对象模型)之间的通信。它从根本上简化了定义交互式应用程序的过程,而不必担心在视图或模板和组件之间推拉数据。在Angular中,数据绑定有四种形式:字符串插值属性绑定事件绑定双向数据绑定13、Angular中使用过滤器的目的是什么?Angular中的过滤器用于格式化表达式的值,以便可以将其显示给用户。这些过滤器可以添加到模板、指令、控制器或服务中。不仅如此,您还可以创建自己的自定义过滤器。使用它们,您可以轻松组织数据,使其仅在满足特定条件时出现。使用竖线字符|后跟filter将过滤器添加到表达式中。14.Angular和jQuery有什么区别?15.Angular中的提供者是什么?提供者是Angular中的可配置服务。这是对依赖注入系统的指令,提供有关如何获取依赖值的信息。它是一个带有$get()方法的对象,调用该方法来创建服务的新实例。提供者还可以包含其他方法,并使用$provide来注册新的提供者。中级——面试题16.Angular支持嵌套控制器吗?是的,Angular确实支持嵌套控制器的概念。嵌套控制器需要分层定义才能在视图中使用它。17.如何区分Angular表达式和JavaScript表达式?18.列出使用Angular核心功能在应用程序模块之间进行通信的方式。这是使用核心Angular功能在应用程序模块之间进行通信的最通用方法:使用事件使用服务通过在$rootScope上分配模型直接在控制器之间**[$parent,KaTeX解析错误:预期的'EOF',在位置13处得到',':childHead,?**nextSiblingetc.]直接在controller之间[ControllerAs或其他继承形式]19.service()和factory()有什么区别?Angular中的service()是应用程序业务层的函数。它作为构造函数运行,并在运行时使用“new”关键字调用一次。而factory()是一个类似于service()的函数,但是更加强大和灵活。factory()是一种有助于创建对象的设计模式。20.Angular中的$scope和scope有什么区别?Angular中的$scope用于实现依赖注入(DI)的概念,另一方面,scope用于指令链接。$scope是$scopeProvider提供的服务,可以注入controller、directives或其他服务,而Scope可以是任何东西,比如函数参数名等。21.解释作用域层级的概念?Angular中的$scope对象被组织成一个层次结构,主要由视图使用。它包含一个根范围,该范围可以进一步包含称为子范围的范围。一个根作用域可以包含多个子作用域。在这里,每个视图都有自己的$scope,因此由其视图控制器设置的变量将对其他控制器隐藏。作用域层次结构通常如下所示:Root$scope$scopeofController1$scopeofController2...$scopeofController'n'22.什么是AOT?AOT代表Angular-Ahead-of-Time编译器。它用于在构建过程中预编译应用程序组件及其模板。使用AOT编译的Angular应用程序具有更快的启动时间。同样,这些应用程序的组件无需任何客户端编译即可立即执行。这些应用程序中的模板作为代码嵌入到它们的组件中。它减少了下载Angular编译器的需要,使您免于繁琐的工作。AOT编译器可以丢弃未使用的指令,使用treeshaking工具进一步丢弃这些指令。23.解释jQLite。jQlite也称为jQuerylite是jQuery的一个子集,包括它的所有功能。它默认与Angular打包在一起。它帮助Angular以兼容的跨浏览器方式操作DOM。jQLite基本上只实现了最常用的功能,所以占用的空间很小。24.解释Angular中的摘要循环过程?Angular中的摘要循环是监视监视列表以跟踪监视变量值变化的过程。在每个摘要周期中,Angular都会比较旧版本和新版本的作用域模型值。通常此过程是隐式触发的,但您也可以使用$apply()手动激活它。25.什么是Angular模块?所有Angular应用程序都是模块化的,并遵循称为NgModules的模块化系统。这些容器包含专用于应用程序域、工作流或一组密切相关的功能的内聚代码块。这些模块通常包含组件、服务提供者和其他代码文件,其范围由包含的NgModule定义。使用模块,代码变得更易于维护、可测试和可读。此外,应用程序的所有依赖项通常仅在模块中定义。26.我们可以在什么类型的组件上创建自定义指令?Angular支持为以下内容创建自定义指令:元素指令——遇到匹配元素时将触发指令。属性-当遇到匹配的属性时,指令将激活。遇到匹配的CSS样式时会触发CSS指令。注解——当遇到匹配的注解时,指令将被激活27.Angular中有哪些不同类型的过滤器?以下是Angular支持的各种过滤器:Currency:将数字格式化为货币。日期:将日期格式化为指定的格式。filter:从数组中选择项目的子集。json:将对象格式化为JSON字符串。limit:将数组/字符串限制为指定数量的元素/字符。lowercase:将字符串格式化为小写。number:将数字格式化为字符串。orderBy:按表达式对数组进行排序。uppercase:将字符串格式化为大写。28.Angular中的依赖注入是什么?依赖注入(DI)是一种软件设计模式,其中对象作为依赖项传递,而不是将它们硬编码在组件中。当您试图将对象创建逻辑与使用它的逻辑分开时,依赖注入的概念会派上用场。“配置”操作使用DI,它必须在加载模块时预先配置以检索应用程序的元素。使用此功能,用户可以根据他们的要求更改依赖项。29.区分单向绑定和双向数据绑定。在单向数据绑定中,每当数据模型发生变化时,“视图”或“UI”部分不会自动更新。您需要手动编写自定义代码以在每次更改时更新视图。然而,在双向数据绑定中,一旦数据模型发生变化,View或UI部分就会隐式更新。与单向数据绑定不同,这是一个同步过程。30.什么是组件和指令的生命周期钩子?Angular组件具有离散的生命周期,具有从出生到死亡的不同过渡阶段。为了更好地控制这些阶段,我们可以使用以下方式将它们连接起来:构造函数:当通过在类上调用new创建组件或指令时,将调用它。ngOnChanges:每当更改或更新组件的任何输入属性时都会调用它。ngOnInit:每次初始化给定组件时都会调用它。在第一次ngOnChanges之后,钩子在其生命周期中只被调用一次。ngDoCheck:每当调用给定组件的变化检测器时都会调用它。这允许您为提供的组件实施自己的更改检测算法。ngOnDestroy:在Angular销毁组件之前立即调用。您可以使用此挂钩取消订阅可观察对象并分离事件处理程序以避免任何类型的内存泄漏。31.你从Angular脏检查中学到了什么?在Angular中,摘要过程称为脏检查。调用它是因为它扫描整个范围以查找更改。换句话说,它将所有新的作用域模型值与以前的作用域值进行比较。由于所有监视变量都包含在一个循环中,任何变量的任何更改/更新都将导致DOM中存在的剩余监视变量被重新分配。被监控的变量在一个单循环(digestloop)中,任何变量的任何值变化都会重新赋值DOM中其他被监控变量的值32.区分DOM和BOM。33.Angular中的转译是什么?Angular中的编译是指将源代码从一种编程语言转换为另一种编程语言的过程。通常,在Angular中,这种转换是从TypeScript到JavaScript。这是内部发生的隐式过程。34.如何在Angular中执行动画?为了在Angular应用程序中执行动画,您需要包含一个名为AnimateLibrary的特殊Angular库,然后将ngAnimate模块引用到您的应用程序中,或者将ngAnimate作为依赖项添加到您的应用程序模块中。35.Angular中的include是什么?IncludeinAngular允许您将指令的原始子项移动到新模板中的特定位置。ng指令表示正在使用最近的父指令包含的DOM的插入点。ng-transclude或ng-transclude-slot等属性指令主要用于包含。36.Angular中的事件是什么?Angular中的事件是帮助自定义各种DOM事件行为的特定指令。Angular支持的事件如下所列:ng-clickng-copyng-cutng-dblclickng-keydownng-keypressng-keyupng-mousedownng-mouseenterng-mouseleaveng-mousemoveng-mouseoverng-mouseupng-blur37.列出一些用于测试角度应用程序的工具?KarmaAngularMocksMochaBrowserifySion38.如何在Angular中创建服务?在Angular中,服务是使用依赖注入连接在一起的可替换对象。通过将服务注册到要在其中执行的模块来创建服务。基本上,您可以通过三种方式创建角度服务。基本上,它们是在Angular中创建服务的三种方式:FactoryServiceProvider39.什么是单例模式,在Angular中哪里可以找到它?Angular中的单例模式是一种很好的模式,可以限制一个类被多次使用。Angular中的单例模式主要是在依赖注入和服务中实现的。因此,如果您不使用“newObject()”而不将其设为单例,您将被分配给同一个对象的两个不同的存储位置。而如果对象被声明为单例,如果它已经存在于内存中,它将被简单地重用。40.你对Angular中的REST了解多少?REST代表RERepresentationBigOldTTransfer(BOT)。REST是一种用于HTTP请求的API(应用程序编程接口)样式。在这种情况下,请求的URL可以精确定位需要处理的数据。然后HTTP方法将识别需要对请求的数据执行的特定操作。因此,遵循这种方法的API称为RESTfulAPI。41.Angular中的引导是什么?Angular中的引导只是初始化或启动Angular应用程序。Angular支持自动和手动引导。自动引导:这是通过将ng-app指令添加到应用程序的根目录来完成的,通常是在标签或标签上(如果您希望angular自动引导您的应用程序)。当Angular找到ng-app指令时,它会加载其关联的模块,然后编译DOM。手动引导:手动引导可以让你更好地控制Angular应用程序的初始化方式和时间。如果你想在Angular唤醒并编译页面之前做任何其他事情,这很有用。42.Angular中链接和编译有什么区别?compile函数用于模板DOM操作并收集所有指令。链接函数用于注册DOM侦听器以及实例DOM操作,并在模板被克隆后执行。43.你对Angular中的常量了解多少?在Angular中,常量就像定义全局数据的服务。常量使用关键字“constant”声明。它们是使用常量依赖关系创建的,可以注入控制器或服务中的任何位置。44.Angular中的提供者、服务和工厂有什么区别?45.什么是Angular全局API?AngularGlobalAPI是用于执行各种常见任务的全局JavaScript函数的组合,例如:比较对象迭代对象转换数据有一些常见的AngularGlobalAPI函数例如:**angular。lowercase:**将字符串转换为小写字符串。有角的。大写:将字符串转换为大写字符串。有角的。isString:如果当前引用是字符串,则返回true。**角。isNumber:**如果当前引用是数字,则返回true。进阶-面试题46.在Angular中,描述如何设置、获取和清除cookies?为了在Angular中使用cookie,你需要包含一个名为ngCookiesangular-cookies.js的模块。设置Cookie–要以键值格式设置cookie,请使用“put”方法。cookie.set("nameOfCookie","cookieValue");获取Cookie–要获取cookie,使用“get”方法。cookie.get("nameOfCookie");清除Cookie–使用“删除”方法删除cookie。cookie.delete("nameOfCookie");47.如果你的数据模型在“区域”之外更新,请说明这个过程,你会如何查看视图?您可以使用以下任何一种来更新视图:ApplicationRef.prototype.tick():它将对整个组件树执行更改检测。NgZone.prototype.run():它将对整个组件树执行变更检测。在这里,引擎盖下的run()将调用tick本身,然后参数将获取tick之前的函数并执行它。ChangeDetectorRef.prototype.detectChanges():它将启动对当前组件及其子组件的变更检测。48.解释Angular中的ng-app指令。ng-app指令用于定义Angular应用程序,允许我们在Angular应用程序中使用autobootstrap。它代表Angular应用程序的根元素,通常在标记处或标记附近声明。可以在HTML文档中定义任意数量的ng-app指令,但只能隐式和正式地引导一个Angular应用程序。其余应用程序必须手动引导。示例
欢迎来到Java架构师社区公众号!p>div>Controllercontroller:function(){this.isHide=false;this.hide=function(){this.isHide=true;};欢迎大家补充!