前言

成都一家集口碑和實(shí)力的網(wǎng)站建設(shè)服務(wù)商，擁有專業(yè)的企業(yè)建站團(tuán)隊和靠譜的建站技術(shù)，十余年企業(yè)及個人網(wǎng)站建設(shè)經(jīng)驗 ,為成都近1000家客戶提供網(wǎng)頁設(shè)計制作,網(wǎng)站開發(fā),企業(yè)網(wǎng)站制作建設(shè)等服務(wù),包括成都營銷型網(wǎng)站建設(shè)，成都品牌網(wǎng)站建設(shè)，同時也為不同行業(yè)的客戶提供成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)的服務(wù),包括成都電商型網(wǎng)站制作建設(shè),裝修行業(yè)網(wǎng)站制作建設(shè)，傳統(tǒng)機(jī)械行業(yè)網(wǎng)站建設(shè),傳統(tǒng)農(nóng)業(yè)行業(yè)網(wǎng)站制作建設(shè)。在成都做網(wǎng)站,選網(wǎng)站制作建設(shè)服務(wù)商就選成都創(chuàng)新互聯(lián)公司。

在實(shí)際開發(fā)中，會發(fā)現(xiàn)我們好多工作都是重復(fù)的，在代碼層面，發(fā)現(xiàn)好多代碼是可以被重用的。這樣我們就可以建一個庫，類似于java的庫，來提高工作效率。

下面話不多說了，來一起看看詳細(xì)的介紹吧

創(chuàng)建Angular項目

打開命令行終端， cd 到用于創(chuàng)建應(yīng)用的目錄下，執(zhí)行創(chuàng)建Angular項目命令：

ng new arsprojects -S

此命令將會創(chuàng)建一個新的Angular項目，文件夾名為 arsprojects 。 -S 參數(shù)表示不創(chuàng)建測試文件。我們創(chuàng)建的ng庫都將依托于 arsprojects 項目，它只是作為ng庫的容器存在，不需要建立測試。

用IDE打開 arsprojects 項目。

看到的文件結(jié)構(gòu)就是我們常用的Angular項目結(jié)構(gòu)。平時我們開發(fā)Angular項目，就是在 src/app 目錄下進(jìn)行的。

我們想建的是一個ng庫，它和原來的Angular項目還是有一定差異的，ng庫不需要操作 src/app 下的內(nèi)容。

創(chuàng)建一個組件庫

ng g library ars-components -p ars

g 是generate的簡寫方式， library 表示我們創(chuàng)建的是一個庫。 -p ars 表示我們創(chuàng)建的庫里面的組件是以 ars 開頭的。例如我們創(chuàng)建一個checkbox組件，那么他的selector就是 ars-checkbox ，在HTML中通過標(biāo)簽來使用我們組件。

執(zhí)行完該命令后，在ide中會發(fā)現(xiàn)，在我們的arsprojects中多了一個 projects 文件夾，里面是我們剛創(chuàng)建的 ars-components 。

同時，我們一開始創(chuàng)建arsprojects項目時創(chuàng)建的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 中創(chuàng)建 paths 選項。

"paths": {
"ars-components": [
"dist/ars-components"
]

通過修改tsconfig.json配置，可以讓我們方便的使用ars-components庫。

創(chuàng)建web站點(diǎn)項目

ng g application arswebsite --prefix web

此命令通過 application 腳手架創(chuàng)建一個名為 arswebsite 的項目，selector前綴為 web 。在ide中發(fā)現(xiàn)在ars-commponents同級目錄下創(chuàng)建了arswebsite和arswebsite-e2e兩個文件夾。

運(yùn)行項目

在運(yùn)行項目前，先做一些小改動，用于區(qū)分項目。

修改 projects/arswebsite/src/app/app.component.html 為

<h2>ArsWeb</h2>

修改 src/app/app.component.html 為

<h2>Main Angular App</h2>

啟動項目

ng serve

打開瀏覽器，訪問 http://localhost:4200。

另打開一個終端，執(zhí)行命令

ng serve arswebsite --port 4201

打開瀏覽器，訪問 http://localhost:4201。

此時會發(fā)現(xiàn)，訪問了兩個不同的項目內(nèi)容。

在ng庫中創(chuàng)建新組件

cd projects/ars-components/src/lib
ng generate component checkbox --project=ars-components

這樣就會在我們的ars-components庫中創(chuàng)建一個checkbox組件，組件的selector為ars-checkbox

編譯組件

cd yourfolder/arsprojects
ng build ars-components

會在dist目錄下生成ars-components編譯后的內(nèi)容。

安裝組件

編譯后的組件，想要使用，需要現(xiàn)在本地安裝。

npm install dist/ars-components

使用組件

在arswebsite中使用ars-components組件，此時和使用其他第三方組件沒有任何區(qū)別。

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>

總結(jié)

在使用Angular cli創(chuàng)建庫總體來說還是很方便的，創(chuàng)建庫的意義就是讓我們在實(shí)際開發(fā)過程中，總結(jié)的一些可以被復(fù)用的代碼形成一個可被共享的資源，從而提高效率。

好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對創(chuàng)新互聯(lián)的支持。

當(dāng)前名稱：使用AngularCli如何創(chuàng)建Angular私有庫詳解
標(biāo)題網(wǎng)址：http://www.rwnh.cn/article24/jepije.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、響應(yīng)式網(wǎng)站、虛擬主機(jī)、營銷型網(wǎng)站建設(shè)、網(wǎng)站設(shè)計公司、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)