时间:2021-05-25
前言
在实际开发中,会发现我们好多工作都是重复的,在代码层面,发现好多代码是可以被重用的。这样我们就可以建一个库,类似于java的库,来提高工作效率。
下面话不多说了,来一起看看详细的介绍吧
创建Angular项目
打开命令行终端, cd 到用于创建应用的目录下,执行创建Angular项目命令:
此命令将会创建一个新的Angular项目,文件夹名为 arsprojects 。 -S 参数表示不创建测试文件。我们创建的ng库都将依托于 arsprojects 项目,它只是作为ng库的容器存在,不需要建立测试。
用IDE打开 arsprojects 项目。
看到的文件结构就是我们常用的Angular项目结构。平时我们开发Angular项目,就是在 src/app 目录下进行的。
我们想建的是一个ng库,它和原来的Angular项目还是有一定差异的,ng库不需要操作 src/app 下的内容。
创建一个组件库
g 是generate的简写方式, library 表示我们创建的是一个库。 -p ars 表示我们创建的库里面的组件是以 ars 开头的。例如我们创建一个checkbox组件,那么他的selector就是 ars-checkbox ,在HTML中通过标签来使用我们组件。
执行完该命令后,在ide中会发现,在我们的arsprojects中多了一个 projects 文件夹,里面是我们刚创建的 ars-components 。
同时,我们一开始创建arsprojects项目时创建的angular-cli.json也会被修改。里面会增加 ars-components 的项目信息。
同时会在 tsconfig.json 中创建 paths 选项。
通过修改tsconfig.json配置,可以让我们方便的使用ars-components库。
创建web站点项目
此命令通过 application 脚手架创建一个名为 arswebsite 的项目,selector前缀为 web 。在ide中发现在ars-commponents同级目录下创建了arswebsite和arswebsite-e2e两个文件夹。
运行项目
在运行项目前,先做一些小改动,用于区分项目。
修改 projects/arswebsite/src/app/app.component.html 为
修改 src/app/app.component.html 为
启动项目
打开浏览器,访问 http://localhost:4200。
另打开一个终端,执行命令
打开浏览器,访问 http://localhost:4201。
此时会发现,访问了两个不同的项目内容。
在ng库中创建新组件
这样就会在我们的ars-components库中创建一个checkbox组件,组件的selector为ars-checkbox
编译组件
会在dist目录下生成ars-components编译后的内容。
安装组件
编译后的组件,想要使用,需要现在本地安装。
使用组件
在arswebsite中使用ars-components组件,此时和使用其他第三方组件没有任何区别。
website/src/app/app.moudle.ts 中引入 ArsComponentsModule :
这样就可以在arswebsite中直接使用自定义库中的库组件了。
arswebsite/src/app/app.component.html 添加自定义组件
总结
在使用Angular cli创建库总体来说还是很方便的,创建库的意义就是让我们在实际开发过程中,总结的一些可以被复用的代码形成一个可被共享的资源,从而提高效率。
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
详解Angular-cli生成组件修改css成less或sass的实例使用cli命令生成组件:nggeneratecomponent组件名生成出来的组件文件有:
最近在学习angular(AngularJS2),根据教程使用angular-cli新建项目,然而在添加JQuery和Bootstrap第三方库时遇到了问题..
基础知识AngularCLI基本使用安装AngularCLI(可选)npminstall-g@angular/cli创建新的项目ngnewPROJECT-NAM
前言最近研究Angular2的@Angular/cli,有改端口号的需求。方法一1、定位到:..\node_modules\._@angular_cli@1.0
Angular-CLI说到cli大家不陌生,每出一个框架都会有对应的cli,俗称脚手架。angular2本身提供了起步项目angular2-quickstart