Top 15 Angular面试问题与解答

Q-1. 什么是Angular？

Angular是由Google于2016年创建的开源免费JavaScript框架。它允许您通过实现HTML、CSS和JavaScript等各种Web技术来构建现代Web和移动应用程序。

Angular使用的主要编程语言是TypeScript。基本上，它是一个适用于创建企业级Angular应用程序的开源前端框架，因为它允许开发人员重用其代码且易于维护。

Q-2. Angular中使用了哪些类型的技术？

Angular是一个免费开源的JavaScript框架，深受Web开发人员的青睐。其流行源于使用多种技术来轻松执行特定任务。Angular在构建应用程序时提供了出色的体验。它使用TypeScript，这被称为JavaScript的超集。

Q-3. Angular有哪些优势？

Angular框架的优势包括：

• 遵循MVC架构。MVC代表Model-View-Controller，这被认为是Angular的最佳优势之一。Model负责管理所有应用程序数据，View管理数据显示。Model被称为维护数据模式的最低级别，而Controller是View和Model层之间的桥梁。

• 依赖注入。Angular的依赖注入使Web开发人员的应用程序开发过程变得容易。它用于满足这些依赖关系，并允许您在不同服务之间分配任务。这是开发人员更喜欢使用Angular开发的主要原因。

• 双向数据绑定。Angular的主要优势之一是其双向数据绑定技术，这有助于减少开发时间。View层表示Model层并保持理想的同步。这样，当您在Model中修改任何内容时，用户可以在View中自动看到更改。

• 允许添加自定义指令。我们可以在Angular中使用指令来更改DOM元素的行为，为此我们需要将指令名称作为属性用于DOM元素。

• 支持RESTful服务。Angular中的RESTful功能用于为基于Web的应用程序创建API。它包含在ngResource模块中，该模块与核心AngularJS框架分开分发。这些RESTful服务具有高度可扩展性和可维护性。

• 简单代码生成。Angular中的简单代码生成是使用特定工具创建元数据并获得可用代码输出的过程。此过程允许您获得手写代码的所有好处。

• 支持验证。Angular运行验证，生成验证错误列表并显示结果。通过这种方式，您可以通过验证来自UI的用户输入来提高数据质量。

• 支持静态和Angular模板。Angular允许您使用TypeScript和编辑器工具，以便您可以静态分析组件。此外，编辑器提供自动完成反馈并检测正在使用的模板类型。

• 可视化构建CLI命令。我们可以使用Angular CLI命令行界面工具来初始化、开发和维护Angular应用程序，直接从命令shell操作。

• 提供出色的功能，如动画、事件处理程序等。Angular可以轻松创建高性能、复杂的编排和动画时间线，并以最少的代码生成直观的API。它还为目标事件配置事件处理程序，执行模板语句并响应事件执行操作。

Q-4. Angular的主要特性是什么？

Angular的顶级特性包括：

• 跨平台应用程序开发。Angular允许您使用现代Web平台为Windows、Mac和Linux构建出色的桌面安装应用程序，并提供类似应用程序的体验。您还可以使用NativeScript、Cordova和Ionic的策略构建移动应用程序。

• 代码拆分。在Angular中，代码拆分通过生成延迟加载模块来实现，这些模块提供自动代码拆分，以便用户可以加载所需的代码并呈现他们请求的视图。为确保模块被延迟加载并分成自己的JavaScript块，不要忘记创建延迟加载路由。

• 动画支持。Angular动画的构建方式允许您使用Angular直观的API，以少量代码创建高性能和复杂的编排。Angular动画功能是使用标准Web动画API构建的，并在支持它的本机浏览器上运行。

• Angular CLI。Angular CLI是一个独特的工具，允许开发人员从命令shell构建、维护和初始化Angular应用程序。没有Angular CLI，您需要投入大量精力从头开始设置Angular应用程序。不仅如此，您还必须添加包定义文件（如package.JSON）和其他一些配置文件。

• 声明式UI。Angular框架使用HTML语言定义应用程序UI——与JavaScript相比，这是一个不太复杂的选择。作为一个声明式平台，您不必花费时间维护程序流程并决定先加载什么和不加载什么。

• 可访问性应用程序。Angular中的可访问性应用程序是一种设计应用程序的方式，以便残疾人士可以访问它。Angular能够构建具有良好可访问性的应用程序。它还使用ARIA属性的属性绑定。

• CDK和Angular Material。CDK是一个独立的包，实现了常见的交互模式并为Web构建出色的组件。它用于需要获得Angular Material优势而不采用Material Design视觉语言的项目，并代表核心功能的抽象，而不具有特定于Material Design的样式。

• 差异加载。Angular开发中的差异加载意味着将新代码发送到较新的浏览器，将稳定的旧代码发送到旧浏览器，这有助于您翻译两件事：现代语法和polyfills。

• 高速和最佳性能。Angular开发附带的延迟加载功能有助于提高应用程序的性能，并允许仅在需要时加载模块，从而避免重复加载文件。

Q-5. Angular的重要基础是什么？

Angular具有许多特性，使其成为与其他前端框架相比最流行和最有用的框架之一。Angular的这些特性包括：

• 组件。Angular组件被称为基本的UI构建块，属于NgModule并使其可用于其他组件。使用组件功能开发的应用程序包含与模板关联的Angular组件树。

• Angular元素。Angular元素是称为Web组件的Angular组件，这是一种基于HTML以框架无关的方式识别新元素的Web标准。

• 指令。Angular指令是类，当涉及到Angular应用程序时，它们为元素添加更多行为。使用Angular的内置指令，您可以管理表单、列表、样式和用户看到的所有其他内容。

• 本机移动开发。Angular还支持本机移动开发，并允许您通过实施Cordova、Ionic或NativeScript的策略来构建出色的本机应用程序。

• 模块。Angular模块定义了一个应用程序，并拥有自己的模块化系统，称为NgModule。基本上，它是属于模块的应用程序控制器的容器。

• 依赖注入。Angular依赖项是类在应用程序中执行其功能所需的对象。依赖注入可以称为一种设计模式，其中类从外部源请求依赖项而不是创建它们。这提高了应用程序的灵活性和模块化。

• 模板。简单来说，模板是一种HTML表单，它告诉Angular如何渲染组件并定义其宿主视图。它允许您修改和隐藏整个UI部分作为一个单元。

• 导航或路由。Angular Router允许用户在执行应用程序任务时从一个视图导航到下一个视图。

• 数据绑定。Angular中的数据绑定系统允许应用程序的组件与其他组件共享数据，并在子组件和父组件之间更新值。

• 应用程序引导。Angular中的引导是加载index.html页面、应用程序级模块和应用程序级组件的过程。

• 服务。Angular服务是在应用程序生命周期内实例化一次的对象，并提高了模块化和可重用性，使您的组件变得精简和高效。它是一个广泛的类别，具有应用程序所需的值、函数或功能。

Q-6. Angular中的数据绑定是什么？

数据绑定是Angular开发中最有效的功能之一；它在应用程序UI和显示信息之间建立连接。

交互式软件产品的定义过程变得简单，因为您不需要担心在模板和组件之间拉取或推送数据。如果绑定提供适当的通知并以正确的方式配置，数据值会被修改，并且绑定到数据的元素会自动受到影响。

双向数据绑定、字符串插值、属性绑定和事件绑定是Angular开发附带的数据绑定类型。

Q-7. 什么是DOM？

DOM代表文档对象模型，负责说明网页内容和应用程序架构中所做的修改。其中包含的所有对象都以树的形式管理，以便可以使用API轻松访问、修改和操作。您可以使用Angular指令将应用程序数据绑定到HTML DOM元素的属性。

Q-8. Angular和AngularJS有什么区别？

为了更好地看到Angular和AngularJS之间的差异，我包含了一个比较图表：

Q-9. 解释MVVM架构

MVVM架构在避免组件之间的紧密耦合方面发挥着重要作用。此架构包括三个主要部分：

• Model。Model包含具有业务逻辑的实体结构，包括存储库、模型类以及本地和远程数据源。简而言之，它表示特定应用程序的业务逻辑和数据。
• View。View是应用程序的可视层，包括UI代码。它将用户的操作发送到ViewModel。
• ViewModel。ViewModel抽象层是View和Model之间的桥梁。两者通过数据绑定链接，并对Model进行所有必要的更改。

Q-10. Angular中的指令是什么？

指令是允许用户根据其应用程序编写新HTML语法的属性。当Angular编译器在DOM中遇到它们时，会执行其语法。Angular主要支持结构指令、属性指令和组件指令。

Q-11. 什么是Angular CLI？

Angular命令行界面（CLI）工具允许您从命令shell构建、维护和初始化Angular应用程序。Angular支持CLI工具，允许开发人员添加组件、执行测试和许多其他此类操作，有助于使Angular开发工作流程更加轻松和快速。Angular CLI还有助于节省安装基本依赖项所需的时间。

Q-12. 解释依赖注入

在Angular中，依赖注入是一种软件设计约定，其中类从外部源请求依赖项而不创建它们。它允许Angular提高应用程序的灵活性和模块化，因为它使用设计模式来满足这些依赖项并在不同服务之间分配任务。

我们可以说依赖注入已集成到Angular框架中，因此客户端不需要创建依赖对象——而是由注入器创建它们。

Angular注入器负责构建新组件、解决依赖项并将它们提供给需要它的其他组件。基本上，它是一个服务，具有应用程序中各种指令和组件所需的功能。

Q-13. 解释Angular身份验证和授权

对于每个涉及安全的系统，身份验证和授权是系统中非常重要的过程。Angular也不例外。

用户凭据被提供给服务器上可用的身份验证API。身份验证允许用户访问系统中的某些资源。只有当您的应用程序对用户进行身份验证并从Auth0接收访问令牌时，用户才被允许将令牌作为凭据访问您的API。

Q-14. 什么是HTTP拦截器？

拦截器是一个流行术语，指的是在将请求发送到服务器之前接受请求的函数。如果您想以相同的方式预处理多种类型的请求，那么可以使用拦截器。例如，您需要为系统接收的每个请求设置授权头令牌，如下所示：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// token.interceptor.ts
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authToken = localStorage.getItem('authToken');
    
    if (authToken) {
      request = request.clone({
        setHeaders: {
          Authorization: authToken
        }
      });
    }
    
    return next.handle(request);
  }
}

并在模块提供程序中注册拦截器作为单例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { TokenInterceptor } from './token.interceptor';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: TokenInterceptor,
    multi: true // < - - - - 可以注册拦截器数组
  }]
})
export class AppModule {}

Q-15. Angular中的服务器端渲染是什么？

有时，如果您有一个具有丰富功能和巨大包大小的