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

栏目: 编程语言 · AngularJS · 发布时间: 5年前

内容简介:在实际开发中,会发现我们好多工作都是重复的,在代码层面,发现好多代码是可以被重用的。这样我们就可以建一个库,类似于java的库,来提高工作效率。打开命令行终端,此命令将会创建一个新的Angular项目,文件夹名为

在实际开发中,会发现我们好多工作都是重复的,在代码层面,发现好多代码是可以被重用的。这样我们就可以建一个库,类似于 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编译后的内容。 如何使用 Angular Cli 创建 Angular 私有库

安装组件

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

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

Author :笑笑粑粑

曾用网名:TinyKing

微信公众号:Java码农

知乎专栏: 爱笑笑爱分享

个人博客: 爱笑笑,爱生活

自我评价: 一个爱好广泛的CRUD程序猿 ^_^


以上所述就是小编给大家介绍的《如何使用 Angular Cli 创建 Angular 私有库》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Python Algorithms

Python Algorithms

Magnus Lie Hetland / Apress / 2010-11-24 / USD 49.99

Python Algorithms explains the Python approach to algorithm analysis and design. Written by Magnus Lie Hetland, author of Beginning Python, this book is sharply focused on classical algorithms, but it......一起来看看 《Python Algorithms》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

MD5 加密
MD5 加密

MD5 加密工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具