天天看點

如何建立 Angular 庫并在 Angular 應用裡調用

把功能打包成庫會強迫庫中的工件與應用的業務邏輯分離。這有助于避免各種不良實踐或架構失誤,這些失誤會導緻将來很難解耦和複用代碼。

把代碼放到一個單獨的庫中比簡單地把所有内容都放在一個應用中要複雜得多。它需要更多的時間投入,并且需要管理、維護和更新這個庫。不過,當把該庫用在多個應用中時,這種複雜性就會得到回報。

Angular 庫是一個 Angular 項目,它與應用的不同之處在于它本身是不能運作的。必須在某個應用中導入庫并使用它。

使用下面的指令行,建立一個庫:

ng generate library my-lib

如何建立 Angular 庫并在 Angular 應用裡調用

angular.json 檔案在 projects 節點下,多了一個 my-lib 節點,其 projectType 類型為 library:

如何建立 Angular 庫并在 Angular 應用裡調用

angular.json 裡的層級結構和檔案系統的目錄同樣是一緻的:

如何建立 Angular 庫并在 Angular 應用裡調用

這個庫有屬于自己單獨的 package.json:

如何建立 Angular 庫并在 Angular 應用裡調用

這個庫無法單獨運作,那麼如何測試呢?

使用如下指令行。

ng build my-lib --configuration development

ng test my-lib

ng lint my-lib

如何建立 Angular 庫并在 Angular 應用裡調用

要讓庫代碼可以複用,你必須為它定義一個公共的 API。這個“使用者層”定義了庫中消費者的可用内容。該庫的使用者應該可以通過單個的導入路徑來通路公共功能(如 NgModules、服務提供者和工具函數)。

庫的公共 API 是在庫檔案夾下的 public-api.ts 檔案中維護的。當你的庫被導入應用時,從該檔案導出的所有内容都會公開。

下圖是一個例子:

如何建立 Angular 庫并在 Angular 應用裡調用

我的 service 類:

如何建立 Angular 庫并在 Angular 應用裡調用

請使用 NgModule 來暴露這些服務群組件: Use an NgModule to expose services and components.

如何消費我們自己開發的庫

直接在我們的 AppModule 的 imports 區域裡,導入我們的 Angular library 通過 public_api.ts 導出的 component 和 service 即可。

如何建立 Angular 庫并在 Angular 應用裡調用

通過依賴注入,導入我們庫裡導出的 service 類的執行個體:

如何建立 Angular 庫并在 Angular 應用裡調用

運作 Angular 應用,發現我們 Angular 庫裡的 service 列印出的字元串,說明 library 使用成功了:

如何建立 Angular 庫并在 Angular 應用裡調用

如何使用 Angular 已經釋出的庫

這些庫都是作為 npm 包釋出的,它們通常都帶有一些與 Angular CLI 內建好的 schematic。要把可複用的庫代碼內建到應用中,你需要安裝該軟體包并在使用時導入它提供的功能。對于大多數已釋出的 Angular 庫,你可以使用 Angular CLI 的 ng add 指令。

比如 SAP Spartacus 的安裝指令行:

ng add @spartacus/schematics@latest

ng add 指令底層會使用 npm 包管理器或 yarn 來安裝庫包,并調用該包中的 schematic 在項目代碼中添加腳手架,比如添加 import 語句、添加 fonts,添加 themes 等。

使用 ng update 來單獨更新某個庫的版本。Angular CLI 會檢查庫中最新釋出的版本,如果最新版本比你已安裝的版本新,就會下載下傳它并更新你的 package.json 以比對最新版本。

繼續閱讀