使用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加密解密7种方法总结分析
Oct 07 Javascript
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
在 Express 中使用模板引擎
Dec 10 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
jQuery滚动新闻实现代码
Jun 26 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
Angularjs实现页面模板清除的方法
Jul 20 Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 Javascript
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中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
php实现插入排序
2015/03/29 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
PHP检查URL包含特定字符串实例方法
2019/02/11 PHP
js 编写规范
2010/03/03 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
Javascript获取HTML静态页面参数传递值示例
2013/08/18 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
vue实现通讯录功能
2018/07/14 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
react同构实践之实现自己的同构模板
2019/03/13 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
HTML文本属性&amp;颜色控制属性的实现
2019/12/17 HTML / CSS
先进事迹报告会感言
2014/01/24 职场文书
城管综合整治方案
2014/05/01 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
老干部工作先进事迹
2014/08/17 职场文书