6 个受欢迎的 Angular 库

Angular Material 是由 Google 开发的一款工具，是适合与 Angular 框架一起使用的 UI/UX 组件库。

1.Angular Material

Angular Material 是由 Google 开发的一款工具，是适合与 Angular 框架一起使用的 UI/UX 组件库。Angular Material 提供功能性 UI 组件、样式和动画，以创建专业和现代化的界面。组件包括表单元素、导航元素、数据表和图形等功能。Angular Material 可帮助您为 Angular 应用程序创建高质量且移动友好的界面。

吸引用户并访问应用程序中可用的项目或组件。它还可以帮助我们设计具有独特样式和形状的应用程序。

这些组件使应用程序或网站更加一致，并使设计具有响应性。它将成功设计的经典原则与创新和技术相结合。

谷歌于 2014 年开发了 Angular Material。当时，它被标记为 AngularJS，旨在使应用程序更具吸引力和更快的性能。谷歌从头开始重写代码并删除了 JS，然后在 2016 年 9 月将其命名为 Angular Material。UI/UX 组件被称为 Angular Materials。

安装

您可以使用 NPM 或 Yarn 安装 Angular Material，如下所示。

复制

// with npmnpm i @angular/material

// with yarnyarn add @angular/material1.2.3.4.5.6.

2.NGX  Bootstrap

NGX Bootstrap 是 Angular 框架的 UI 组件库。它为 Angular 应用程序适配了 Bootstrap 4 风格，并为 Angular 应用程序提供了强大而灵活的 UI 组件。NGX Bootstrap 包括流行的 UI 组件，例如模态窗口、旋转木马、下拉菜单、选项卡、警报和 toast 通知。Angular 开发人员经常首选它，因为它易于使用和配置。

所有组件均采用模块化设计。自定义模板，样式可以轻松应用。

所有组件都是可扩展和适应性强的，并且在桌面和移动设备上以相同的易用性和性能工作。

• 所有组件都使用最新的代码维护和可读性风格指南和准则。

• 所有组件都经过全面的单元测试，并支持最新的角度版本。

• 所有组件都有丰富的文档和良好的编写。

• 所有组件都有多个工作演示来展示多种类型的功能。

ngx bootstrap 是一个开源项目。由麻省理工学院许可证支持。

安装

您可以使用 NPM 或 Yarn 安装 NGX Bootstrap，如下所示。

复制

// with npmnpm i ngx-bootstrap

// with yarnyarn add ngx-bootstrap1.2.3.4.5.6.

3.NG Bootstrap

ng-bootstrap 是一个开源存储库，它提供了几个使用 Bootstrap 4 CSS 构建的原生 Angular 小部件。如您所知，Bootstrap 是最流行的 CSS 框架之一，用于使用 HTML、CSS 和 JavaScript 库创建时尚现代的应用程序。

要在 Angular 应用程序中使用 Bootstrap 框架，我们之前必须使用 bootstrap CSS 和 JavaScript 文件，但是“ng-bootstrap”为我们提供了在 Angular 应用程序中没有任何 JS 文件的情况下使用它的最佳方法。

“ng-bootstrap”提供了一个可以加载到我们的 Angular 应用程序中的模块，它为我们提供了原生的 Angular 组件和小部件，我们可以在使用其他 Angular 提供的组件或我们的自定义组件时使用它们。

由于“ng-bootstrap”是一个封装了所有 Bootstrap 功能的模块，因此无需在我们的 Angular 应用程序中使用任何其他第三方库。因此，不依赖于 jQuery 甚至 Bootstrap 的 JavaScript 库。

Bootstrap 4.0.0（仅 CSS 文件，不需要 Bootstrap.js 和 Bootstrap.min.js）Angular 4+ 和 Bootstrap 4.0.0 都支持所有浏览器，具有 CSS 支持的相同浏览器交集。

多种小部件可供选择，包括所有 Bootstrap 小部件。

开发人员可以使用 Bootstrap 组件，如模式、轮播、进度条等。

对 Angular 有基本的了解就足以使用 NG Bootstrap。

组件轻巧且响应迅速。

该库不依赖于其他依赖项。

所有组件都经过 100% 覆盖率测试。

大型社区支持。

安装

您可以使用 NPM 或 Yarn 安装 NG Bootstrap，如下所示。

复制

// with npmnpm i @ng-bootstrap/ng-bootstrap 

// with yarnyarn add @ng-bootstrap/ng-bootstrap1.2.3.4.5.6.

4.Angular 的 Onsen UI

Angular 的 Onsen UI 是 Angular 框架的 UI 组件库。它针对移动应用程序进行了优化，并使用 HTML5 和 CSS 技术进行设计。Angular 的 Onsen UI 为 Angular 应用程序提供移动友好且功能强大的 UI 组件，但也可用于桌面浏览器。组件包括流行的 UI 组件，例如，导航元素、表单元素、选项卡、模态窗口和 toast 通知。Angular 的 Onsen UI 是一个选项，它具有简单易用的 API，可以与 Angular 一起使用。

Onsen UI 是独立于框架的，这意味着开发人员可以使用或不使用任何 JavaScript 框架来创建应用程序。Onsen UI 还包括额外的连接器包，使其 API 易于与流行的框架一起使用，例如：

• React

• Vue

• AngularJS1

• Angular 2+

Onsen UI 针对移动设备进行了性能优化，因此,适用于移动 Web 应用程序开发。

安装

您可以使用 NPM 轻松安装 Onsen UI，如下所示。

复制

// with npmnpm install onsenui ngx-onsenui --save1.2.

5.PrimeNG

PrimeNG 是 Angular 框架的 UI 组件库。PrimeNG 为 Angular 应用程序提供专业和多功能的 UI 组件。组件包括数据表、图表、滑块、下拉列表、选项卡、灯箱、树和许多其他功能性 UI 组件。PrimeNG 旨在提高 Angular 应用程序的性能和用户体验，并且易于配置。它还可以与 Angular 一起使用，并提供主题支持。

• 超过 80 种不同的组件。

• 主题设计器可让您创建自己的主题。

• 任何人都可以轻松开始使用 PrimeNG 提供的专业设计、可定制的模板。

• 200 多个图标。

• 280 多个 UI 块。

• 它不断更新。如果出现任何问题，可以迅速解决。

安装

您可以使用 NPM 或 Yarn 安装 PrimeNG，如下所示。

复制

// with npmnpm i primeng

// with yarnyarn add primeng1.2.3.4.5.6.

6.NG Lightning 

NG Lightning 是一个流行的用于 Salesforce 开发的 Angular 组件库。该库依靠输入功能为最终用户提供更好的性能。它建立在原生 Angular 组件和闪电设计系统之上。

• 它专注于改进性能和更大的开发灵活性。

• Angular 和 Salesforce 开发方面的专家。

• 用 TypeScript 编写。

安装

您可以使用 NPM 安装 NG Lightning，如下所示。

复制

npm install --save ng-lightning

​

技术前沿拓展

前端开发，你的认知不能仅局限于技术内，需要发散思维了解技术圈的前沿知识。细心的人会发现，开发内部工具的过程中，大量的页面、场景、组件等在不断重复，这种重复造轮子的工作，浪费工程师的大量时间。

介绍一款程序员都应该知道的软件JNPF快速开发平台，很多人都尝试用过它，它是功能的集大成者，任何信息化系统都可以基于它开发出来。

这是一个基于 Java Boot/.Net Core 构建的简单、跨平台快速开发框架。前后端封装了上千个常用类，方便扩展；集成了代码生成器，支持前后端业务代码生成，实现快速开发，提升工作效率；框架集成了表单、报表、图表、大屏等各种常用的 Demo 方便直接使用；后端框架支持 Vue2、Vue3。如果你有闲暇时间，可以做个知识拓展。

看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

​