您好,登錄后才能下訂單哦!
前言
在實際開發(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 目錄下進行的。
我們想建的是一個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站點項目
ng g application arswebsite --prefix web
此命令通過 application 腳手架創(chuàng)建一個名為 arswebsite 的項目,selector前綴為 web 。在ide中發(fā)現(xiàn)在ars-commponents同級目錄下創(chuàng)建了arswebsite和arswebsite-e2e兩個文件夾。
運行項目
在運行項目前,先做一些小改動,用于區(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)建庫的意義就是讓我們在實際開發(fā)過程中,總結(jié)的一些可以被復(fù)用的代碼形成一個可被共享的資源,從而提高效率。
好了,以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。