使用Angular CLI建立Service的方法如下。
範例環境：
- Angular CLI: 7.3.9
- Node: 10.15.1
- OS: win32 x64
- Angular: 7.2.16
Angular CLI建立Service的命令為ng generate <service_name>，或簡寫為ng g s <service_name>。<service_name>為要新增的Service名稱。
例如在專案目錄執行ng generate service calculate就會在專案的src/app目錄下產生CalculateServce (calculate.service.ts)。
D:\..\demo>ng generate service calculate
CREATE src/app/calculate.service.spec.ts (348 bytes)
CREATE src/app/calculate.service.ts (138 bytes)
不過習慣上會把Service集中放在src/app目錄下的service目錄，此目錄中都是畫面無關的服務程式。把具有類似功能或目的的程式集中在同個目錄是個良好的程式寫作習慣，會讓程式碼比較好管理。
在src/app中把Service建立在指定目錄的指令為ng generate <path>/<service_name>。<path>為目錄的路徑名稱。
例如下面改在src/app/service目錄建立CalculateServce。
D:\..\demo>ng generate service service/calculate
CREATE src/app/service/calculate.service.spec.ts (348 bytes)
CREATE src/app/service/calculate.service.ts (138 bytes)
那為什麼需要建立Service呢？ 在這之前必須先了解什麼是Angular Component。Angular的Component應該只需負責畫面的呈現，至於其他非關畫面的邏輯如呼叫後端API，資料計算等應該交由Service處理。這樣的好處是讓畫面呈現與其他邏輯分開，程式碼會比較簡潔且好維護。
下面接續「Angular 加法計算頁面簡單範例」，原本是在DemoComponent中直接處理加法計算邏輯，但加法計算與畫面呈現沒什麼關係，所以修改為交由Service處理。
在專案目錄下使用Angular CLI的ng generate service service/calculate指令建立CalculateServce。
D:\..\demo>ng generate service service/calculate
CREATE src/app/service/calculate.service.spec.ts (348 bytes)
CREATE src/app/service/calculate.service.ts (138 bytes)
建立好的專案deom/src/app目錄如下，可以看到新增的service目錄與下面的calculate.service.ts。
demo/src/app
│
├─app-routing.module.ts
├─app.component.css
├─app.component.html
├─app.component.spec.ts
├─app.component.ts
├─app.module.ts
│
├─demo/
│ ├─demo.component.css
│ ├─demo.component.html
│ ├─demo.component.spec.ts
│ └─demo.component.ts
│
└─service/
├─calculate.service.spec.ts
└─calculate.service.ts
開啟calculate.service.ts並在CalculateService裡面新增add(x: number, y: number)方法來處理加法計算，傳入的x與y參數型別為number，修改後內容如下。
CalculateServce (calculate.service.ts)
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class CalculateService {
constructor() { }
/** 計算 x + y */
add(x: number, y: number) { // x, y型態宣告為number
return x + y;
}
}
另外可以看到class名稱前的@Injectable decorator，這裝飾標記讓CalculateService的物件能透過Angular依賴注入(Dependency Injection)至其他類別中使用。
接著開啟DemoComponent把原本計算加法的calculate()邏輯改去呼叫剛新增的CalculateServce.add(...)。使用前必須把CalculateServce的實例以參數傳入constructor()來注入至DemoComponent中來使用，
DemoComponent (demo.component.ts)
import { Component, OnInit } from '@angular/core';
import { CalculateService } from '../service/calculate.service';
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
x = 0;
y = 0;
result = 0;
// 注入CalculateService
constructor(private calculateService: CalculateService) { }
ngOnInit() {
}
/** 計算 x + y */
calculate() {
this.result = this.calculateService.add(this.x, this.y); // 把原本的計算邏輯改為呼叫CalculateService.add(...)
}
}
完成的效果相同，差別在於實際的加法計算邏輯是委任給Service處理。
參考：
沒有留言:
張貼留言