个性化阅读
专注于IT技术分析

别错过哦!Angular面试题和答案汇总

Angular面试题

访谈中有关Angular开发人员Angular色的最常见问题列表。在这里, 我们将介绍所有Angular版本的问题。例如, AngularJS, Angular 2, Angular 4, Angular 6, Angular 7和最新版本Angular 8。

1)什么是AngularJS?

AngularJS是一个JavaScript框架, 已使用<script>标签添加到HTML中。它是用JavaScript编写的。它用于通过指令扩展HTML属性, 并使用表达式将数据绑定到HTML。 Angular JS于2010年10月20日由Google首次发布, 并获得了MIT的许可。

了解有关AngularJS的更多信息。


2)AngularJS最重要的功能是什么?

AngularJS最重要的功能是:

  • 模型
  • 视图
  • 控制者
  • 指令
  • 范围
  • 服务
  • 数据绑定
  • 筛选器
  • 可测

3)什么是Angular?

Angular是Google开发和维护的基于TypeScript的开源Web应用程序框架。它是用TypeScript语言编写的。 Angular提供了一种创建响应式单页应用程序的简单, 便捷和强大的方法。这是对AngularJS的完全重写。

了解有关AngularJS的更多信息。


4)Angular有哪些不同版本?

AngularJS是Angular的第一个版本, 也称为Angular1。它于2010年10月20日发布。在该版本之后, Google开发了较新版本的AngularJS, 该版本完全重写了以前的版本。这就是所谓的Angular2。此后, 释放了Angular 4, Angular 6, Angular 7和Angular 8。 Angular 8是其当前版本。

Angular版本:

  • AngularJS
  • Angular2
  • Angular4
  • Angular6
  • Angular7
  • Angular8

5)AngularJS和Angular有什么区别?

Angular JS和Angular之间的主要区别是:

AngularJS Angular
Angular是Angular版本超过2+的通用名称
Angular用TypeScript编写, 后来被编译为JavaScript。
Angular是基于TypeScript的开源全栈Web应用程序框架。
Angular使用组件的层次结构作为其主要的体系结构特征, 而不是范围和控制器。
Angular使用不同的表达式语法。它使用” []”进行属性绑定, 使用”()”进行事件绑定。
微软TypeScript语言的Angular使用, 它提供了基于类的面向对象的编程, 静态键入, 泛型等, 这些都是服务器端编程语言的功能。
Angular支持页面的动态加载。

6)什么是MEAN堆栈开发?

MEAN堆栈是用于开发Web应用程序的基于JavaScript的技术的集合。 MEAN代表MongoDB, ExpressJS, AngularJS和Node.js。它提供基于客户端和服务器的技术以及数据库, 这就是为什么它也称为全栈开发的原因。在这里, Angular用于客户端, Node.js是服务器端JavaScript执行环境, MongoDB是应用程序中使用的数据库。


7)什么是单页应用程序(SPA)?

单页应用程序是Web应用程序或网站, 它可以像台式机应用程序一样为用户提供非常快速和被动的体验。它仅重新加载当前页面, 而不是整个应用程序, 这就是它非常快的原因。


8)Angular中的指令是什么?

在Angular中, 指令是当Angular编译器在Angular DOM中找到指令时执行的函数。指令指定了如何在Angular应用程序中控制组件和业务逻辑。

指令主要有三种:

  • 组件指令
  • 结构指令
  • 属性指令

了解有关AngularJS的更多信息。


9)Angular中的ng-content指令是什么?

ng-content指令是Angular的功能, 可帮助我们制造可重用的组件。

例如:在传统的HTML中, 标记用于编写内容。即<p>这是一个段落</ p>。现在, 请参见以下在Angular标签之间包含自定义文本的示例:

<app-work>直到你使用ng-content指令</ app-work>, 它才能像HTML一样工作

这将与HTML元素不同。为了使其像上面的HTML示例一样工作, 我们需要使用ng-content指令。


10)Angular中有哪些组件?

组件是Angular的关键功能。它们是Angular应用程序的主要构建块。Angular组件使你的复杂应用程序成为可重用的部分, 你可以非常轻松地重用它们。

你可以使用Angular CLI轻松创建组件。

语法

ng generate component component_name  
Or  
ng g c component_name

了解有关Angular组件的更多信息:了解更多


11)什么是Angular中的数据绑定?

在Angular中, 数据绑定是模型和视图组件之间的数据自动同步。双向数据绑定是Angular非常流行和强大的功能, 它在Angular应用程序的视图和业务逻辑之间建立了桥梁。


12)什么是Angular CLI?

Angular CLI是Angular的命令行界面。它有助于你创建应用程序和不同的组件。

安装Angular CLI:

要安装最新版本的Angular CLI, 请运行以下npm命令。

npm install @angular/cli@latest

要创建一个应用程序:

ng new命令用于在Angular中创建新的应用程序。

语法

ng new application_name

要创建组件路线, 服务和管道:

ng generate命令用于在应用程序中创建新的组件, 路由, 服务和管道。

语法

ng new component_name

要测试你的应用在本地运行:

ng serve命令用于在开发过程中本地测试你的应用程序。

语法

ng serve

13)绘制Angular Architecture的示意图。

Angular面试题1

Angular Architecture的基本构建块

  • 模块:每个Angular应用程序都有一个称为AppModule的根模块。它提供了启动机制来启动应用程序。
  • 组件:每个应用程序都有至少一个称为根组件的组件, 该组件将组件层次结构与页面文档对象模型(DOM)连接起来。
  • 指令:指令提供程序逻辑和构建标记以连接到你的数据和DOM。
  • 数据绑定(属性绑定+事件绑定):事件绑定和属性绑定都用于在Angular应用中提供双向数据绑定。
  • 服务:将为与特定视图无关的数据或逻辑创建服务类, 并且你希望在组件之间共享。
  • 依赖项注入:依赖项注入用于保持复合类的精简和高效。
  • 路由:Angular路由用于定义不同应用程序状态之间的导航路径, 并查看应用程序中的层次结构。

14)什么是Angular中的元数据?

在Angular中, 组件和服务只是带有装饰器的类, 这些装饰器标记了它们的类型并提供了告诉Angular如何使用它们的元数据。因此, 元数据用于装饰类以配置该类的预期行为。


15)什么是Angular中的编译? Angular中使用什么类型的编译?

Angular应用程序是用TypeScript和HTML编写的。它们的组件和模板必须由Angular编译器转换为可执行的JavaScript。 Angular中有两种编译类型:

即时(JIT)编译:这是一种标准的开发方法, 可在应用程序加载时在运行时在浏览器中编译我们的Typescript和html文件。它很棒, 但也有缺点。由于浏览器内的编译步骤, 视图需要更长的渲染时间。应用程序的大小会增加, 因为它包含不需要的Angular编译器和其他库代码。

提前(AOT)编译:使用AOT, 编译器在构建时运行, 浏览器仅下载应用程序的预编译版本。浏览器加载可执行代码, 因此它可以立即呈现应用程序, 而无需等待首先编译应用程序。该编译比JIT更好, 因为它具有快速呈现, 较小的应用程序大小, 安全性和更早地检测模板错误的优点。


16)Angular和React有什么区别?

Angular和React都与JavaScript相关, 但是它们之间有很多区别。查看Angular和React之间的主要区别:

  • Angular是一个JavaScript框架, 而React是一个JavaScript库。
  • Angular用TypeScript编写, 而React用JavaScript编写。
  • Angular由Google开发和维护, 而React由Facebook开发和维护。
  • Angular的第一个版本是AngularJS, 于2010年发布, 而React的第一个版本于2013年发布。
  • Angular是一个完整的MVC(模型, 视图和控制器)框架, 而React是一个简单的JavaScript库。它只是View模型。
  • Angular使用常规的DOM来更新HTML标签的整个树结构, 这就是为什么它比Angular相对慢的原因, 而React使用虚拟的DOM使其变得惊人的快。这是React的最大特色。
  • Angular提供双向数据绑定, 而React提供单向数据绑定。
  • Angular易于扩展, 而React比Angular更可扩展。
  • 与旧技术相比, Angular速度更快, 但React比Angular更快。

进一步了解Angular vs React:了解更多


17)什么是AngularJS表达式?

AngularJS表达式写在双括号{{expressions}}或指令中:ng-bind =” expression”。 AngularJS表达式就像JavaScript表达式一样, 可以包含文字, 运算符和变量。例如{{5 + 5}}或{{firstName +”” + lastName}}

范例:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>

18)Angular表达式和JavaScript表达式之间的主要区别是什么?

Angular表达式类似于JavaScript表达式, 但是它们之间存在区别, 因为Angular表达式是根据范围对象评估的, 而JavaScript表达式是针对全局窗口对象评估的。


19)Angular中的服务是什么?

在Angular中, 服务用于为各种模块提供通用功能。通过允许你从组件中提取常用功能, 服务可以为你的应用程序提供更好的模块化。

让我们看看如何创建可在多个组件之间使用的服务。在这里, 服务名称是EgService。

范例:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
@Injectable({ // The Injectable decorator is required for dependency injection to work
  // providedIn option registers the service with a specific NgModule
  providedIn: 'root', // This declares the service with the root app (AppModule)
})
export class EgService{
  constructor(private http: Http){
  }
  fetchAll(){
  return this.http.get('https://xyz.c.om');
  }
}

上面的服务使用Http服务作为依赖项。


20)什么是Angular中的依赖项注入(DI)?

依赖注入(DI)是重要的应用程序设计模式。在DI中, 一个类要求从外部来源获取依赖关系, 而不是自己创建它们。 Angular有自己的依赖性注入框架来解决依赖性。因此, 你的服务依赖于整个应用程序中的其他服务。


21)Angular中ngFor指令的用途是什么?

模板中使用Angular ngFor指令来显示列表中的每个项目。例如, 在这里我们遍历用户列表,

<li *ngFor="let user of users">
  {{ user }}
</li>

ngFor双引号指令中的用户变量是模板输入变量。


22)ngIf指令的用途是什么?

当你仅想在特定情况下显示视图或视图的一部分时, 使用Angular ngIf指令。 Angular ngIf指令用于根据true / false条件插入或删除元素。

让我们举一个例子来显示一条消息, 如果用户年龄小于18岁,

<p *ngIf="user.age > 18">You are not eligible for this movie ticket!</p>

注意:Angular不会显示和隐藏消息。它正在从DOM中添加和删除段落元素。这样可以提高性能, 尤其是在具有许多数据绑定的大型项目中。


23)Angular中的插值是什么?

Angular是属性绑定的便捷替代方法。 Angular转换为属性绑定是一种特殊的语法。内插用双花括号({{}})表示。花括号之间的文本通常是组件属性的名称。 Angular用相应组件属性的字符串值替换该名称。让我们举个例子

<h3>
  {{title}}
  <img src="{{url}}" style="height:30px">
</h3>

在上面的示例中, Angular评估title和url属性并填充空白, 首先显示粗体的应用程序标题, 然后显示URL。


24)Angular中的模板表达式是什么?

模板表达式的值类似于任何JavaScript表达式。 Angular执行该表达式并将其分配给绑定目标的属性。目标可能是HTML元素, 组件或指令。在属性绑定中, 与[property] =” expression”一样, 模板表达式在=符号右侧的引号中显示。在插值语法中, 模板表达式用双花括号包围。例如, 在下面的插值中, 模板表达式为{{username}},

<h3>{{username}}, welcome to Angular</h3>

模板表达式中禁止使用以下JavaScript表达式。

assignments (=, +=, -=, ...)
new
chaining expressions with ; or , increment and decrement operators (++ and --)

工作/人力资源面试问题
jQuery面试问题
Java OOP面试问题
JSP面试问题
休眠面试问题
SQL面试题
Android面试题
MySQL面试问题

AngularJS是Angular1.0第一版的通用名称。

AngularJS用JavaScript编写。

AngularJS是基于JavaScript的开源前端Web框架。

AngularJS使用范围或控制器的概念。

AngularJS具有简单的语法, 并且与源位置一起在HTML页面上使用。

AngularJS是一个简单的JavaScript文件, 可与HTML页面一起使用, 不支持服务器端编程语言的功能。

AngularJS不支持页面的动态加载。

面试技巧

JavaScript面试问题

Java基础面试问题

Servlet面试问题

春季面试问题

PL / SQL面试问题

Oracle面试问题

SQL Server面试问题

赞(0) 打赏
未经允许不得转载:srcmini » 别错过哦!Angular面试题和答案汇总
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏