Angular是一個開源的JavaScript框架，使用TypeScript構建，併為開發單頁網路應用程式而優化。它以其多功能性而聞名，使開發人員能夠專注於特性和功能。將元件庫新增到組合中會增加另一層效率，提高開發效率和你的應用程式的整體質量。
然而，面對如此多的可用選項，為你的專案選擇最好的庫可能是困難的。本文研究了一些最有用的Angular元件庫，它們是如何工作的，以及你如何將它們中的每一個整合到你的Angular應用程式中。
為什麼使用元件庫？
無論你是自己構建還是採用第三方庫，元件都構成了Angular應用程式的基礎。每個元件都依賴於其HTML和CSS元素的模板以及控制其行為的TypeScript程式碼。
元件庫的主要好處是，它們提供了可重複使用的、預先構建的UI元件，減少了對自定義程式碼的需求，幫助開發者快速啟動和執行應用程式。
Angular對元件的處理方式還可以加強編寫TypeScript程式碼的程式設計師和為模板提供HTML的網頁設計師之間的跨團隊合作。
元件庫通常使用Node.js的 npm Node包管理器或使用Angular自己的命令列介面（CLI）新增到Angular專案中。
怎樣才算好的元件庫？
我們名單上的元件庫是根據幾個標準選擇的：
- 能夠提供了一套全面的UI元件，使開發者能夠輕鬆地快速建立漂亮而實用的應用程式。
- 易於使用，並與Angular、React和Vue等流行的網路開發框架整合。
- 提供良好的文件和支援，確保開發者在需要時能得到幫助。
- 能夠被積極維護和更新，確保它們與最新的網路技術和安全標準保持同步。
Angular元件庫推薦
現在讓我們一起來看看這份清單。
1. Angular Material
Angular Material是官方的Angular元件庫，提供了一個全面的UI集合，同時與最新的Angular功能和API變化保持同步。它還提供了內建的可訪問性支援，生成標記以實現鍵盤導航並指導螢幕閱讀器等輔助技術。
Material Angular元件庫：按鈕例項
它是如何工作的：Angular Material利用Angular的內建指令和服務，在Angular的基礎上提供了一套資料繫結的高效能元件，使其能夠輕鬆地將互動性新增到Web應用中。
它的優勢：Angular Material的優勢在於提供遵循Material Design準則的預建UI元件。它提供了一套精心設計和可定製的UI元件，可以輕鬆地整合到Angular應用程式中。這些元件包括導航選單、按鈕、表單、對話方塊等。
例如，如果你想在你的應用程式中新增一個按鈕元件，你可以簡單地使用mat-button指令並根據需要進行定製。
下面是一個例子的程式碼片段：
<button mat-button color="primary">Click me!</button>
這段程式碼將生成一個具有主色調的按鈕元件。你可以通過新增事件處理程式、改變文字和圖示的外觀來進一步定製該按鈕。
2. NG-Bootstrap
NG-Bootstrap是一個建立在Bootstrap CSS之上的開源庫，提供許多開發者已經熟悉的元件和設計模式。這減少了新專案的學習曲線，使其成為快速有效地構建Angular應用程式的可靠選擇。
NG-Bootstrap Angular元件庫：旋轉木馬例項
它是如何工作的：NG-Bootstrap擴充套件了Bootstrap元件的功能，允許開發者將其作為Angular指令使用，並具有雙向資料繫結和其他Angular特定功能。這使得開發者可以很容易地建立響應式的、移動友好的Web應用，並與Angular無縫協作。
它的優勢所在：NG-Bootstrap的主要優勢之一是它對無障礙功能的支援，包括W3Cs的無障礙富網際網路應用（ARIA）規範，使開發者更容易建立殘疾人可以使用的應用程式。NG-Bootstrap在模態對話方塊方面也很出色。通過 ng-bootstrap Modal元件，開發者可以輕鬆地建立具有可定製選項的模態對話方塊，如尺寸、背景和鍵盤支援。
下面是一個如何使用NG-Bootstrap建立一個基本模態對話方塊的例子：
<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="modal.close('Close click')">Close</button>
</div>
</ng-template>
<button class="btn btn-primary" (click)="open(content)">Launch demo modal</button>
在這個例子中，ng-template 元素包含了模態對話方塊的內容，包括標題、正文和頁尾。程式碼段末尾的按鈕元素在被點選時觸發了模態的開啟。open() 方法用於顯示模態，並將 ng-template 元素作為其引數。
3. Clarity
Clarity是一個開源的庫，在其元件中使用共享的視覺語言，以提供一個一致的、直觀的使用者介面。它也有廣泛的文件，有許多指南、教程和API參考，使其易於學習和使用。
插畫來自Clarity Angular元件庫的官方網站
它是如何工作的：Clarity設計系統是基於 “卡片 “的概念，用來分組相關內容。卡片被用來以一種結構化和有組織的方式表示單個的內容。Clarity提供了各種卡片元件，可以以各種格式呈現資料。這些卡片元件包括頁首、頁尾和內容部分，並且可以很容易地用不同的風格和主題進行定製。
卡片還可以與其他元件–如模態、下拉和按鈕–結合起來，以建立更復雜的使用者介面設計。基於卡片的設計的總體目標是提供一個靈活和模組化的系統，以便輕鬆地建立複雜的介面。
它的優點：Clarity廣泛的表單控制元件集是一個絕對的優勢。這些控制元件包括輸入欄位、選擇框、單選按鈕等。Clarity還提供了一組資料視覺化，如柱狀圖、線狀圖和餅狀圖，以幫助以清晰和有組織的方式顯示資料。
下面是一個如何在HTML表單中使用Clarity輸入欄位元件的例子：
<clr-input-container> <label>Username</label> <input clrInput placeholder="Enter your username"> </clr-input-container>
這段程式碼將建立一個帶有標籤和佔位符文字的表單輸入域。 clr-input-container 和 clrInput 指令是由Clarity庫提供的，並將相應地設計輸入欄位。
4. Kendo UI
Kendo UI是一個考慮到效能的商業庫，確保快速載入時間和流暢的使用者體驗。它還提供了主題和造型選項，以增強你的應用程式的外觀和感覺，以及廣泛的文件和專門的支援團隊。
使用Kendo UI Angular元件庫的資料網格示例
它是如何工作的：Kendo UI使用諸如虛擬化和懶惰載入等技術來確保快速載入時間和流暢的使用者體驗。這意味著用Kendo UI構建的應用程式即使在處理大型資料集時也是快速和響應的。Kendo UI還遵循一個模組化的架構，使開發人員能夠只使用他們需要的元件，減少庫的大小並提高效能。
它的優勢：Kendo UI特別適用於需要大量資料管理和複雜使用者互動的企業級應用。例如，它的網格元件支援過濾、排序和分組等功能，使開發者能夠以一種可管理的方式向使用者展示大型資料集。
下面是一個關於如何在HTML中建立一個簡單的Kendo UI網格的程式碼片段：
<kendo-grid [data]="gridData"> <kendo-grid-column field="ProductID" title="Product ID" width="120"></kendo-grid-column> <kendo-grid-column field="ProductName" title="Product Name" width="200"></kendo-grid-column> <kendo-grid-column field="UnitPrice" title="Unit Price" width="120"></kendo-grid-column> <kendo-grid-column field="UnitsInStock" title="Units In Stock" width="120"></kendo-grid-column> </kendo-grid>
這段程式碼將在你的Angular應用程式中顯示一個Kendo UI網格。你可以通過向kendo-grid元件傳遞各種配置選項來定製該網格。
5. PrimeNG
PrimeNG是一個開源的庫，旨在方便使用和定製。它還包括先進的可訪問性功能和國際化支援，使其成為全球應用程式的最佳選擇。
PrimeNG Angular元件庫的官方Logo
它是如何工作的：PrimeNG庫提供了一套預建的UI元件，開發人員可以很容易地將其整合到他們的Angular應用程式中。它使用Angular的內建指令和生命週期掛鉤來提供與框架的無縫整合。它還支援各種配置選項和定製，因此開發人員可以根據他們的具體需求調整元件。
它擅長的地方：PrimeNG的主要特點之一是它的國際化支援。該庫支援多種語言，併為其大多陣列件提供翻譯服務。這是通過使用Angular的本地化框架和訊息檔案實現的，這些檔案可以很容易地定製和更新。
要在PrimeNG中使用國際化，你需要為你想支援的語言建立翻譯檔案。這些檔案應該包含你想在你的應用程式中使用的所有元件的翻譯。要在PrimeNG中啟用國際化，你需要將一個元件的 translate 屬性設定為 true。然後，該元件將使用翻譯檔案，以使用者選擇的語言顯示文字。
下面是一個如何在PrimeNG中使用支援國際化的 p-calendar 元件的例子：
<p-calendar [(ngModel)]="date" [showIcon]="true" [readonlyInput]="true" [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2030" [locale]="en"></p-calendar>
在這個例子中，p-calendar 元件的 translate 屬性被設定為 true，[locale] 屬性被設定為英語（en）的語言程式碼。這確保了日曆對於選擇該語言的使用者來說是以英語顯示的。
6. Nebular
Nebular是一個由40多個Angular UI元件組成的集合，有四個可定製的主題。該庫由網路開發公司Akveo建立，還配有使用者認證模組和基於ACL的安全模組，以控制對特定資源的更多granular訪問。Akveo還可以通過使用Nebular模組構建的ngx-admin套件讓你開始自己的管理儀表板應用。
Nebular Angular元件庫-“智慧”表格例子
它是如何工作的：Nebular的UI方法是基於Akveo的Eva設計系統的規範，它也為那些以Sketch或Figma等設計工具開始工作的團隊提供資產。
設計師在使用Nebular的CSS時，一般可以從語義上參考造型選項–比如顏色變數 primary, success, info, warning, 和 danger。但使用者可以通過將高階造型定製匯入Sass檔案，超越Akveo決定的那些代表。
Nebular的元件庫包括佈局、卡片、列表、手風琴、導航輔助工具、表單元素、資料表、模態和疊加，以及像旋轉器、日期選擇器和進度條等小工具。
Nebular手風琴元件的後設資料可能看起來像這樣的TypeScript：
import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
selector: 'nb-accordion-demo',
templateUrl: './accordion-demo.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AccordionDemoComponent {}
而它的模板可能看起來像這樣：
<nb-accordion> <nb-accordion-item> <nb-accordion-item-header>First Item Heading</nb-accordion-item-header> <nb-accordion-item-body> Toggled content for First Item. </nb-accordion-item-body> </nb-accordion-item> <nb-accordion-item> <nb-accordion-item-header>Second Item Heading</nb-accordion-item-header> <nb-accordion-item-body> Toggled content for Second Item. </nb-accordion-item-body> </nb-accordion-item> </nb-accordion>
它的優點：Nebular庫和ngx-admin管理儀表板工具包是免費使用的，所以對於這樣一個複雜的工具集來說，這是一個很大的優點。認證和安全模組反映了Akveo對這些管理面板元件的關注。
Nebular還對從右到左（RTL）的語言提供了強有力的支援。使用者可以找到支援RTL（和LTR）佈局的CSS標記，以及在執行時檢測和改變佈局方向的方法–如 getDirection() 和 setDirection() 。
7. NG-Lightning
NG-Lightning是元件庫陣容中一個有趣的補充，它是Salesforce Lightning設計系統（LDS）的一個Angular風味的實現。該系統為使用該平臺Lightning框架的Salesforce開發者提供HTML和CSS元素–藍圖–和設計指南。LDS的關鍵元素反映在這個開源的Angular部件集合中，包括HTML和CSS。
NG-Lightning Angular元件庫：警報例項
它是如何工作的：NG-Lightning有一些依賴性，使它與其他一些元件庫不同。除了依賴官方的Angular元件開發工具包外，NG-Lightning應用程式還連結到Salesforce LDS使用的相同的CSS庫。這些CSS可以從官方的Salesforce使用者體驗庫中下載，或者通過CDN連結。
不過，基於TypeScript的構建檢視的方法對Angular開發者來說還是很熟悉的。這個例子將啟動上面顯示的警報元件的後設資料：
import { Component } from '@angular/core';
@Component({
selector: 'app-demo-alert-basic',
templateUrl: './basic.html',
})
export class DemoAlertBasic {
showTopAlert = false;
onClose(reason: string) {
console.log(`Closed by ${reason}`);
}
}
該官方NG-Lightning例子的元件模板是：
<div class="slds-notify_container">
<ngl-alert *ngIf="showTopAlert" variant="warning" iconName="warning" (close)="onClose($event); showTopAlert = false;">
<h2 class="slds-text-heading_small">
Your browser is outdated. Your Salesforce experience may be degraded.
<a href="javascript:void(0);">More Information</a>
</h2>
</ngl-alert>
</div>
<ngl-alert class="slds-theme_alert-texture" variant="offline" iconName="offline" (close)="onClose('click')">
<h2>You are in offline mode.<a href="javascript:void(0);">More Information</a></h2>
</ngl-alert>
<ngl-alert class="slds-m-top_small" variant="error">Your browser is currently not supported.</ngl-alert>
<button class="slds-m-top_medium" type="button" [disabled]="showTopAlert" nglButton (click)="showTopAlert = true">Show alert in container</button>
它擅長的地方：反映了他們在Salesforce LDS的基礎上，NG-Lightning的開發人員認真對待網路可訪問性。動態生成的介面是Angular等框架的標誌，對於有視覺或行動障礙的終端使用者來說往往是一種挑戰。NG-Lightning遵守W3C的ARIA規範指南，生成的網路標記旨在支援螢幕閱讀器等輔助技術。
8. Syncfusion UI
Syncfusion UI是一個輕量級、模組化的庫，允許開發人員只選擇他們的應用程式所需的元件，並減少最終捆綁的整體大小。這使得通過新增新的元件或修改現有的元件而不影響其他元件的方式來維護、擴充套件和更新該庫變得很容易。
Syncfusion UI Angular元件庫：卡片例項
它是如何工作的：當一個頁面載入時，Syncfusion UI庫會根據標記和配置選項初始化並建立必要的元件。例如，網格元件允許使用者對資料進行排序、過濾和分組，而圖表元件可以以各種格式顯示資料，包括線圖、條形圖和餅圖。
該庫還包括一組實用功能和工具，可用於簡化常見任務，如資料操作和驗證。該庫包括一個資料管理器，可用於處理複雜的資料結構，以及一個驗證引擎，可用於驗證使用者輸入。
它的優點：Syncfusion為定製和主題化提供了一套強大的工具，使開發人員能夠快速建立一個一致和專業的使用者介面。該庫包括一套強大的API和事件，可用於建立自定義功能和互動性，並支援流行的資料來源，如REST APIs、OData和SignalR。
下面是一個在Angular應用程式中包含Syncfusion網格元件的例子：
<ejs-grid [dataSource]="data"> <e-columns> <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-column> <e-column field="CustomerID" headerText="Customer Name" width="150"></e-column> <e-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-column> <e-column field="ShipCity" headerText="Ship City" width="150"></e-column> </e-columns> </ejs-grid>
這段程式碼建立了一個簡單的網格，顯示來自一個資料來源的資料。dataSource 屬性被設定為要顯示的資料，而 e-columns 元素被用來定義網格中的列。每個 e-column 元素定義了網格中的一列，包括要顯示的欄位、標題文字和列寬。這個例子還演示瞭如何使用 format 屬性來格式化網格中顯示的資料。
9. Onsen UI
Onsen UI是一個流行的開源UI庫，用於構建混合和網路移動應用程式。與其他第三方庫相比，它提供了與流行的前端框架更好的無縫整合，使其能夠以最小的努力輕鬆建立高質量的互動式UI。
使用Onsen UI Angular元件庫的列表例項
它是如何工作的：Onsen UI是基於谷歌的Material Design理念，它確保了應用程式的UI既美觀又方便使用者。它提供了一套廣泛的內建主題，可以應用於元件，以增強應用程式的外觀和感覺。
它的優秀之處：Onsen UI的出色之處在於它的易用性和建立跨平臺應用程式的能力，這些應用程式看起來和感覺就像本地應用程式。它提供了一套豐富的預先設計好的UI元件，這些元件針對移動裝置進行了優化，可以根據應用的需要進行定製。它還包括一些功能，如支援FastClick，這有助於消除觸控事件的延遲，以及懶惰載入，這使得應用程式的載入時間更快。
下面是一個例子的程式碼片段，顯示瞭如何使用Onsen UI建立一個簡單的按鈕：
<ons-button modifier="large--cta">Click me!</ons-button>
這段程式碼將建立一個文字為 “Click me!” 的按鈕，修改器類為 large--cta，這將改變按鈕的外觀，使其尺寸更大，顏色更適合作為行動呼籲按鈕。
10. Vaadin
Vaadin官網截圖
Vaadin Angular元件庫為Angular應用程式提供了45種以上的可訪問元件。這些元件針對網頁和移動檢視進行了優化，以提供良好的使用者體驗。
Vaadin特徵
- 響應性的佈局。
- 為你自己的設計系統提供良好的基礎。
- 用常見的輔助技術手動測試。
- 它能快速、安全地處理伺服器-客戶端的通訊和路由。
- 提供了鍵盤導航和螢幕閱讀器支援。
安裝
你可以使用NPM來安裝Vaadin，方法如下：
// with npm npm i @vaadin/vaadin-grid
用例
安裝完成後，你需要將Vaadin元件匯入到你的應用程式。
// app.components.ts import '@vaadin/vaadin-button'; import '@vaadin/vaadin-button';
然後，你可以在你的應用程式中使用Vaadin元件，如下所示：
// app.components.html
<vaadin-horizontal-layout theme="spacing" style="align-items: baseline">
<vaadin-button @click="${() => this.counter++}"> Button </vaadin-button>
<p> Clicked ${this.counter} times </p>
</vaadin-horizontal-layout>
小結
現在，元件庫已被廣泛接受為Web開發的標準做法。元件庫通過提供一種方便有效的方式來開發UI元件，幫助Angular成為最流行和最廣泛使用的前端開發框架之一。
上述庫提供了預建的和可定製的UI元件，幫助開發者以較少的精力建立高質量和一致的使用者介面。最終，庫的選擇將取決於專案的具體需求和開發者的偏好。
評論留言