内容简介:在实际开发中,会发现我们好多工作都是重复的,在代码层面,发现好多代码是可以被重用的。这样我们就可以建一个库,类似于java的库,来提高工作效率。打开命令行终端,此命令将会创建一个新的Angular项目,文件夹名为
在实际开发中,会发现我们好多工作都是重复的,在代码层面,发现好多代码是可以被重用的。这样我们就可以建一个库,类似于 java 的库,来提高工作效率。
创建Angular项目
打开命令行终端, cd
到用于创建应用的目录下,执行创建Angular项目命令:
ng new arsprojects -S
此命令将会创建一个新的Angular项目,文件夹名为 arsprojects
。 -S
参数表示不创建测试文件。我们创建的ng库都将依托于 arsprojects
项目,它只是作为ng库的容器存在,不需要建立测试。
用IDE打开 arsprojects
项目。
看到的文件结构就是我们常用的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
。
同时,我们一开始创建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创建库总体来说还是很方便的,创建库的意义就是让我们在实际开发过程中,总结的一些可以被复用的代码形成一个可被共享的资源,从而提高效率。
Author :笑笑粑粑
曾用网名:TinyKing
微信公众号:Java码农
知乎专栏: 爱笑笑爱分享
个人博客: 爱笑笑,爱生活
自我评价: 一个爱好广泛的CRUD程序猿 ^_^
以上所述就是小编给大家介绍的《如何使用 Angular Cli 创建 Angular 私有库》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 创建私有CA并签发证书
- CocoaPods 创建私有仓库(ObjC)
- Erlang私有函数的私有程度如何?
- JavaScript 新语法详解:Class 的私有属性与私有方法
- 实战maven私有仓库三部曲之二:上传到私有仓库
- 实战maven私有仓库三部曲之三:Docker下搭建maven私有仓库
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Linux程序设计
Neil Matthew、Richard Stones / 陈健、宋健建 / 人民邮电出版社 / 201005 / 99.00元
时至今日,Linux系统已经从一个个人作品发展为可以用于各种关键任务的成熟、高效和稳定的操作系统,因为具备跨平台、开源、支持众多应用软件和网络协议等优点,它得到了各大主流软硬件厂商的支持,也成为广大程序设计人员理想的开发平台。 本书是Linux程序设计领域的经典名著,以简单易懂、内容全面和示例丰富而受到广泛好评。中文版前两版出版后,在国内的Linux爱好者和程序员中也引起了强烈反响,这一热潮......一起来看看 《Linux程序设计》 这本书的介绍吧!