Angular 2 面试题

AngularJS是一个构建大型高性能Web应用程序的框架，同时保持易于维护。以下是AngularJS框架的功能。

• 组件− 早期版本的Angular专注于控制器，但现在已将重点转向使用组件而不是控制器。组件有助于将应用程序构建成许多模块。这有助于在一段时间内更好地维护应用程序。

• TypeScript− 新版本的Angular基于TypeScript。这是JavaScript的超集，由微软维护。

• 服务− 服务是一组可以由应用程序的不同组件共享的代码。例如，如果您有一个从数据库中获取数据的数据库组件，您可以将其作为共享服务，可以在多个应用程序中使用。

Angular 2 包含以下组件：

• 模块− 用于将应用程序分解成逻辑代码块。每个代码块或模块都设计用于执行单个任务。

• 组件− 用于将模块组合在一起。

• 模板− 用于定义AngularJS应用程序的视图。

• 元数据− 用于向AngularJS类添加更多数据。

• 服务− 用于创建可以在整个应用程序中共享的组件。

在AngularJS中使用模块可以在应用程序中设置逻辑边界。因此，您可以将所有内容构建到单独的模块中以分离应用程序的功能，而不是将所有内容都编码到一个应用程序中。一个模块由以下部分组成：

• 引导数组− 用于告诉AngularJS需要加载哪些组件才能访问其功能。将组件包含在引导数组中后，需要声明它们才能在AngularJS应用程序中的其他组件中使用。

• 导出数组− 用于导出组件、指令和管道，然后可以在其他模块中使用。

• 导入数组− 与导出数组一样，导入数组可用于从其他AngularJS模块导入功能。

每个应用程序都包含组件。每个组件都是应用程序功能的逻辑边界。您需要分层服务，这些服务用于在组件之间共享功能。以下是组件的结构。组件包含：

• 类− 这类似于包含属性和方法的C或Java类。

• 元数据− 用于修饰类并扩展类功能。

• 模板− 用于定义在应用程序中显示的HTML视图。

指令是用于扩展HTML功能的自定义HTML元素。Angular 2具有以下作为BrowserModule模块一部分调用的指令。

• ngIf−

  ngif元素用于在表达式计算结果为true时将元素添加到HTML代码中，否则不会将元素添加到HTML代码中。

  语法

  *ngIf = 'expression' 
  

  如果表达式计算结果为true，则添加相应的元素，否则不添加元素。

• ngFor−

  ngFor元素用于根据For循环条件添加元素。

  语法

  *ngFor = 'let variable of variablelist' 
  

  变量是一个临时变量，用于显示variablelist中的值。

Angular 2 应用程序可以选择错误处理。这是通过包含ReactJS catch库然后使用catch函数来完成的。

• catch函数包含指向错误处理函数的链接。

• 在错误处理函数中，我们将错误发送到控制台。我们还将错误抛回主程序，以便可以继续执行。

• 现在，每当您遇到错误时，它都将被重定向到浏览器的错误控制台。

路由有助于根据用户在主页上选择的选项将用户定向到不同的页面。因此，根据他们选择的选项，将向用户呈现所需的Angular组件。

命令行界面 (CLI) 可用于创建 AngularJS 应用程序。它还有助于为应用程序创建单元测试和端到端测试。

依赖注入是在运行时添加组件功能的能力。让我们来看一个示例和实现依赖注入的步骤。

步骤 1− 创建一个单独的类，该类具有可注入装饰器。可注入装饰器允许在任何AngularJS模块中注入和使用此类的功能。

@Injectable() 
   export class classname {  
}

步骤 2− 接下来，在您的appComponent模块或您想要使用该服务的模块中，需要在@Component装饰器中将其定义为提供程序。

@Component ({  
   providers : [classname] 
})

此文件用于提供有关AngularJS项目使用的TypeScript的选项。

{ 
   "compilerOptions": { 
      "target": "es5", 
      "module": "commonjs", 
      "moduleResolution": "node", 
      "sourceMap": true, 
      "emitDecoratorMetadata": true, 
      "experimentalDecorators": true, 
      "lib": [ "es2015", "dom" ], 
      "noImplicitAny": true, 
      "suppressImplicitAnyIndexErrors": true 
   } 
}

以下是一些关于上述代码的关键点。

• 编译的目标是es5，这是因为大多数浏览器只能理解ES5 typescript。

• sourceMap选项用于生成Map文件，这在调试时非常有用。因此，在开发过程中最好将其设置为true。

• AngularJS装饰器需要“emitDecoratorMetadata”: true和“experimentalDecorators”: true。如果没有，AngularJS应用程序将无法编译。

此文件包含有关Angular 2项目的信息。以下是文件中典型的设置。

{ 
   "name": "angular-quickstart", 
   "version": "1.0.0", 
   "description": "QuickStart package.json from the documentation, 
      supplemented with testing support", 
   
   "scripts": { 
      "build": "tsc -p src/", 
      "build:watch": "tsc -p src/ -w", 
      "build:e2e": "tsc -p e2e/", 
      "serve": "lite-server -c=bs-config.json", 
      "serve:e2e": "lite-server -c=bs-config.e2e.json", 
      "prestart": "npm run build", 
      "start": "concurrently \"npm run build:watch\" \"npm run serve\"", 
      "pree2e": "npm run build:e2e", 
      "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --killothers --success first", 
      "preprotractor": "webdriver-manager update", 
      "protractor": "protractor protractor.config.js", 
      "pretest": "npm run build", 
      "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"", 
      "pretest:once": "npm run build", 
      "test:once": "karma start karma.conf.js --single-run", 
      "lint": "tslint ./src/**/*.ts -t verbose" 
   }, 
  
   "keywords": [], 
   "author": "", 
   "license": "MIT", 
   "dependencies": { 
      "@angular/common": "<2.4.0", 
      "@angular/compiler": "<2.4.0", 
      "@angular/core": "<2.4.0",
      "@angular/forms": "<2.4.0", 
      "@angular/http": "<2.4.0", 
      "@angular/platform-browser": "<2.4.0", 
      "@angular/platform-browser-dynamic": "<2.4.0", 
      "@angular/router": "<3.4.0",  
      "angular-in-memory-web-api": <0.2.4", 
      "systemjs": "0.19.40", 
      "core-js": "^2.4.1", 
      "rxjs": "5.0.1", 
      "zone.js": "^0.7.4" 
   }, 
  
   "devDependencies": { 
      "concurrently": "^3.2.0", 
      "lite-server": "^2.2.2", 
      "typescript": "<2.0.10",  
      "canonical-path": "0.0.2", 
      "tslint": "^3.15.1", 
      "lodash": "^4.16.4", 
      "jasmine-core": "<2.4.1", 
      "karma": "^1.3.0", 
      "karma-chrome-launcher": "^2.0.0", 
      "karma-cli": "^1.0.1", 
      "karma-jasmine": "^1.0.2", 
      "karma-jasmine-html-reporter": "^0.2.2", 
      "protractor": <4.0.14", 
      "rimraf": "^2.5.4",  
      "@types/node": "^6.0.46", 
      "@types/jasmine": "2.5.36" 
   }, 
   "repository": {} 
}

关于上述代码的一些关键点：

• 依赖项有两种类型，第一种是依赖项，然后是开发依赖项。开发依赖项在开发过程中需要，其他依赖项则需要运行应用程序。

• “build:watch”: “tsc -p src/ -w”命令用于通过查找typescript文件的更改在后台编译typescript。

此文件包含AngularJS应用程序所需的系统文件。这将加载所有必要的脚本文件，而无需向html页面添加脚本标记。典型文件将包含以下代码。

/** 
 * System configuration for Angular samples 
 * Adjust as necessary for your application needs. 
*/ 
(function (global) { 
   System.config({ 
      paths: { 
         // paths serve as alias 
         'npm:': 'node_modules/' 
      }, 
      
      // map tells the System loader where to look for things 
      map: { 
         // our app is within the app folder 
         app: 'app',  
         
         // angular bundles 
         '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
         '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
         '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
         '@angular/platform-browser': 'npm:@angular/platformbrowser/bundles/platform-browser.umd.js', 
         '@angular/platform-browser-dynamic': 'npm:@angular/platform-browserdynamic/bundles/platform-browser-dynamic.umd.js', 
         '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
         '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
         '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',  
         
         // other libraries 
         'rxjs':  'npm:rxjs', 
         'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/inmemory-web-api.umd.js' 
      }, 
     
      // packages tells the System loader how to load when no filename and/or no extension 
      packages: { 
         app: { 
            defaultExtension: 'js' 
         }, 
         rxjs: { 
            defaultExtension: 'js' 
         } 
      } 
   }); 
})(this); 

关于上述代码的一些关键点：

• “npm:”：'node_modules/' 指示项目中所有npm模块的位置。

• app: 'app' 的映射指示加载所有应用程序文件的位置。

app.module.ts文件中将存在以下代码。

import { NgModule }      from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser';  
import { AppComponent }  from './app.component';  

@NgModule({ 
   imports:      [ BrowserModule ], 
   declarations: [ AppComponent ], 
   bootstrap:    [ AppComponent ] 
}) 
export class AppModule { } 

让我们详细了解每一行代码。

• import语句用于从现有模块导入功能。因此，前3个语句用于将NgModule、BrowserModule和AppComponent模块导入此模块。

• NgModule装饰器用于稍后定义导入、声明和引导选项。

• 对于任何基于Web的Angular应用程序，BrowserModule都是默认必需的。

• bootstrap选项告诉Angular在应用程序中引导哪个组件。

lowercase过滤器用于将输入转换为全小写。

在下面的示例中，我们使用管道字符将lowercase过滤器添加到表达式。在这里，我们添加了lowercase过滤器以使用全小写字母打印学生姓名。

<div> 
   The name of this Tutorial is {{TutorialName}}
  
   The first Topic is {{appList[0] | lowercase}}
 
   The second Topic is {{appList[1] | lowercase}}
 
   The third Topic is {{appList[2]| lowercase}}
 
</div> 

uppercase过滤器用于将输入转换为全大写。

在下面的示例中，我们使用管道字符将uppercase过滤器添加到表达式。在这里，我们添加了uppercase过滤器以使用全大写字母打印学生姓名。

<div> 
   The name of this Tutorial is {{TutorialName}}
  
   The first Topic is {{appList[0] | uppercase}}
 
   The second Topic is {{appList[1] | uppercase}}
 
   The third Topic is {{appList[2]| uppercase}}
 
</div> 

slice过滤器用于从输入字符串中切片数据。

在下面的示例中，我们使用管道字符将slice过滤器添加到表达式。此处将根据起始和结束位置对属性值进行切片。

<div> 
   The name of this Tutorial is {{TutorialName}}
  
   The first Topic is {{appList[0] | slice:1:2}}
 
   The second Topic is {{appList[1] | slice:1:3}}
 
   The third Topic is {{appList[2]| slice:2:3}}
 
</div> 

date过滤器用于将输入字符串转换为日期格式。

在下面的示例中，我们使用管道字符将date过滤器添加到表达式。此处将属性值转换为日期格式。

<div> 
   The date of this Tutorial is {{newdate | date:"MM/dd/yy"}}

</div> 

currency过滤器用于将输入字符串转换为货币格式。

在下面的示例中，我们使用管道字符将currency过滤器添加到表达式。此处将属性值转换为货币格式。

<div> 
   The currency of this Tutorial is {{newValue | currency}}

</div> 

percent过滤器用于将输入字符串转换为百分比格式。

在下面的示例中，我们使用管道字符将percent过滤器添加到表达式。此处将属性值转换为百分比格式。

<div> 
   The percentage of this Tutorial is {{newValue | percent}}

</div> 

当数据绑定属性的值发生更改时，将调用此方法。

在Angular第一次显示数据绑定属性后，只要指令/组件的初始化发生，就会调用它。

这是为了检测和处理Angular无法或不会自行检测的更改。

在Angular将外部内容投影到组件视图之后，将调用此事件。

当 Angular 检查投射到组件中的内容之后，此事件被调用。

当 Angular 初始化组件视图和子视图之后，此事件被调用。

当 Angular 检查组件视图和子视图之后，此事件被调用。

这是清理阶段，发生在 Angular 销毁指令/组件之前。