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 銷燬指令/元件之前。