快訊!我的新書登上天瓏網路書店11月份暢銷榜第一名啦!看過的都說讚!歡迎大家前往訂購!
>>>> AI 職場超神助手:ChatGPT 與生成式 AI 一鍵搞定工作難題 <<<<

[功能介紹-1] Angular架構

Angular是一個框架,用來編寫html的應用程式,可以用javascript或typescript去編寫。

下圖是官網上所繪製的Angular架構圖:

首先先看最中間那一塊,是由template、metadata、component所構成的,這三個是一個component必備的元素。
所謂的元件可以看之前創建hero那篇文章,我們可以用下面指令創一個元件

ng generate component selectSystem

創完一個元件後,可以看見下面這些檔案

Templates

裡面的component.html檔就是template,它看起來像是一個html的檔案,可以在裡面用資料綁定與事件綁定與controller裡的物件做繫結。
下面是一個template的範例:

<h2>Hero List</h2>

<p><i>Pick a hero from the list</i></p>
<ul>
  <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
    {{hero.name}}
  </li>
</ul>

<app-hero-detail *ngIf="selectedHero" &#91;hero&#93;="selectedHero"></app-hero-detail>

可以注意到上面有些地方與一般的html不相同,例如像是*ngFor、{{hero.name}}、(click)="selectHero(hero)"等…
這就是架構圖畫面上用來連繫Component以及Template的兩個箭頭,property binding以及event binding。

例如click事件繫結是(click)=’functionName()’,物件繫結可以用{{data}})。
透過這樣的繫結可以讓template將使用者操作的事件傳給component,component也可以將資料的更動即時的反饋到template所顯示的資料上。

下圖是非常清楚的binding類型列圖

<li>{{hero.name}}</li>
<app-hero-detail &#91;hero&#93;="selectedHero"></app-hero-detail>
<li (click)="selectHero(hero)"></li>

其中{{hero.name}}為值繫結,可以綁定component裡的值。
[hero]="selectedHero"為property binding,可以將某個元件裡的變數塞進一個HTML元素的屬性裡。。
(click)="selectHero(hero)" event binding可以呼叫component裡的function

<input &#91;(ngModel)&#93;="hero.name">

這個則是雙向數據綁定,在雙向綁定中,與屬性綁定一樣,數據屬性值將從組件輸入到輸入框中。用戶的更改也會返回到組件,將屬性重置為最新值,就像事件綁定一樣。

數據綁定在模板及其組件之間的通信中起著重要的作用。

數據綁定對於父組件和子組件之間的通信也很重要。

Component

而component.ts檔則是component內容,裡面會有一些屬性或方法來供template呼叫,下面是一個Component的簡單範例:

export class HeroListComponent implements OnInit {
  heroes: Hero[];
  selectedHero: Hero;

  constructor(private service: HeroService) { }

  ngOnInit() {
    this.heroes = this.service.getHeroes();
  }

  selectHero(hero: Hero) { this.selectedHero = hero; }
}

當用戶在應用程序中切換畫面時,Angular會創建,更新和銷毀組件。你的應用程序可以通過可選參加這個生命週期的每個時刻動作的lifecycle hooks,像ngOnInit()。

Metadata

metadata則是在component.ts裡由@Component開頭的區塊來宣告,裡面會定義這個Component在要如何在別的元件的template裡被引用,templateUrl則是定義自己這個元件要顯示的html模版位置及styleUrls是css檔案位置。
例如下面這個metadata宣告
@Component({
selector: ‘app-heroes’,
templateUrl: ‘./heroes.component.html’,
styleUrls: [‘./heroes.component.css’]
})
就可以用下面的方式來顯示這個元件

<app-heroes></app-heroes>

Modules

接著來介紹左上方的區塊

Angular應用程序是模組化的,Angular稱自己為NgModules的模組化系統。NgModules是一個很大的議題,在後面會有另一篇文章專門介紹ngModules。
一個小的application至少會有一個模組,稱為root module。雖然有些小的專案可能就只有一個模組,但大多大的專案都會有多個模組,稱為feature modules,一個模組內會是相同工作範疇的一組元件,它們有許多工作流程或功能上緊密相關,彼此協同運作。
當我們執行了這樣的指令來創建一個新的專案時

ng new my-app

可以看到src/app資料夾內有app.module.ts這個檔案,這個檔案就是angular預設的根模組。
其內容如下:
import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
一個NgModule,無論是root module還是feature modules,該class裡一定會有@ngModule的宣告區域,在angular裡會有許多@開頭的宣告,這樣的宣告稱為decorator,可以在元件或模組裡設定許多metadata。關於ngModule更多說明可以看@NgModule的說明關於decorators更多的說明則可以看這邊,這兩項之後都會有專門的文章來介紹。

NgModule是一個用來描述這個模組裡有那些component的metadata,是一個decorator function。
在ngModule裡最重要的屬性有下面這五點:

  • declarations:屬於這個模組的成員。Angular有三種成員:components, directives,以及pipes。
  • exports:要將declarations宣告的那一些成員公開。讓其他模組引用此模組時,可以存取該成員的public function。
  • imports:需引用的模組,所有在這個模組內的元件要引用的模組都要在此宣告
  • providers:要引用的Service需在此宣告
  • bootstrap:這個屬性只有根模組需要設定,在此設定在一開始要顯示的application view

註:上面的範例中,因為有設定bootstrap代表其為一個根組件,而根組件是不需要exports出去的,因為不會有任何其他modules需要用到它。

而要啟動整個應用程序可以在main.ts中加上這段
import { enableProdMode } from ‘@angular/core’;
import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;

import { AppModule } from ‘./app/app.module’;
import { environment } from ‘./environments/environment’;

if (environment.production) {
enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);//用這個指令來啟動root modules

在js裡我們透過export一個class來供其他modules使用。並在其他js檔案利用import來將這個class引入。

export class AppModule { }
import { NgModule }     from '@angular/core';
import { AppComponent } from './app.component';

NgModules與JavaScript modules是完全不同的兩樣東西,我們可以同時透過ngModule與JS Modules來交互使用以達成我們所需要達成的目的。

詳細了解Web上的JavaScript模組系統

Angular libraries


angular內建了許多可供應用的模組,我們稱為library module。
所有的library module都以@angular為前綴開頭,可以使用npm來安裝管理它們。
例如要使用Component功能要引用@angular/core的Component

import { Component } from '@angular/core';

或是使用BrowserModule

import { BrowserModule } from '@angular/platform-browser';

Directives


在架構圖中的template右邊,可以看到有一個directive指向template。directive是透過Angular使用內建或自訂directive用來自己定義html元素,並簡化dom操作的功能。可以讓template裡去使用。
一個directive會由@Directive來宣告。其實directive與component的本質是相同的,只是component是一個有template的directive,而directive沒有。我們可以視component為directive的擴展,擴展了template的功能。不過因為component在angular是非常重要的,和directive有不同的意義,因此會將component以及directive在架構上分開來。

directives分為架構型的和屬性型的:
下面是兩個內建架構型的directive範例

<li *ngFor="let hero of heroes"></li>
<app-hero-detail *ngIf="selectedHero"></app-hero-detail>

*ngFor 會讓angular重覆寫許多的 <li>將heroes裡的資料跑過一圈
*ngIf 則會讓angular只有在selectedHero的值為true時才會顯示app-hero-detail元件
而屬性型的directive則例如像是做雙向繫結的ngModel,下面的片段程式會將hero.name的值塞入input的value屬性內,並且監聽使用者修改input的值的事件將修改傳回至hero.name

<input &#91;(ngModel)&#93;="hero.name">

Services


架構圖的左下區是很多的Service注入至Component裡。幾乎所有功能都可以是service,但是它應該是目的明確且狹義的功能。
例如:記錄服務、數據服務、消息服務、稅計算器、應用程序配置等…

以下是一個範例,在這個例子中可以看到我們可以利用getHeroes()和service取得Hero列表,而Service則負責與Backend溝通由API取得資料並且回傳給component

export class HeroService {
  private heroes: Hero[] = [];

  constructor(
    private backend: BackendService,
    private logger: Logger) { }

  getHeroes() {
    this.backend.getAll(Hero).then( (heroes: Hero[]) => {
      this.logger.log(`Fetched ${heroes.length} heroes.`);
      this.heroes.push(...heroes); // fill cache
    });
    return this.heroes;
  }
}

Dependency injection

依賴注入是一種設計模式,可參考這篇文章了解:理解 Dependency Injection 實作原理
在Angular中,大多數依賴是服務,Angular的元件使用依賴注入為自己提供他們需要的服務,對於元件來說,服務必須是完全依賴的,component會在元件內使用service所提供的方法來取得自己所需的資料。

HeroService依賴注入的過程看起來像這樣:

injector會有一個所有Service的集合。如果所需要的Service不在這個集合中,那麼injector將創建一個Service並加進Service集合裡。當component所需要的Service都已經取得後,只要在constructor設定該服務在此元件內的名稱,就可以在元件裡自由的使用服務了。

下面是一個依賴注入的範例

constructor(private service: HeroService) { }

例如上面的程式碼就會讓該component裡的程式碼可以使用service.getHeroes()來取得英雄列表。

在上圖中,上面要被injector選擇的那些service是怎麼來的呢?我們可在根模組或者自己所在的模組裡去提供所有需用到的服務,這樣在這個模組內的所有元件都可以使用這個服務,如下:
src / app / app.module.ts

providers: [
  BackendService,
  HeroService,
  Logger
],

或者也可以在該元件的metadata裡用providers來設定這個元件要使用這個服務,如下:

@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})

參考資料


17年資歷女工程師,專精於動畫、影像辨識以及即時串流程式開發。經常組織活動,邀請優秀的女性分享她們的技術專長,並在眾多場合分享自己的技術知識,也活躍於非營利組織,辦理活動來支持特殊兒及其家庭。期待用技術改變世界。

如果你認同我或想支持我的努力,歡迎請我喝一杯咖啡!讓我更有動力分享知識!