Angular - MVC 架構

本章我們將瞭解 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 元件。

列印頁面