使用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 相关文章推荐
jQuery表格行换色的三种实现方法
Jun 27 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
May 12 Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 Javascript
vue 中filter的多种用法
Apr 26 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
Angular2实现的秒表及改良版示例
May 10 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 Javascript
vue实现在data里引入相对路径
Jun 05 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
Smarty安装配置方法
2008/04/10 PHP
php调用google接口生成二维码示例
2014/04/28 PHP
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
2017/11/09 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
python连接池实现示例程序
2013/11/26 Python
Python中zip()函数用法实例教程
2014/07/31 Python
centos6.4下python3.6.1安装教程
2017/07/21 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
详解python中的模块及包导入
2019/08/30 Python
Python 词典(Dict) 加载与保存示例
2019/12/06 Python
Python实现word2Vec model过程解析
2019/12/16 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
python raise的基本使用
2020/09/10 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
合作经营协议书范本
2014/09/16 职场文书
户外拓展训练感想
2015/08/07 职场文书
《观察物体》教学反思
2016/02/17 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python
用Python实现Newton插值法
2021/04/17 Python