使用Angular Cli如何创建Angular私有库详解


Posted in Javascript onJanuary 30, 2019

前言

在实际开发中,会发现我们好多工作都是重复的,在代码层面,发现好多代码是可以被重用的。这样我们就可以建一个库,类似于java的库,来提高工作效率。

下面话不多说了,来一起看看详细的介绍吧

创建Angular项目

打开命令行终端, cd 到用于创建应用的目录下,执行创建Angular项目命令:

ng new arsprojects -S

此命令将会创建一个新的Angular项目,文件夹名为 arsprojects 。 -S 参数表示不创建测试文件。我们创建的ng库都将依托于 arsprojects 项目,它只是作为ng库的容器存在,不需要建立测试。

用IDE打开 arsprojects 项目。

使用Angular Cli如何创建Angular私有库详解

看到的文件结构就是我们常用的Angular项目结构。平时我们开发Angular项目,就是在 src/app 目录下进行的。

我们想建的是一个ng库,它和原来的Angular项目还是有一定差异的,ng库不需要操作 src/app 下的内容。

创建一个组件库

ng g library ars-components -p ars

g 是generate的简写方式, library 表示我们创建的是一个库。 -p ars 表示我们创建的库里面的组件是以 ars 开头的。例如我们创建一个checkbox组件,那么他的selector就是 ars-checkbox ,在HTML中通过标签来使用我们组件。

执行完该命令后,在ide中会发现,在我们的arsprojects中多了一个 projects 文件夹,里面是我们刚创建的 ars-components 。

使用Angular Cli如何创建Angular私有库详解

同时,我们一开始创建arsprojects项目时创建的angular-cli.json也会被修改。里面会增加 ars-components 的项目信息。

"ars-components": {
"root": "projects/ars-components",
"sourceRoot": "projects/ars-components/src",
"projectType": "library",
"prefix": "ars",
"architect": {
"build": {
"builder": "@angular-devkit/build-ng-packagr:build",
"options": {
"tsConfig": "projects/ars-components/tsconfig.lib.json",
"project": "projects/ars-components/ng-package.json"
},
"configurations": {
"production": {
"project": "projects/ars-components/ng-package.prod.json"
}
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/ars-components/src/test.ts",
"tsConfig": "projects/ars-components/tsconfig.spec.json",
"karmaConfig": "projects/ars-components/karma.conf.js"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"projects/ars-components/tsconfig.lib.json",
"projects/ars-components/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "arsprojects"

同时会在 tsconfig.json 中创建 paths 选项。

"paths": {
"ars-components": [
"dist/ars-components"
]

通过修改tsconfig.json配置,可以让我们方便的使用ars-components库。

创建web站点项目

ng g application arswebsite --prefix web

此命令通过 application 脚手架创建一个名为 arswebsite 的项目,selector前缀为 web 。在ide中发现在ars-commponents同级目录下创建了arswebsite和arswebsite-e2e两个文件夹。

运行项目

在运行项目前,先做一些小改动,用于区分项目。

修改 projects/arswebsite/src/app/app.component.html 为

<h1>ArsWeb</h1>

修改 src/app/app.component.html 为

<h1>Main Angular App</h1>

启动项目

ng serve

打开浏览器,访问 http://localhost:4200。

另打开一个终端,执行命令

ng serve arswebsite --port 4201

打开浏览器,访问 http://localhost:4201。

此时会发现,访问了两个不同的项目内容。

在ng库中创建新组件

cd projects/ars-components/src/lib
ng generate component checkbox --project=ars-components

这样就会在我们的ars-components库中创建一个checkbox组件,组件的selector为ars-checkbox

编译组件

cd yourfolder/arsprojects
ng build ars-components

会在dist目录下生成ars-components编译后的内容。

安装组件

编译后的组件,想要使用,需要现在本地安装。

npm install dist/ars-components

使用组件

在arswebsite中使用ars-components组件,此时和使用其他第三方组件没有任何区别。

website/src/app/app.moudle.ts 中引入 ArsComponentsModule :

import { ArsComponentsModule } from 'ars-components';

....

imports: [
 BrowserModule, ArsComponentsModule
],

这样就可以在arswebsite中直接使用自定义库中的库组件了。

arswebsite/src/app/app.component.html 添加自定义组件

<ars-checkbox></ars-checkbox>

总结

在使用Angular cli创建库总体来说还是很方便的,创建库的意义就是让我们在实际开发过程中,总结的一些可以被复用的代码形成一个可被共享的资源,从而提高效率。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript 版本自动生成文章摘要
Jul 23 Javascript
js报错 Object doesn't support this property or method的原因分析
Mar 31 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 Javascript
javascript实现tab切换的两个实例
Nov 05 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
vue-i18n结合Element-ui的配置方法
May 20 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
Sep 27 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
js实现右键弹出自定义菜单
Sep 08 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
async/await优雅的错误处理方法总结
Jan 30 #Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 #Javascript
JavaScript之解构赋值的理解
Jan 30 #Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 #Javascript
JS实现的新闻列表自动滚动效果示例
Jan 30 #Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 #Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 #Javascript
You might like
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
IIS 7.5 asp Session超时时间设置方法
2017/04/17 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
2020/11/07 Javascript
python逐行读取文件内容的三种方法
2014/01/20 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
Django models.py应用实现过程详解
2019/07/29 Python
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
领导班子自我剖析材料
2014/08/16 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书
总结Python使用过程中的bug
2021/06/18 Python
vue中 this.$set的使用详解
2021/11/17 Vue.js
SQL SERVER存储过程用法详解
2022/02/24 SQL Server