摘要：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 日的数据：

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 利用。

它有多受欢迎呢？咱们看一组数据就晓得了。

从以上数据能够看到，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 仿佛略占上风：

从版本公布工夫来看，NGX Bootstrap 则要早一些：

从以上数据能够看出，不论是首次公布版本还是第一个正式版本，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 日的数据：

4. Nebular

Nebular 是一个可定制的 Angular UI 库，基于 Eva Design 设计规范，蕴含 40 多个 UI 组件，4 个可视主题，认证和平安模块。

Nebular 蕴含的组件并不多，只有 40+ 个，不过它蕴含了很多实用的工具，比方：主题包、登录认证、角色鉴权治理、Admin 零碎等。

有这方面需要的话，还是能够尝试的。

Nebular 的公布工夫和 Zorro 的很靠近，都是 17 年 8 月份公布第一个版本，第二年公布第一个正式版本，不过从 Github Star/Fork 和 NPM 周下载量来看，Nebular 略微逊色一些：

5. PrimeNG

接下来给大家举荐的 PrimeNG 也是一款国外的 Angular 组件库，这是一款老牌 Angular 组件库，2016 年 2 月就公布了第一个版本，公布工夫比官网的 Material 还早一些。

PrimeNG 的组件十分丰盛，一共有 90+ 个组件，可能是目前市面上最全的 Angular 组件库了。

以下是 PrimeNG 的数据：

6. Clarity

Clarity 也是一款有本人设计体系的 Angular 组件库，基于 Clarity Design 设计语言，这和 Teambition 的 Clarity Design 名字一样，然而是不同公司的不同产品，不要搞混。

7. DevUI

最初要举荐的是一款国内的新兴 Angular 组件库，叫 DevUI，基于 DevUI Design 设计语言。

DevUI 是一款面向企业中后盾产品的开源前端解决方案，它提倡 沉迷 、 灵便 、 至简 的设计价值观，提倡设计者为实在的需要服务，为少数人的设计，回绝哗众取宠、取悦眼球的设计。

DevUI 是从华为云 DevCloud 研发工具体系孵化进去的，最适宜做 ToB 的工具类产品，因为这类产品不谋求酷炫的款式，而更在意工具是否稳固、应用起来是否高效，是否能真正让用户遗记工具，在应用工具的过程中达到心流状态。

因为 DevCloud 是研发工具类的产品，场景丰盛，这使得孵化于其中的 DevUI 造成了本人独特的劣势，DevUI 提供了很多其余 UI 组件库没有的特色组件，比方甘特图、象限图，以及新出的分类搜寻、精灵导航等。

DevUI 在 2017 年初的时候就曾经在 DevCloud 泛滥业务中应用，通过这许多年，DevUI 曾经禁受了 DevCloud 大量线上用户的考验，成为稳固、高效、体验晦涩的 Angular 组件库。

如果你正在开发 ToB 的 工具类产品，DevUI 将是一个很不错的抉择！

退出咱们

咱们是 DevUI 团队，欢送来这里和咱们一起打造优雅高效的人机设计 / 研发体系。招聘邮箱：muyang2@huawei.com。

文 /DevUI Kagol

往期文章举荐

《怎么晓得用户是否喜爱咱们的新个性？》

《手把手教你搭建本人的 Angular 组件库》

《手把手教你如何应用象限图组件》