詳解如何為你的angular app構(gòu)建一個第三方庫
Angular 團(tuán)隊 在 angular6 中，使得創(chuàng)建 Angular 第三方庫變得更為簡單。如果你以前嘗試過操作，你會發(fā)現(xiàn)其實不是很簡單！
那么流程是什么呢？
首頁我們構(gòu)建一個搭建一個簡單的環(huán)境，環(huán)境里面包含一些組件和服務(wù)以及一些接口。
創(chuàng)建項目
1.按照官方教程，使用 ng new 命令初始化項目：
ng new lib-demo --prefix ld
在 angular-cli 第6個之后版本。配置文件的方式發(fā)生了相當(dāng)大變化， angular.json 現(xiàn)在代表 angular 工作空間,
你可以可以使用 ng generate application [my-app-name] 命令添加更多項目
你也可以通過 ng generate 指令創(chuàng)建一個公共庫。
ng generate library tvmaze --prefix tm
當(dāng)然你可以使用簡寫命令
ng g lib tvmaze --prefix tm
具體參照
使用 generate 在我們 angular.json 中添加一個項目。
在庫中創(chuàng)建一個服務(wù)
我們會發(fā)現(xiàn)tvmaze有它自己的 package.json ， tsconfig.json ， tslint.json 和 karma.conf.js ，這樣建立是有原因的，因為這個項目獨立與主應(yīng)用建立而成，它本身也有組件、服務(wù)、模塊。稍后我們添加其他的內(nèi)容?，F(xiàn)在我們添加一些邏輯：
這里說明下 provideIn: root 是 angular6 之后的新屬性，詳情見官網(wǎng)；如果是為了打包優(yōu)化。
在庫中創(chuàng)建一個組件
我們使用 angular-cli 來創(chuàng)建一個組件
# 使用--project 指定創(chuàng)建在那個工程中 ng generate component poster --project=tvmaze
然后這樣編輯
將組件注冊到 TvmazeModule 中，并且 exports 中是的外部能夠訪問，還得添加 CommonModule , HttpClientModule 兩個模塊。
構(gòu)建一下
在我們使用之前，我們先構(gòu)建一下，我們 ng build 構(gòu)建，指定項目。
ng build tvmaze
使用庫
接下來，我們來使用剛剛構(gòu)建好的庫，一般我們采用第三方庫都是使用 import 來導(dǎo)入。
我們會發(fā)現(xiàn)庫不存在。因為這種方式，它是從 node_modules 尋找，所以我們要在根目錄下 tsconfig.json 添加 paths
接下來我們在主項目中運(yùn)用：使用 <tm-poster> 標(biāo)簽，即可完成
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Angular中樣式綁定解決方案,使用ngClass和ngStyle可以進(jìn)行樣式的綁定,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
Angular使用ng-messages與PHP進(jìn)行表單數(shù)據(jù)驗證
這篇文章主要介紹了Angular使用ng-messages與PHP進(jìn)行表單數(shù)據(jù)驗證，ng-messages提供了更方便的表單數(shù)據(jù)驗證服務(wù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
本篇文章主要介紹了詳解AngularJS ui-sref的簡單使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
AngularJS之ionic 框架下實現(xiàn) Localstorage本地存儲
這篇文章主要介紹了AngularJS之ionic 框架下實現(xiàn) Localstorage本地存儲，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要介紹了Angular彈出模態(tài)框的兩種方式,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-10-10
AngularJS動態(tài)生成select下拉框的方法實例
這篇文章主要給大家介紹了關(guān)于AngularJS動態(tài)生成select下拉框的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用AngularJS具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
用WebStorm進(jìn)行Angularjs 2開發(fā)(環(huán)境篇：Windows 10，Angular-cli方式)
這篇文章主要介紹了用WebStorm進(jìn)行Angularjs 2開發(fā)(環(huán)境篇：Windows 10，Angular-cli方式),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
angularjs客戶端實現(xiàn)壓縮圖片文件并上傳實例
這篇文章主要介紹了angularjs客戶端實現(xiàn)壓縮圖片文件并上傳實例,本文直接給出代碼實例,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了淺談angular2路由預(yù)加載策略，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
AngularJS的ng Http Request與response格式轉(zhuǎn)換方法
這篇文章主要介紹了AngularJS的ng Http Request與response格式轉(zhuǎn)換方法,結(jié)合實例形式分析了AngularJS實現(xiàn)Request與response格式轉(zhuǎn)換操作的相關(guān)設(shè)置與使用技巧,需要的朋友可以參考下2016-11-11