如何创建 Angular 库并在 Angular 应用里调用

简介: 如何创建 Angular 库并在 Angular 应用里调用

把功能打包成库会强迫库中的工件与应用的业务逻辑分离。这有助于避免各种不良实践或架构失误,这些失误会导致将来很难解耦和复用代码。


把代码放到一个单独的库中比简单地把所有内容都放在一个应用中要复杂得多。它需要更多的时间投入,并且需要管理、维护和更新这个库。不过,当把该库用在多个应用中时,这种复杂性就会得到回报。


Angular 库是一个 Angular 项目,它与应用的不同之处在于它本身是不能运行的。必须在某个应用中导入库并使用它。


使用下面的命令行,创建一个库:

image.png


angular.json 文件在 projects 节点下,多了一个 my-lib 节点,其 projectType 类型为 library:


image.png


angular.json 里的层级结构和文件系统的目录同样是一致的:

image.png


这个库有属于自己单独的 package.json:

image.png


这个库无法单独运行,那么如何测试呢?


使用如下命令行。


ng build my-lib --configuration development

ng test my-lib

ng lint my-lib


image.png


要让库代码可以复用,你必须为它定义一个公共的 API。这个“用户层”定义了库中消费者的可用内容。该库的用户应该可以通过单个的导入路径来访问公共功能(如 NgModules、服务提供者和工具函数)。


库的公共 API 是在库文件夹下的 public-api.ts 文件中维护的。当你的库被导入应用时,从该文件导出的所有内容都会公开。


下图是一个例子:


image.png


我的 service 类:


image.png

请使用 NgModule 来暴露这些服务和组件: Use an NgModule to expose services and components.


如何消费我们自己开发的库

直接在我们的 AppModule 的 imports 区域里,导入我们的 Angular library 通过 public_api.ts 导出的 component 和 service 即可。


image.png


通过依赖注入,导入我们库里导出的 service 类的实例:


image.png


运行 Angular 应用,发现我们 Angular 库里的 service 打印出的字符串,说明 library 使用成功了:


image.png


如何使用 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 以匹配最新版本。


相关文章
|
1月前
|
存储 前端开发 API
浅谈 Angular 应用前端消息显示机制的一个实际需求
浅谈 Angular 应用前端消息显示机制的一个实际需求
12 0
|
3月前
|
设计模式 JavaScript 前端开发
什么是 Angular 应用里的 Custom provider
什么是 Angular 应用里的 Custom provider
32 2
|
1月前
|
存储 JavaScript 前端开发
Angular 应用 node_modules 子文件夹 @types 的作用介绍
Angular 应用 node_modules 子文件夹 @types 的作用介绍
15 1
|
11天前
|
JavaScript 前端开发 开发者
【TypeScript技术专栏】TypeScript在Angular开发中的应用
【4月更文挑战第30天】本文探讨了TypeScript在Angular开发中的应用。Angular与TypeScript的结合利用了静态类型检查和ECMAScript特性,简化了大型Web应用的开发。文章涵盖组件、数据绑定、依赖注入、服务、守卫和路由以及模块化等方面,展示了如何在Angular中有效使用TypeScript。此外,还提到了TypeScript的高级应用,如泛型、高级类型和装饰器。掌握这些知识将有助于提升Angular应用的可维护性和可扩展性。
|
1月前
|
安全 API 开发者
Angular angular-oauth2-oidc 库的使用概述
Angular angular-oauth2-oidc 库的使用概述
13 0
|
2月前
|
开发框架 前端开发 安全
Angular:构建现代Web应用的终极选择
Angular:构建现代Web应用的终极选择
27 0
|
3月前
|
Go
Mac安装Angular并部署运行应用
Mac安装Angular并部署运行应用
|
4月前
|
缓存 前端开发 JavaScript
Angular Service Worker 在 PWA 应用 HTTP 交互中扮演的角色
Angular Service Worker 在 PWA 应用 HTTP 交互中扮演的角色
45 0
|
4月前
|
缓存 JavaScript 前端开发
Angular PWA 应用什么情况下会出现 504 error
Angular PWA 应用什么情况下会出现 504 error
52 0
|
4月前
|
网络协议 JavaScript
Angular 服务器端渲染应用里重用 TCP 连接的示例代码
Angular 服务器端渲染应用里重用 TCP 连接的示例代码
23 0

热门文章

最新文章