2021年最值得推薦的7個Angular前端組件庫 - DevUI

摘要：DevUI 是一款面向企業中後臺產品的開源前端解決方案，它倡導沉浸、靈活、至簡的設計價值觀，提倡設計者爲真實的需求服務，爲多數人的設計，拒絕譁衆取寵、取悅眼球的設計。若是你正在開發 ToB 的工具類產品，DevUI 將是一個很不錯的選擇！

DevUI是一支兼具設計視角和工程視角的團隊，服務於華爲雲DevCloud平臺和華爲內部數箇中後臺系統，服務於設計師和前端工程師。

官方網站： devui.design

Ng組件庫： ng-devui（歡迎Star）

官方交流：添加DevUI小助手（devui-official）

DevUIHelper插件：DevUIHelper-LSP（歡迎Star）

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的。

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

指標	數值
Star	21.4k
Fork	5.7k
NPM周下載	891,480

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框架，用於開發響應式佈局、移動設備優先的Web應用。

它有多受歡迎呢？咱們看一組數據就知道了。

框架/庫	Star數
Vue	182k
React	167k
Bootstrap	149k
Angular	72.5k

從以上數據能夠看到，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彷佛略佔上風：

指標	NG Bootstrap	NGX Bootstrap
Star	7.7k	5.3k
Fork	1.4k	1.7k
NPM周下載	386,485	235,662

從版本發佈時間來看，NGX Bootstrap則要早一些：

指標	NG Bootstrap	NGX Bootstrap
首次發佈版本	1.0.0-alpha.0 2016年7月	1.0.1-beta.2 2016年1月
第一個正式版本	1.0.0 2018年1月	1.0.4 2016年2月

從以上數據能夠看出，不論是首次發佈版本仍是第一個正式版本，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

第三個要重點推薦的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日的數據：

指標	數值
Star	7.4k
Fork	2.6k
NPM周下載	35,941

4. Nebular

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

Nebular包含的組件並很少，只有40+個，不過它包含了不少實用的工具，好比：主題包、登陸認證、角色鑑權管理、Admin系統等。

有這方面需求的話，仍是能夠嘗試的。

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

指標	數值
Star	7k
Fork	2.6k
NPM周下載	17,037

5. PrimeNG

接下來給你們推薦的PrimeNG也是一款國外的Angular組件庫，這是一款老牌 Angular 組件庫，2016年2月就發佈了第一個版本，發佈時間比官方的 Material 還早一些。

PrimeNG 的組件很是豐富，一共有90+個組件，多是目前市面上最全的Angular組件庫了。

如下是 PrimeNG 的數據：

指標	數值
Star	6.7k
Fork	3.3k
NPM周下載	260,712

6. Clarity

Clarity也是一款有本身設計體系的Angular組件庫，基於Clarity Design設計語言，這和 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 將是一個很不錯的選擇！

指標	數值
Star	638
Fork	106

加入咱們

咱們是DevUI團隊，歡迎來這裏和咱們一塊兒打造優雅高效的人機設計/研發體系。招聘郵箱：muyang2@huawei.com。

文/DevUI Kagol

往期文章推薦

《怎麼知道用戶是否喜歡咱們的新特性？》

《手把手教你搭建本身的Angular組件庫》

《手把手教你如何使用象限圖組件 》