Angular 是一款能夠跨Web、行動Web、行動應用程式、原生應用程式和桌面原生應用程式多個平台的前端框架，經過數十年的發展，已形成了一個龐大的生態，基於Angular的組件庫也是多如牛毛。

2021年如果你想嘗試 Angular 框架，以下 Angular 元件庫或許是不錯的選擇！

1. Material Design for Angular

首先要推薦的，當然是Angular 官方的Material 元件庫， Material Design 是Google 的一套設計系統。

基於這套設計體系，官方和社群都提供了各種元件庫，有Web端（Angular/React/Vue ）的，也有行動端（Android/iOS/Flutter）的。

其中Angular 版本的Material 元件庫，現在已經是Angular官方指定的元件庫，所以受眾特別多，不管是在Github的Star/Fork數，還是在NPM的周下載量都是TOP 1的。 【相關推薦：《angular教學》】

以下是2021年4月19日的資料：

##指標數值Star## ForkNPM週下載#891,480

	#21.4k
5.7k

Material Design for Angular

早在2016年3月份就發布了第一個基於Angular 2的Alpha版本：2.0.0-alpha.0，中間演進了一年多，遲遲沒有發布2.0的正式版本，直到第二年12月才發布基於Angular 5的5.0.0正式版本。 不過 Material Design for Angular 卻不是最早的 Angular 元件庫，後面我們將要介紹的 PrimeNG 比它更早誕生，但 Material 毫無疑問是最受歡迎和最受歡迎的。

2. NG/NGX Bootstrap

#Bootstrap

是Twitter推出的一個用於前端開發的開源工具包，也是非常受歡迎的HTML/CSS/JS框架，用於開發響應式佈局、行動裝置優先的網路應用。 它有多受歡迎呢？我們看一組數據就知道了。

框架/函式庫VueReactBootstrap#Angular#

從以上資料可以看到，Bootstrap甚至比Angular框架的Star數還多，可見Bootstrap的受歡迎程度，因此基於Bootstrap的Angular元件庫也很受歡迎就不難想像了。

以Bootstrap為基礎的Angular元件庫主要有兩款：

• NG Bootstrap
• ##NGX Bootstrap

#NG Bootstrap 和NGX Bootstrap 是兩個不同的專案團隊的兩個不同的項目，它們都可以只使用Bootstrap無需使用jQuery就可以在Angular中使用。主要差異在於它們所支援的Bootstrap版本：

##NGX Bootstrap支援Bootstrap 3和4

• NG Bootstrap支援Bootstrap 4，並且需要Angular5
• #從Github Star/Fork和NPM週下載量來看，它們也是相當的，NG Bootstrap似乎略佔上風：

Star數字
#182k
167k
149k
72.5k

##指標##NG BootstrapStar7.7k1.4k#1.7k386,485235,662指標

NGX Bootstrap
	##5.3 k	Fork
	##NPM週下載
		##從版本發佈時間來看，NGX Bootstrap則要提早一些：

NG Bootstrap

NGX Bootstrap1.0.1-beta.2 2016年1月從以上數據可以看出，不管是首次發布版本還是第一個正式版本，NGX Bootstrap都比NG Bootstrap早些，特別是第一個正式版本的發佈時間，NGX Bootstrap比NG Bootstrap早了整整兩年。 因此我們可以大致了解，NGX Bootstrap是一個比較早的函式庫，並且能支援Angular 2 和Bootstrap 3 ，而NG Bootstrap則比較新，需要Angular 5 和Bootstrap 4 才能使用。 如果你的專案是使用Angular 5 和Bootstrap 4 的新項目，建議使用NG Bootstrap，否則就使用NGX Bootstrap。 3. NG Zorro

	##首次發布版本	1.0.0-alpha.0 2016年7月
#第一個正式版本	1.0.0 2018年1月	1.0.4 2016年2月

第三個要重點推薦的Angular元件庫是基於

Ant Design

設計系統的

NG Zorro

元件庫。

Ant Design 是螞蟻金服的設計語言，經歷過多年的迭代和積累，它對UI的設計思想已經成為一套事實標準，受到眾多前端開發者及企業的追捧和喜愛，也是React開發者手中的神兵利器。

作為Ant Design的Angular實現，NG Zorro不僅繼承了Ant Design的獨到思想和極致體驗，同時也結合了Angular框架的優點和特性。元件的風格與Ant Design最新版本保持同步，元件的介面也盡量保持與Ant Design的React版本一致。 說Zorro是國內最受歡迎的Angular元件庫，相信沒有人會反對。 2017年8月，Zorro正式

開源

並發布第一個版本：

0.5.0-rc.0

，經過一年的演進，於第二年6月發布1.0版本。

從知乎來看，Zorro的社群反應非常好：https://www.zhihu.com/question/63992236

以下是2021年4月19日的數據：

指標

數值

7.4kNPM週下載

Star
Fork	2.6k

####### 35,941###############

4. Nebular

Nebular 是可自訂的Angular UI庫，基於Eva Design設計規範，包含40多個UI組件，4個可視主題，認證和安全模組。

Nebular包含的元件不多，只有40 個，不過它包含了許多實用的工具，例如：主題包、登入認證、角色鑑權管理、Admin系統等。

有這方面需求的話，還是可以嘗試的。

Nebular的發佈時間和Zorro的很接近，都是17年8月份發布第一個版本，第二年發布第一個正式版本，不過從Github Star/Fork和NPM週下載量來看，Nebular稍微遜色：

##StarFork#2.6kNPM週下載

指標	#數值
	7k
	17,037

#5. PrimeNG

接下來給大家推薦的

PrimeNG也是國外的Angular元件庫，這是一款老牌Angular 元件庫，2016年2月就發布了第一個版本，發佈時間比官方的Material 還早一些。

PrimeNG 的元件非常豐富，一共有90 個元件，可能是目前市面上最完整的Angular元件庫了。

以下是PrimeNG 的資料：

指標數值##Star6.7k#ForkNPM週下載260,712#6. Clarity

3.3k

ClarityClarity Design指標數值

也是一款有自己設計體系的Angular元件庫，基於	設計語言，這和Teambition 的Clarity Design名字一樣，但是是不同公司的不同產品，不要搞混。
	Star

# #6.2k###############Fork######701############NPM週下載######### 18,014###############

7. DevUI

最後要推薦的是一款國內的新興Angular 元件庫，叫DevUI，基於DevUI Design 設計語言。

DevUI 是企業中後台產品的開源前端解決方案，它倡導沉浸、靈活、至簡的設計價值觀，提倡設計者為真實的需求服務，為多數人的設計，拒絕譁眾取寵、取悅眼球的設計。

DevUI 是從華為雲端DevCloud 研發工具體系孵化出來的，最適合做ToB 的工具類產品，因為這類產品不追求酷炫的樣式，而更在意工具是否穩定、使用起來是否高效，是否能真正讓使用者忘記工具，在使用工具的過程中達到心流狀態。

由於DevCloud 是研發工具類的產品，場景豐富，這使得孵化於其中的DevUI 形成了自己獨特的優勢，DevUI 提供了許多其他UI 元件庫沒有的特色元件，例如甘特圖、象限圖，以及新出的分類搜尋、精靈導航等。

DevUI 在 2017年初的時候就已經在 DevCloud 眾多業務中使用，經過這許多年，DevUI 已經經受了 DevCloud 大量線上用戶的考驗，成為穩定、高效、體驗流暢的 Angular 組件庫。

如果你正在開發 ToB 的工具類產品，DevUI 將會是個很不錯的選擇！

# #638106

指標	數值
Star
	Fork

更多程式相關知識，請造訪：

程式設計影片###！ ！ ###

以上是2021年值得嘗試的7個Angular前端元件庫，快來收藏吧！的詳細內容。更多資訊請關注PHP中文網其他相關文章！