Angular 8 - 架構

本章讓我們瞭解一下 Angular 框架的架構。

Angular 框架基於四個核心概念，它們分別是：

元件。
帶有資料繫結和指令的模板。
模組。
服務和依賴注入。

元件

Angular 框架架構的核心是Angular 元件。Angular 元件是每個 Angular 應用程式的構建塊。每個 Angular 應用程式都由一個或多個Angular 元件組成。它基本上是一個普通的 JavaScript/TypeScript 類，以及一個 HTML 模板和一個關聯的名稱。

HTML 模板可以訪問其對應的 JavaScript/TypeScript 類中的資料。元件的 HTML 模板可以使用其選擇器的值（名稱）包含其他元件。Angular 元件可以有一個可選的 CSS 樣式與之關聯，並且 HTML 模板也可以訪問 CSS 樣式。

讓我們分析一下我們的ExpenseManager應用程式中的AppComponent元件。AppComponent程式碼如下：

// src/app/app.component.ts 
import { Component } from '@angular/core'; @Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
   title = 'Expense Manager'; 
}

@Component是一個裝飾器，用於將普通的 TypeScript 類轉換為Angular 元件。

app-root是元件的選擇器/名稱，它使用元件裝飾器的selector元資料指定。app-root可以被應用程式根文件src/index.html使用，如下所示

<!doctype html> 
<html lang="en"> 
   <head> 
      <meta charset="utf-8"> 
      <title>ExpenseManager</title> 
      <base href="/"> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <link rel="icon" type="image/x-icon" href="favicon.ico"> 
   </head> 
   <body> 
      <app-root></app-root> 
   </body> 
</html>

app.component.html是與元件關聯的 HTML 模板文件。元件模板使用@Component裝飾器的templateUrl元資料指定。

app.component.css是與元件關聯的 CSS 樣式文件。元件樣式使用@Component裝飾器的styleUrls元資料指定。

AppComponent屬性（title）可以在 HTML 模板中使用，如下所示：

{{ title }}

模板

模板基本上是 HTML 的超集。模板包含 HTML 的所有功能，並提供額外的功能來將元件資料繫結到 HTML 中，以及動態生成 HTML DOM 元素。

模板的核心概念可以分為兩部分，它們分別是：

資料繫結

用於將元件中的資料繫結到模板。

{{ title }}

這裡，title是AppComponent中的一個屬性，它使用插值繫結到模板。

指令

用於包含邏輯以及啟用複雜 HTML DOM 元素的建立。

<p *ngIf="canShow">
   This sectiom will be shown only when the *canShow* propery's value in the corresponding component is *true* </p> 
<p [showToolTip]='tips' />

這裡，ngIf和showToolTip（只是一個例子）是指令。ngIf僅當canShow為真時才建立段落 DOM 元素。同樣，showToolTip是屬性指令，它向段落元素新增工具提示功能。

當用戶將滑鼠懸停在段落上時，將顯示一個工具提示。工具提示的內容來自其對應元件的 tips 屬性。

模組

Angular 模組基本上是相關功能/功能的集合。Angular 模組將多個元件和服務組合在一個上下文中。

例如，與動畫相關的功能可以組合到單個模組中，並且 Angular 已經為與動畫相關的功能提供了一個模組，即BrowserAnimationModule模組。

一個 Angular 應用程式可以擁有任意數量的模組，但只有一個模組可以設定為根模組，它將引導應用程式，然後根據需要呼叫其他模組。模組也可以配置為訪問其他模組的功能。簡而言之，任何模組中的元件都可以訪問任何其他模組中的元件和服務。

下圖描述了模組與其元件之間的互動。

讓我們檢查一下我們的Expense Manager應用程式的根模組。

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; @NgModule({ 
   declarations: [ 
      AppComponent 
   ], 
   imports: [ 
      BrowserModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

這裡，

NgModule裝飾器用於將普通的 TypeScript/JavaScript 類轉換為Angular 模組。
declarations選項用於將元件包含到AppModule模組中。
bootstrap選項用於設定AppModule模組的根元件。
providers選項用於為AppModule模組包含服務。
imports選項用於將其他模組匯入到AppModule模組中。

下圖描述了模組、元件和服務之間的關係

服務

服務是提供非常特定功能的普通 TypeScript/JavaScript 類。服務將執行一項任務並將其執行到最佳狀態。服務的目的是可重用性。與其在元件內部編寫功能，不如將其分離到服務中，這樣也可以在其他元件中使用它。

此外，服務使開發人員能夠組織應用程式的業務邏輯。基本上，元件使用服務來完成自己的工作。依賴注入用於在元件中正確初始化服務，以便元件可以在需要時訪問服務，而無需任何設定。

Angular 應用程式的工作流程

我們已經學習了 Angular 應用程式的核心概念。讓我們看看典型 Angular 應用程式的完整流程。

src/main.ts是 Angular 應用程式的入口點。

src/main.ts 引導 AppModule（src/app.module.ts），它是每個 Angular 應用程式的根模組。

platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err));

AppModule引導AppComponent（src/app.component.ts），它是每個 Angular 應用程式的根元件。

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

這裡，

AppModule透過imports選項載入模組。

AppModule還使用依賴注入 (DI)框架載入所有已註冊的服務。

AppComponent呈現其模板(src/app.component.html)並使用相應的樣式(src/app.component.css)。AppComponent名稱app-root用於將其放置在src/index.html中。

<!doctype html> 
<html lang="en"> 
   <head> 
      <meta charset="utf-8"> 
      <title>ExpenseManager</title> 
      <base href="/"> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <link rel="icon" type="image/x-icon" href="favicon.ico"> 
   </head> 
   <body> 
      <app-root></app-root> 
   </body> 
</html>

AppComponent可以使用應用程式中註冊的任何其他元件。

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

元件透過其模板中指令使用目標元件的選擇器名稱使用其他元件。

<component-selector-name></component-selector-name>

此外，所有已註冊的服務都可透過依賴注入 (DI)框架訪問所有 Angular 元件。

列印頁面