摘要：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 是兩個不同的項目團隊的兩個不同的項目，它們都可以只使用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
往期文章推薦
《html2canvas實現瀏覽器截圖的原理（包含源碼分析的通用方法） 》