开发者社区> 努力滴码农> 正文

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


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
基于Angular创建后台数据模拟(译)
这篇文章给了我们一个用angularjs做前后端分离开发的时候解决数据问题的方案
4875 0
Angular CLI创建的项目文件用途一栏
Angular CLI创建的项目文件用途一栏
32 0
使用Angular CLI创建一个Hello World级别的Angular应用
命令行ng new my-first-project, 会自动创建一个同名文件夹,stylesheet的实现,选择最简单的css即可。
22 0
如何使用Angular Generator创建新的Component
如何使用Angular Generator创建新的Component
21 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
17641 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
23611 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
18329 0
如何在小程序中调用本地接口
背景: 随着微信小程序开始公测,我司也拿到了AppID,所以开始了微信小程序的趟坑之旅。 由于现在网上已经有很多的《微信小程序从精通到入门》的教程了,所以就不再重复那些,只是讲一下,在开发的过程中,如何使用本地(开发环境)的接口。
1395 0
2497
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载