50 个 Java 面试必问的面试题，这里都给你整好了

我们整理了一份主要的 Angular 面试问题清单，分为三部分：角度面试问题–初学者水平角度面试问题–中级角度面试问题–高级初学者水平–面试问题

1. 区分 Angular 和 AngularJS。

图片

 2. 什么是 Angular？

Angular 是一个开放源代码的前端 Web 框架。它是最流行的 JavaScript 框架之一，主要由 Google 维护。

它提供了一个轻松开发基于 Web 的应用程序的平台，并使前端开发人员能够管理跨平台应用程序。它集成了强大的功能，例如声明性模板，端到端工具，依赖项注入以及各种其他使开发路径更流畅的最佳实践。  3. 使用 Angular 有什么优势？ 下面列出了使用 Angular 框架的一些主要优点：支持双向数据绑定它遵循 MVC 模式架构它支持静态模板和 Angular 模板您可以添加自定义指令它还支持 RESTfull 服务支持验证客户端和服务器之间的通讯便利支持依赖注入具有强大的功能，例如事件处理程序，动画等。  4. Angular 主要用于什么？

Angular 通常用于表示单页应用程序的 SPA 的开发。Angular 提供了一组现成的模块，可简化单页应用程序的开发。不仅如此，Angular 还具有内置数据流，类型安全性和模块化 CLI 的功能，被认为是成熟的 Web 框架。

 5. 什么是角度表达式？ 角表达式是类似于 JavaScript 的代码段，通常放在诸如 {{expression}} 之类的绑定中。这些表达式用于将应用程序数据绑定到 HTML 语法：{{expression}}

 6. Angular 中的模板是什么？ Angular 中的模板是使用包含特定于 Angular 的元素和属性的 HTML 编写的。这些模板与来自模型和控制器的信息结合在一起，进一步渲染这些信息以向用户提供动态视图。

 7. 在 Angular 中，什么是字符串插值？Angular 中的字符串插值是一种特殊的语法，它在双花括号 {{}} 中使用模板表达式来显示组件数据。它也称为小胡子语法。JavaScript 表达式包含在花括号中，由 Angular 执行，然后将相对输出嵌入 HTML 代码中。这些表达式通常像表一样进行更新和注册，作为摘要循环的一部分。

 8. Angular 中的 Annotation 和 Decorator 有什么区别？ 使用 Reflect Metadata 库，角度注释是类的 “唯一” 元数据集。它们用于创建 “注释” 数组。另一方面，装饰器是用于分离装饰或修改类的设计模式，而无需实际更改原始源代码。

 9. 您对 Angular 中的控制器了解多少？ 控制器是 JavaScript 函数，可为 HTML UI 提供数据和逻辑。顾名思义，它们控制数据如何从服务器流到 HTML UI。

 10. Angular 的范围是什么？ Angular 中的范围是一个引用应用程序模型的对象。它是表达式的执行上下文。范围以模仿应用程序 DOM 结构的层次结构排列。范围可以监视表达式并传播事件。

 11. Angular 中的指令是什么？ Angular 的核心功能是指令，这些属性使您可以编写 特定于应用程序的新 HTML 语法。它们本质上是在 Angular 编译器在 DOM 中找到它们时执行的函数。

Angular 指令分为三部分：组件指令结构指令属性指令

 12. 什么是数据绑定？

在 Angular 中，数据绑定是最强大，最重要的功能之一，可让您定义组件与 DOM（文档对象模型）之间的通信。

它从根本上简化了定义交互式应用程序的过程，而不必担心在视图或模板与组件之间推送和提取数据。在 Angular 中，数据绑定有四种形式：字符串插值属性绑定事件绑定双向数据绑定

 13. 在 Angular 中使用过滤器的目的是什么？ Angular 中的过滤器用于格式化表达式的值，以便将其显示给用户。这些过滤器可以添加到模板，指令，控制器或服务中。不仅如此，您还可以创建自己的自定义过滤器。使用它们，您可以轻松地组织数据，使数据仅在满足特定条件时才显示。通过使用竖线字符 |，将过滤器添加到表达式中，然后是过滤器。

 14. Angular 和 jQuery 有什么区别？

图片

 15. Angular 中的提供程序是什么？ 提供程序是 Angular 中的可配置服务。这是对依赖关系注入系统的一条指令，它提供有关获取依赖关系值的方式的信息。它是一个具有 $ get（）方法的对象，该方法被调用以创建服务的新实例。提供者还可以包含其他方法，并使用 $ provide 来注册新的提供者。 

中级–面试问题 

 16. Angular 是否支持嵌套控制器？是的，Angular 确实支持嵌套控制器的概念。需要以层次方式定义嵌套控制器，以便在视图中使用它。

 17. 如何区分 Angular 表达式和 JavaScript 表达式？

图片

 18. 列出使用核心 Angular 功能在应用程序模块之间进行通信的方式。以下是使用核心 Angular 功能在应用程序模块之间进行通信的最通用方法：使用事件使用服务通过在 $ rootScope** 上分配模型直接在控制器之间 [ $ parent， KaTeX parse error: Expected 'EOF', got '，' at position 13: childHead，̲ ** nextSibling 等]直接在控制器之间 [ ControllerAs 或其他继承形式]

 19. service（）和 factory（）有什么区别？ Angular 中的 service（）是用于应用程序业务层的函数。它作为构造函数运行，并在运行时使用’new’关键字调用一次。而 factory（）是一个类似于 service（）的函数，但功能更强大，更灵活。factory（）是有助于创建对象的设计模式。

 20. $ scope 和 Angular 中的 scope 有什么区别？ Angular 中的 $ scope 用于实现依赖项注入（DI）的概念，另一方面，scope 用于指令链接。$ scope 是 $ scopeProvider 提供的服务，可以注入到控制器，指令或其他服务中，而 Scope 可以是任何东西，例如函数参数名称等

 21. 解释范围层次的概念吗？ Angular 中的 $ scope 对象被组织成一个层次结构，并且主要由视图使用。它包含一个根范围，该范围可以进一步包含称为子范围的范围。一个根作用域可以包含多个子作用域。

在这里，每个视图都有自己的 $ scope，因此由其视图控制器设置的变量将对其他控制器隐藏。范围层次结构通常如下所示：根 $ scope 控制器 1 的 $ scope 控制器 2 的 $ scope… 控制器’n’的 $ scope

 22. 什么是 AOT？ AOT 代表 Angular-Ahead-of-Time 编译器。它用于在构建过程中预编译应用程序组件及其模板。用 AOT 编译的 Angular 应用程序的启动时间更短。同样，这些应用程序的组件可以立即执行，而无需任何客户端编译。这些应用程序中的模板作为代码嵌入其组件中。它减少了下载 Angular 编译器的需要，从而使您免于繁琐的任务。AOT 编译器可以丢弃未使用的指令，这些指令会使用摇树工具进一步丢弃。

 23. 解释 jQLite。 jQlite 也称为 jQuery lite 是 jQuery 的子集，包含其所有功能。

默认情况下，它打包在 Angular 中。它帮助 Angular 以兼容的跨浏览器方式操作 DOM。jQLite 基本上仅实现最常用的功能，因此占用空间小。

 24. 解释 Angular 中的摘要循环过程？ Angular 中的摘要周期是监视监视列表的过程，以跟踪监视变量的值的变化。在每个摘要循环中，Angular 都会比较范围模型值的先前版本和新版本。通常，此过程是隐式触发的，但是您也可以使用 $ apply（） 手动将其激活。

 25. 什么是 Angular 模块？ 所有 Angular 应用程序都是模块化的，并遵循称为 NgModules 的模块化系统。这些容器保存着专门用于应用程序域，工作流或一组紧密相关的功能的内聚代码块。这些模块通常包含组件，服务提供商和其他代码文件，其范围由包含的 NgModule 定义。有了模块，代码变得更加可维护，可测试和易读。同样，应用程序的所有依赖关系通常仅在模块中定义。

 26. 我们可以在哪种类型的组件上创建自定义指令？ Angular 支持创建以下内容的自定义指令：元素指令 - 当遇到匹配的元素时，指令将激活。

属性 - 当遇到匹配的属性时，指令将激活。

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

注释 - 遇到匹配的注释时，指令将激活

 27. Angular 中有哪些不同类型的过滤器？ 以下是 Angular 支持的各种过滤器：

货币： 将数字格式化为货币格式。日期： 将日期格式化为指定的格式。

filter： 从数组中选择项的子集。

json： 将对象格式化为 JSON 字符串。

limit： 将数组 / 字符串限制为指定数量的元素 / 字符。

小写： 将字符串格式化为小写。number： 将数字格式化为字符串。

orderBy： 按表达式对数组排序。大写： 将字符串格式化为大写。

 28. 什么是 Angular 中的依赖注入？ 依赖注入（DI）是一种软件设计模式，其中对象作为依赖关系传递，而不是在组件中对其进行硬编码。

当您尝试将对象创建的逻辑与使用对象的逻辑分开时，依赖注入的概念会派上用场。“config” 操作使用 DI，在加载模块以检索应用程序的元素时，必须预先配置 DI。使用此功能，用户可以根据自己的要求更改依赖关系。

 29. 区分单向绑定和双向数据绑定。 在 单向数据绑定中，无论何时更改数据模型，“视图” 或 “ UI” 部分都不会自动更新。您需要手动编写自定义代码，以便在每次视图更改时对其进行更新。

而在双向数据绑定中，一旦更改数据模型，则隐式更新 View 或 UI 部分。与单向数据绑定不同，这是一个同步过程。 

 30. 组件和指令的生命周期挂钩是什么？ Angular 组件具有离散的生命周期，其中包含从出生到死亡过渡的不同阶段。为了更好地控制这些阶段，我们可以使用以下方法将其连接：构造函数： 通过在类上调用 new 创建组件或指令时将调用它。

ngOnChanges： 每当组件的任何输入属性发生更改或更新时，都将调用它。

ngOnInit： 每次初始化给定组件时都会调用它。在第一个 ngOnChanges 之后，该挂钩在其生命周期中仅被调用一次。

ngDoCheck： 每当调用给定组件的更改检测器时，便会调用它。这使您可以为提供的组件实现自己的变更检测算法。

ngOnDestroy： 在 Angular 销毁组件之前立即调用它。您可以使用此钩子来取消订阅可观察对象并分离事件处理程序，以避免发生任何类型的内存泄漏。

 31. 通过对 Angular 进行脏检查，您了解什么？ 在 Angular 中，摘要过程称为脏检查。之所以调用它，是因为它扫描整个范围以进行更改。换句话说，它将所有新的作用域模型值与以前的作用域值进行比较。由于所有监视变量都包含在单个循环中，因此任何变量的任何更改 / 更新都将导致重新分配 DOM 中存在的其余监视变量。被监视的变量处于单个循环（摘要循环）中，任何变量的任何值更改都会在 DOM 中重新分配其他被监视变量的值

 32. 区分 DOM 和 BOM。

图片

 33. 什么是 Angular 中的 Transpiling？Angular 中的编译是指将源代码从一种编程语言转换为另一种编程语言的过程。通常，在 Angular 中，此转换是从 TypeScript 到 JavaScript 的。这是一个隐式过程，在内部发生。

 34. How to perform animation in Angular? 为了在 Angular 应用程序中执行动画，您需要包括一个称为 Animate Library 的特殊 Angular 库，然后将 ngAnimate 模块引用到您的应用程序中，或者将 ngAnimate 作为依赖项添加到您的应用程序模块内部。

 35. 什么是 Angular 中的包含？ Angular 中的包含可让您将指令的原始子代转移到新模板内的特定位置。

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-blur

 37. 列出一些用于测试角度应用的工具吗？ KarmaAngular MocksMochaBrowserifySion

 38. 如何在 Angular 中创建服务？ 在 Angular 中，服务是可替换对象，该对象使用依赖项注入连接在一起。通过将服务注册到要在其中执行的模块中来创建服务。基本上，您可以通过三种方式创建角度服务。基本上，它们是在 Angular 中创建服务的三种方式：FactoryServiceProvider

 39. 什么是单例模式，在 Angular 中可以找到它？ Angular 中的 Singleton 模式是一种很棒的模式，它限制了一个类不能被多次使用。Angular 中的 Singleton 模式主要在依赖项注入和服务中实现。因此，如果您不使用 “new Object（）” 而未将其设为单例，则将为同一对象分配两个不同的存储位置。而如果将该对象声明为单例，则如果该对象已存在于内存中，则将简单地将其重用。

 40. 您对 Angular 中的 REST 了解那些？ REST 表示 RE 表象小号大老牛逼转让（BOT）。REST 是适用于 HTTP 请求的 API（应用程序编程接口）样式。在这种情况下，所请求的 URL 可以精确定位需要处理的数据。然后，HTTP 方法将标识需要对请求的数据执行的特定操作。因此，遵循此方法的 API 被称为 RESTful API。

 41. Angular 中的自举是什么？ 在 Angular 中进行引导只是初始化或启动 Angular 应用程序。Angular 支持自动和手动引导。 自动引导程序： 这是通过将 ng-app 指令添加到应用程序的根目录来完成的，通常是在标记或标记上（如果您希望 angular 自动引导应用程序）。

当 Angular 找到 ng-app 指令时，它将加载与其关联的模块，然后编译 DOM。手动引导： 手动引导为您提供了有关如何以及何时初始化 Angular 应用程序的更多控制。如果您想在 Angular 唤醒并编译页面之前执行任何其他操作，这将非常有用。

 42. 在 Angular 中链接和编译有什么区别？ 编译功能用于模板 DOM 操纵并收集所有指令。链接功能用于注册 DOM 侦听器以及实例 DOM 操作，并在克隆模板后执行。

 43. 您对 Angular 中的常数有什么了解？ 在 Angular 中，常量类似于用于定义全局数据的服务。常量使用关键字 “constant” 声明。它们是使用恒定依赖性创建的，可以注入控制器或服务中的任何位置。

 44. Angular 的提供者，服务和工厂之间有什么区别？

图片

 45. 什么是 Angular Global API？Angular Global API 是用于执行各种常见任务的全局 JavaScript 函数的组合，例如：比较对象迭代对象转换数据有一些常见的 Angular Global API 函数，例如：** 有角的。 小写：** 将字符串转换为小写字符串。有角的。

大写： 将字符串转换为大写字符串。有角的。

isString： 如果当前引用是字符串，则返回 true。** 有角的。

isNumber：** 如果当前引用为数字，则返回 true。高级水平–面试问题 

 46. 在 Angular 中，描述如何设置，获取和清除 cookie？ 为了在 Angular 中使用 cookie，您需要包含一个名为 ngCookies angular-cookies.js 的模块。设置 Cookies –为了以键值格式设置 Cookies，使用 “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 应用程序中使用自动引导。它表示 Angular 应用程序的根元素，通常在或标签附近声明。在 HTML 文档中可以定义任何数量的 ng-app 指令，但是只有一个 Angular 应用程序可以被隐式地正式引导。其余应用程序必须手动引导。

例<div>First Name :Last Name :Full Name: {{firstName + ” ” + lastName }}</div>

 49. 从准备好的 TemplateRef 插入嵌入视图的过程是什么？ @Component({ selector: 'app-root', template: <div>{{name}} })export class AppComponent implements AfterViewChecked { @ViewChild('template', { read: TemplateRef }) _template: TemplateRef; constructor() { } ngAfterViewChecked() { this.vc.createEmbeddedView(this._template, {fromContext: 'John'}); }}

 50. 如何仅通过单击角形按钮即可隐藏 HTML 元素？ 可以使用 ng-hide 指令与控制器一起轻松隐藏 HTML 元素，以在单击按钮时隐藏 HTML 元素。View<div> 欢迎关注全栈程序员社区公众号 button> <p>欢迎关注 Java 架构师社区公众号！ p> div>Controllercontroller: function() { this.isHide = false; this.hide = function(){ this.isHide = true; }; } 欢迎大家补充！