【.com速译】作为目前流行的JavaScriptweb框架之一，Angular将各种服务的执行过程隐藏在框架深处，为开发者提供各种内部机制的构建工具。与React类似，Angular鼓励用户使用各种组件，将应用程序接口(API)拆分为多个可重用的部分。下面，我们将列出12个当前流行的AngularUI库。虽然它们中的大多数是为Angular2+设计的，但其中一些也可以用于旧的框架版本。此外，它们的优势在于您可以从这些Angular库中提取单个组件并在您自己的项目中使用它们，而无需安装整个代码库。1.ClarityClarity是VMware创建的开源设计系统，在GitHub上有6200颗星。它由UX设计指南、HTML/CSS框架和Angular组件组成。Clarity为开发人员提供了一组高性能的数据绑定组件。如下图所示，代码库可以实现大量交互元素，例如：手风琴式折叠组件、日期选择器、登录名、标志、时间线、切换键等。Clarity库的视觉效果组件（来源:https://clarity.design/)Clarity库的登录组件（来源：https://clarity.design/）Clarity库的时间线组件（来源：https://clarity.design/）design/)2.Material作为Angular的官方组件库，Material实现了Google的MaterialDesign语言（MaterialDesign）的概念。它在GitHub上有21,200颗星。作为UI组件代码的示例，Material是根据Angular开发团队的指南编写的。用户可以通过这样的代码库实现交互元素，包括自动完成、表单字段、进度旋转器、滑块、步进器和选项卡。Material的视觉效果组件库（来源：https://material.angular.io/）3.NGXBootstrapNGXBootstrap库在GitHub上有5300颗星。它提供的基础组件实现了专门为Angular编写的Bootstrap模板功能。它旨在让用户设计可扩展和适应性强的PC和移动应用程序。通过它提供的各种元素形式，用户可以使用这个代码库组合各种自定义HTML（如下图所示）、各种手风琴式折叠组件、轮播组件（carousel）、分页和添加pager分页等元素到您自己的应用程序。CustomHTMLcomponentforNGXBootstraplibrary(source:https://valor-software.com/ngx-bootstrap/)BasiccarouselcomponentforNGXBootstraplibrary(source:https://valor-software.com/ngx-bootstrap/)4.PrimeNGPrimeNG是一个包含70多个UI组件的集合库。同时能够提供“MaterialDesign”、“FlatDesign”等不同类型的风格。PrimeNG在GitHub上有大约6600颗星，并被eBay、Fox和其他公司使用。代码库可以提供：不同形式的字段、各种按钮、菜单格式、消息、色块高亮（吐司）和时间轴功能。PrimeNG库的组合输入域（FieldsofField）组件（来源：https://www.primefaces.org/primeng/）PrimeNG库的按钮组件形式（来源：https://www.primefaces.org/primeng/）PrimeNG库的菜单组件形式（来源：https://www.primefaces.org/primeng/）PrimeNG库的消息、色块高亮和时间线组件（来源：https://www.primefaces.org/primeng/)5.NGBootstrap流行的库NGBootstrap包含许多可用于AngularBootstrap4样式的组件。由于它取代了不再受支持的Angular-UIBootstrap项目，它在GitHub上有大约7.7k星。NGBootstrap测试覆盖率高，不依赖第三方JS。目前，它自带多种日期选择器、进度条、基本表格样式以及不同色块高亮显示等功能选项。NGBootstrap库的日期选择器组件（来源：https://ng-bootstrap.github.io/）NGBootstrap库的进度条组件（来源：https://ng-bootstrap.github.io/）NGBootstrap库的表格组件（来源：https://ng-bootstrap.github.io/)NGBootstraplibrary'scolorblockhighlightingcomponent(来源：https://ng-bootstrap.github.io/)6.TeradataCovalentUIPlatformTeradataCovalentUIPlatform有22kstars在GitHub上。代码库采用风格指南和设计模式，使用户更容易阅读代码。由于平台的配置，开发人员可以更专注于应用程序的定制，从而加快开发过程。该平台成功地遵循了原子设计原则——在模块化设计中，较小的组件组??合成较大的组件。以此为例合理组合按钮。此外，它还提供用户配置文件、面包屑（breadcrumbs）、分步导航和文本编辑器功能。TeradataCovalentUI平台的用户配置文件组件（来源：https://teradata.github.io/covalent/v3/#/）TeradataCovalentUI平台库的步进导航组件（来源：https://teradata.github.io/covalent/v3/#/)TeradataCovalentUIPlatform库的文本编辑器组件（来源：https://teradata.github.io/covalent/v3/#/）7.Nebular作为一个可定制的组件库，Nebular拥有6.9k星在GitHub上。它通过六个视觉主题和可自定义的组件显着简化了应用程序开发。值得一提的是，Nebular具有为API提供身份验证和安全层的模块，还可以提供诸如：逐步导航、下拉菜单、聊天组件和注册表单等功能。Nebular库的分步导航组件（来源：https://akveo.github.io/nebular/）Nebular库的下拉列表菜单组件（来源：https://akveo.github.io/nebular/）Nebularlibrary'sChatcomponent(source:https://akveo.github.io/nebular/)Nebularlibraryregistryformcomponent(source:https://akveo.github.io/nebular/)8.OnsenUIOnsenUI库方便用户使用JavaScript为Android和iOS平台开发移动混合应用程序。该代码库在GitHub上有8300颗星。它通过各种绑定提供不同的视觉效果样式。此外，OnsenUI还提供了操作表、警报对话框、各种按钮和弹出框等功能。OnsenUI库的ActionMenu组件（来源：https://onsen.io/angular2/）OnsenUI库的AlertDialog组件（来源：https://onsen.io/angular2/）OnsenUI库的按钮组件形式（来源：https://onsen.io/angular2/）OnsenUI库的弹窗组件（来源：https://onsen.io/angular2/）9.NG-Zorro全面支持TypeScript的NG-Zorro，旨在在为开发者提供各种高端组件，可用于创建AntDesign风格的界面值得一提的是代码库是由我们中国开发者创建的，在GitHub上有7400颗星。目前可提供菜单栏、页面标题、滑块、头像创建（Avatar）等多种功能。NG-Zorro库各种页面标题组件形式（来源：https://ng.ant.design/docs/introduce/zh-CN）NG-Zorro库各种滑块组件形式（来源：https://ng.ant.design/docs/introduce/zh-CN)NG-Zorro库的各种头像制作组件形式(来源:https://ng.ant.design/docs/introduce/zh-CN)10.VaadinVaadin库提供视觉元素设计弥合Angular组件和Polymer元素之间的差距。代码库不仅支持材料设计，还包含适合移动和桌面开发的各种组件。当然，这些组件分别存储在不同的存储库中。Vaadin提供了拆分布局、按钮、应用布局（AppLayout）、上传表单等功能。Vaadin库的应用布局组件（来源：https://vaadin.com/）11.NGSemantic-UI作为Angular应用组件的NGSemantic-UI库包括27个组件。它不仅基于流行的Semantic-UI前端解决方案，而且在GitHub上也有大约1000颗星。NGSemantic-UI可以提供卡片、加载器、手风琴式折叠组件和各种菜单等工具。NGSemantic-UI库的卡片组件（来源：https://ng-semantic.herokuapp.com/#/）NGSemantic-UI库的各种菜单组件形式（来源：https://ng-semantic.herokuapp.com/#/)12.NG2图表NG2图表库在GitHub上有1.9k星。它为开发人员提供了用于创建六种图表的Angular指令。由于其属性基于chart.js，因此此代码库可用于呈现大型数据集和显示列表。目前支持各种折线图、柱状图、圆环图、雷达图、饼图、极坐标面积图、气泡图、散点图。来自NG2图表库的折线图（来源：https://valor-software.com/ng2-charts/#/LineChart）来自NG2图表库的条形图（来源：https://valor-software.com/ng2-charts/#/LineChart）NG2Charts库的环形图（来源：https://valor-software.com/ng2-charts/#/LineChart）NG2Charts库的雷达图（来源：https://valor-software.com/ng2-charts/#/LineChart）NG2海图库饼图（来源：https://valor-software.com/ng2-charts/#/LineChart）NG2海图库极坐标面积图（来源：https://valor-software.com/ng2-charts/#/LineChart）valor-software.com/ng2-charts/#/LineChart）NG2图表库的气泡图（来源：https://valor-software.com/ng2-charts/#/LineChart）NG2图表库的散点图（来源：https://valor-software.com/ng2-charts/#/LineChart）原标题：TheMostPopularAngularUILibrariesToTryin2021，作者：AnastasiaKushnir作者及出处为.com]
