2020-5-29 第8章，Angular 服務

[hsiaofung]

• Injectable 修飾詞 : 它回提示Angular 相依注入統此服務可能有其他相依檔案。加上Injectable修飾詞後Angular 會處理服務的注入。

• StockService : 元件會向服務要資料。由服務決定如何取得資料，無論是透過HTTP呼叫網路服務、本地儲存體或快取、或回傳假資料。後續若要改變來源，我們可以修改這裡而無須更動元件，只要API格式還相同即可。

[hsiaofung]

+服務做了哪些事?(定義了那些服務)

• 我們在StockService的建構元中初始化假股票清單，以一些假資料做為UI繪製時的初始狀態。
• 定義了getStocks()方法回傳目前的股票清單
• createStock 方法不只將股票加入股票清單，它先檢查股票是否存在(使用股票的code檢查是否重複)，若有重複則直接離開。若無重複則將傳入的股票加入股票清單。
• toggleFavoraite 找出陣列中傳入的股票並切換favorite的狀態。

[hsiaofung]

• 服務注入元件前必須定義服務如何提供與在什麼層級?
  • 例如: 可以在StockListComponent層級、AppComponrnt層級、或AppModule層級定義。
  • 登記在模組層級表示模組中的任何元件，都會取得同一個注入的實例。

[hsiaofung]

• 相依注入
• RxJS與可觀察 : 非同步操作

[hsiaofung]

• 必須在app.modules.ts 中匯入 StockService，
• 並寫在providers中(登記StockService)

[hsiaofung]

• 總結目前已經完成的:
  • 我們建構StockListComponent以顯示股票。
  • 我們建構StockService做為所有元件的後台，提供取得與新建股票的API。目前使用假資料。
  • 我們稍微修改元件以整合服務。

[hsiaofung]

• 什麼是Angular 服務(AngularService)
• 如何建構
• 如何在Angular應用程式中使用。

[hsiaofung]

什麼是相依注入?

• 每個服務必須在注入程序中登記為provider，然後其他類別可檢查此服務而由注入程序負責提供。

[hsiaofung]

• 我們要做什麼?
  • 加入MessageService服務。它在UI顯示訊息並做為跨服務溝通機制。
  • 在CreateStockComponent與AppComponent中引用並使用MessageService。

[hsiaofung]

• 將服務注入建構元。

[hsiaofung]

服務是個鏈，可以在根注入(provider)服務，或在元件層注入服務，會以最先進的服務找起，一路往上。

• 類似你把服務關掉，不再往上傳。改變的影響只到你指定的範圍。

• 通常你只會在根層級登記你的服務。但有時候你會想要使用Angular 注入程序的這個功能，例如:

  • 你想要限制服務給特定元件與模組，以確保修改服務不會影響整個應用程式。
  • 你想要不同的元件使用不同的服務，這在覆寫或使用不同服務實例時很常見。
  • 你想要以特定實作覆寫特定服務。或許想要在特定部分有個相對於一般實作的快取服務。

[hsiaofung]

最後是服務的非同步程式:

• 我們會對伺服器發出股票清單請求，然後等到伺服器完成請求的處理後收到股票清單。因此股票不是立即取得，而是稍後非同步取得。

[hsiaofung]

步驟:

• 修改StockService 以回傳非同步可觀察，以供整合伺服器時使用。然後修改元件以訂閱這些可觀察，並處理成功或失敗狀況。
• 將stock service 的每個方法的回傳值改成可觀察型別。
• 將回傳值用ObservableOf 運算子轉換成可觀察。
• 修改元件整合服務中新的非同步API。

[hsiaofung]

更簡單的方法:

• 將可觀察儲存為成員變數
• 呼叫並儲存可觀察

public stocks$: Observable<Stock[]>;

// 呼叫並儲存可觀察 this.stocks$ = this.stockService.getStocks();

• 更改模板 " 加入async取代手動訂閱。
  • 在ngFor運算式中使用Pipe。Angular 提供稱為async的管道，它能讓我們連結Observable。然後Angular 負責等待可觀察發出的事件並直接顯示結果，它能讓我們省下手動訂閱可觀察的步驟。
  • 只對直接顯示API回傳資料的狀況有用。但它省下幾行程式。由框架處理大部分的工作。

<app-stock-item *ngFor="let stock of stocks$ | async" [stock]="stock" (toggleFavorite)="onToggleFavorite($event)"> </app-stock-item>

[hsiaofung]

總結:

• 討論了什麼是Angular服務?
• 將擷取資料抽象化
• 封裝應用程式共同邏輯
• 跨元件共用資料
• Angular 相依注入系統與階層相依注入
• Observable如何運作與如何在應用程式中整合可觀察。