2021 年最值得推荐的 7 个 Angular 前端组件库 | 您所在的位置:网站首页 › angular表格控件 › 2021 年最值得推荐的 7 个 Angular 前端组件库 |
摘要: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,480Material 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 BootstrapBootstrap 是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 BootstrapNG 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. NebularNebular 是一个可定制的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. ClarityClarity也是一款有自己设计体系的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团队,欢迎来这里和我们一起打造优雅高效的人机设计/研发体系。招聘邮箱:[email protected]。 文/DevUI Kagol 往期文章推荐 《html2canvas实现浏览器截图的原理(包含源码分析的通用方法) 》 《在瀑布下用火焰烤饼:三步法助你快速定位网站性能问题(超详细) 》 《手把手教你使用Rollup打包并发布自己的工具库 》 |
CopyRight 2018-2019 实验室设备网 版权所有 |