Angular #4 - Services 與 Components[1]

沒錯啦，Angular 也有 Service，本篇將針對其作說明

• 它們也是遵循 ES2015 的 module 產出的類別

  • 因此任何的 Component 都可以使用它們
  • Service 甚至可以儲存靜態的值，或是定義方法在不同的 Component 間達到共用的效果
  • 建立 service 可以透過 Angular CLI 輸入以下指令:

      ng generate service stocks.service

    • 如上，CLI 就會在 src/services 目錄底下建立 service

• 以下是這個 service 的內容:

    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
  
    let stocks: Array<string> = ['AAPL', 'GOOG' ,'FB' ,'AMZN','TWTR'];
    let service: string = 'https://angular2-in-action-api.herokuapp.com';
  
    export interface StockInterface {
      symbol: string;
      lastTradePriceOnly: number;
      change: number;
      changeInPercent: number;
    }
  
    @Injectable({})
    export class StocksService {
  
      constructor(private http: HttpClient) { }
  
      get() {
        return stocks.slice();
      }
  
      add(stock: string) {
        stocks.push(stock);
      }
  
      remove(stock: string) {
        stocks.splice(stocks.indexOf(stock), 1);
      }
  
      load(symbols: Array<string>) {
        if(symbols) {
          return this.http.get<Array<StockInterface>>(service + '/stocks/snapshot?symbols=' + symbols.join());
        }
      }
    }

  • 這個 Service 有以下幾點要留意:
    • 首先，要 import 兩個 module
      • 第一個是 Injectable，它是一個 decorator，後面會再提到它
      • 第二個是 HttpClient，我們會透過它發出 HTTP 請求
    • 接著我們定義了兩個成員變數:
      • stocks 放的是股票的代號
      • service 是取得上述代號的詳細資訊的 API URL
      • 特別留意這邊用了 let 而非 var
    • 再來定義了一個 interface，這個是為了讓其它的類別存取資料時，可以獲得股票相關的資訊
      • 所有的屬性都給予了型別
      • export 讓外部的類別可以存取
    • 再來是針對 StocksService 所裝飾的 @Injectable
      • 只要是 service 都需要這個 decorator
      • 如果缺了這個 decorator，其它的 Component 將無法注入 service，白話就是不能用它
    • 在建構子的部份注入了 HttpClient 的實體
      • 請留意那個 private，跟 Java 不太一樣
      • 它的型別是 HttpClient，名稱是 http
      • 所有的變數在給予型別的時候都是以 變數名稱:變數型別的格式出現的，所以看到分號就要留意
    • 這個 service 定義了許多方法，要留意的是:
      • 它們回傳的都是一份資料的 copy
      • load 回傳的是一個 Observable，這個後續會再詳談

• 定義好了 Service，還要 import 並註冊它，所以:

  • 回到 app.module.ts，並補上 import 的部份

      import { HttpClientModule } from '@angular/common/http';
      import { StocksService } from './services/stocks.service';

• 接著在 NgModule 提供的資訊中要填上以下:

  • imports 的陣列中補上 HttpClientModule，這樣才能使用其內含的 HttpClient

  • providers 的陣列中補上 StockService

  • 完整的 app.module.ts 如下:

      import { BrowserModule } from '@angular/platform-browser';
      import { NgModule } from '@angular/core';
      import { HttpClientModule } from '@angular/common/http';
    
      import { AppRoutingModule } from './app-routing.module';
      import { AppComponent } from './app.component';
      import { StocksService } from './services/stocks.service';
    
      @NgModule({
        declarations: [
          AppComponent
        ],
        imports: [
          BrowserModule,
          AppRoutingModule,
          HttpClientModule
        ],
        providers: [StocksService],
        bootstrap: [AppComponent]
      })
      export class AppModule { }

相信到這裡大家都暈了，小結一下:

• 這部份較為複雜，請大家務必多花點時間看一下
  • 要成為 Service 需要掛上 Injectable
  • Injectable 是一種 Decorator
  • 使用 service 是透過 constructor 注入
  • 但產生這個 service 的實體必須列在 app.module.ts 裡的 providers 陣列中，否則 Angular 並不會產生該 service 的實體