快速入門Angular(二)：依賴注入@injectable 與 provider

發表於 2019-06-14 更新於 2021-06-12 分類於程式語言，前端 Disqus：

了解@injectable 與 provider之間的關係

前言

若不熟悉依賴注入、控制反轉…這些名詞，可以參考我的另一篇簡單介紹依賴注入、控制反轉
先對他有基本認識，會比較容易理解為什麼Angular會採用依賴注入

	@injectable	provider
中文意思	可被注入的	提供者
使用位置	是一裝飾器，寫在service上	是ngModule或Component傳入參數
主要功能	用以標記此class具有依賴注入的特性	傳入模組，做為該模組的公用函數
補充說明	由於只有service會使用依賴注入，也就是只有service才會打上此裝飾器	通常寫在ngModule就好。若是Component間不想要共用，需要各自實例化自己的service避免干擾，則寫在Component的provider裡面

寫ngModule或component都會有跟自己名字相似的裝飾器
但service卻沒有@service裝飾器？其實就是@injectable
畢竟service主要功能是當要使用時才注入，用injectable(可被注入的)字眼可以更形象地表達他的用途！

@Injectable({
  providedIn: 'root',
})

這是在Angular 6中新加入的功能

大部份情況下，providedIn直接寫'root'就好，Angular會自動判斷該打包到哪裡
只有真正使用此service的才會注入進去，未使用到的部份會搖樹優化(tree-shaking)掉

在providedIn出現之前，service通常是直接寫在ngModule中來注入，就會造成大量的服務打包進去