顶级 Angular 开源项目

Angular 是一个非常健壮、流行的 Web 框架,主要用于构建单页应用程序 (SPA)。

在本文中,我们将讨论开源 Angular 2.x 项目。许多开发者和公司早就关闭了他们的 AngularJS 项目,所以再开始在这个框架上进行开发是不合理的。

在列出项目之前,我们将描述 Angular 框架的一些特性。例如,项目类型最适合。使用 Angular 有什么好处?与 Vue 和 React 相比,我们还将描述 Angular 中的一些开源社区功能。

Angular应该用在哪些项目上?

如果您发现自己处于一个复杂的 Web 项目中,需要前端的业务逻辑、大量异步网络调用以及与用户体验相关的无缝外观,那么 Angular 是首选。

让我们看一些具体的例子:

企业网络应用程序。 正如 Angular 团队所声称的那样,Angular 具有开发大型项目所需的所有功能。

具有动态内容的应用程序。 Angular 是一种完美的技术,适用于内容应根据用户行为和偏好动态变化的网站。依赖注入确保如果一个组件被更改,与之相关的其他组件将自动更改。

渐进式网络应用程序。 Angular 配备了内置的 PWA 支持。

使用 Angular 的好处

基于组件的架构。

可重用性。 类似性质的组件被很好地封装。换句话说——自给自足。开发人员可以在应用程序的不同部分重用它们。

TypeScript:更好的工具、更简洁的代码、更高的可扩展性。

与平台无关的理念。 Angular 的开发考虑到了移动优先的方法。这个想法是在 Web、iOS 和 Android 应用程序中共享代码库并最终共享工程技能。

Angular Universal。 Angular Universal 是一项服务,允许在服务器而不是客户端浏览器上呈现应用程序视图。

Google 长期支持。 一些软件工程师认为 Angular 得到 Google 支持是该技术的主要优势。

React 开源社区 vs. Angular

如果你阅读了我们上一篇关于 React 开源项目的文章,我们想提醒你,Angular 上的高质量项目比使用 React 或 Vue 的项目少得多。在我们看来,这是由几个原因造成的:

• 按照普遍的看法,Angular 比 React 和 Vue 更难开发;

• 传统上,来自 Facebook 的开源项目获得了社区更多的知名度和支持;

• Angular 比较难学;

• 通常,Angular 用于使用较少开源工具的企业项目中;

• Angular 有两次重大升级,其中一次与前一次完全不兼容。许多项目因此而死亡。

现在让我们继续列出 Angular 上最流行、最有用和最伟大的项目。希望此选择能帮助您进行项目开发和日常工作,并可能为您节省大量时间和金钱。

顶级 Angular 开源项目

Angular 工具包

Angular-CLI

• GitHub:https://github.com/angular/angular-cli

• 星数: 21938

• 网址:https://cli.angular.io/

Angular CLI 是一个命令行界面工具,用于初始化、开发、搭建和维护 Angular 应用程序。

该工具将创建一个可以立即运行的新项目。它将创建所有需要的管道,以便在几分钟内启动并运行所有内容,生成基于 Angular 项目最佳实践的应用程序结构。

新元素将在适当的目录结构中创建。此外,还将生成源代码,此外,在某些情况下,代码将添加到项目中的其他元素中,以便可以在任何需要的地方使用新元素。

它提供了以下能力:

• 从头开始创建项目;

• 服务应用程序;

• 运行单元测试和端到端测试。

查看我们使用 Angular CLI 构建的管理模板

角材料

• GitHub:https://github.com/angular/components

• 星数: 18346

• 网址:https://material.angular.io/

Angular Material 既是一个 UI 组件框架,也是 Google 材料设计规范的参考实现。该项目基于 Material Design 提供了一组可重用、经过良好测试和可访问的 UI 组件。它将帮助您为您的 Web 应用程序创建一个丰富的、交互式的和面向设备的 UI。您无需购买任何使用 Angular Material 的许可证。

好处:

• 响应性;

• 跨平台用户界面组件;

• 有据可查;

• 范围广泛的 50 种组件可供选择;

• 释放任何属性后,都会记录在错误日志中。

Angularfire2

• GitHub:https://github.com/angular/angularfire2

• 星数: 5218

• 网址: –

AngularFire 是将 Angular 连接到 Firebase 的官方库。 AngularFire 通过可观察流提供实时更新,并且经过高度优化。在底层,AngularFire 还使用了一个名为“WebChannel”的自定义协议,该协议用于创建实时同步。

特征:

• 基于 Observable;

• 实时绑定;

• 认证;

• 离线数据;

• 服务器端渲染;

• ngrx 友好;

• 调用服务器代码;

• 推送通知。

用户界面

故事书

• GitHub:https://github.com/storybookjs/storybook

• 星数: 39575

• 网址:https://storybook.js.org/

Storybook 是一个开源工具,用于为 React、Vue 和 Angular 单独开发 UI 组件。

Storybook 在您的应用程序之外运行。这允许您单独开发 UI 组件,从而可以提高组件的重用性、可测试性和开发速度。您可以快速构建,而不必担心特定于应用程序的依赖关系。

该产品附带了许多用于组件设计、文档、测试、交互性等的附加组件。 Storybook 易于使用的 API 可以轻松地以各种方式进行配置和扩展。

该图书馆得到了 Atlassian、Airbnb 和 Lyft 等公司的认可。

清晰度

• GitHub:https://github.com/vmware/clarity/

• 星数: 4994

• 网址:https://clarity.design/

Project Clarity 是一个开源设计系统,它汇集了 UX 指南、HTML/CSS 框架和 Angular 组件。

Clarity 的设计源于不断的探索和研究。这些设计内置于我们的 HTML/CSS 组件中,无论底层 JavaScript 框架如何,它们都可以在任何 Web UI 中使用。 Clarity 还提供了一组构建在 Angular 之上的精心设计和实现的数据绑定组件。

弹性布局

• GitHub:https://github.com/angular/flex-layout

• 星数: 4126

• 网址: –

Angular Flex-Layout 使用 Flexbox CSS + mediaQuery 提供了一个复杂的布局 API。该模块使用自定义 Layout API、mediaQuery observables 和注入的 DOM flexbox-2016 CSS 样式为 Angular 开发人员提供组件布局功能。

Flex-Layout 引擎智能地自动化将适当的 Flexbox CSS 应用到浏览器视图层次结构的过程。这种自动化还解决了传统的、手动的、纯 CSS 的盒子 CSS 应用程序遇到的许多复杂性和变通方法。

然而,Flex-Layout 的真正强大之处在于它的响应引擎。

应用

NGX-Admin

• GitHub:https://github.com/akveo/ngx-admin

• 星数: 17301

• 网址:http://akveo.github.io/ngx-admin/

ngx-admin 在 GitHub 上有超过 15,000 颗星,是创建此列表时最受欢迎的 Angular 项目之一。数十个通用组件也被移动到一个名为 Nebular 的单独包中,该包可通过 npm 安装。该项目在 GitHub 上有相当全面的在线文档和社区支持。该模板由 Akveo 团队持续改进和维护。它带有三个漂亮的视觉主题(宇宙、灯光、企业)、两个仪表板(物联网和电子商务)和 40 多个页面。

角日历

• GitHub:https://github.com/mattlewis92/angular-calendar

• 星数: 1633

• 网址:https://mattlewis92.github.io/angular-calendar/

该产品是 Angular 6.0+ 的日历组件,可以在月、周或日视图中显示事件。该模板是高度可定制的。您可以构建自己的组件,而不是那些不符合您的项目规范的组件。

请注意,此库未针对移动设备进行优化。你需要自己做。

Angularspree

• GitHub:https://github.com/aviabird/angularspree

• 星数: 1302

• 网址:https://www.aviacommerce.org/

AngularSpree 是一个 Angular(7) 电子商务应用程序。

它是使用 Angular(7)、Redux、Observables 和 ImmutableJs 构建的 AviaCommerce API 的即插即用前端应用程序。

它不仅限于 Aviacommerce,还可以与任何具有 API 接口的电子商务解决方案一起使用。例如 Spreecommerce、Magento、Opencart 等。

该产品具有电子商务平台的标准功能,如阅读、更新产品、分类、管理优惠券等。

Angular 谷歌地图

• GitHub:https://github.com/SebastianM/angular-google-maps

• 星数: 1680

• 网址:https://angular-maps.com/

现在,这是一个非常有用的项目。它基本上允许您在 Google 地图中插入 Angular 组件。

开发者工具

NGRX

• GitHub:https://github.com/ngrx/platform

• 星数: 4996

• 网址:https://ngrx.io/

NGRX 是 Angular 的反应状态。 NgRx Store 为受 Redux 启发的 Angular 应用程序提供响应式状态管理。您可以统一应用程序中的事件并使用 RxJS 派生状态。

NgRx Effects 为您提供了一个框架,通过将操作的可观察对象连接到您的商店,将副作用与您的组件隔离开来。 NgRx Schematics 可帮助您避免编写常见的样板文件,而是专注于构建您的应用程序。

康波多克

• GitHub:https://github.com/compodoc/compodoc

• 星数: 2612

• 网址:https://compodoc.app/

Compodoc 是 Angular 应用程序的文档工具。它生成应用程序的静态文档。

该工具的目标是为 Angular 的所有通用 API 生成文档:模块、组件、可注入对象、路由、指令、管道和通用类。

Compodoc 支持 Angular 的所有主要 API。使用 Compodoc,主要端点位于文档的左侧,所有内容都在右侧。该产品带有 8 个主题,可从 Gitbook、Read the Docs 等著名文档工具或 Vagrant、Laravel、Postmark、Material design 和 Stripe 等项目中获得。

Compodoc 包含一个强大的搜索引擎 (lunr.js),可以轻松找到您的信息。 API 目录是使用在文件解析期间找到的元素生成的。无需服务器,也无需在线上传资源。 Compodoc 支持开箱即用的 Angular-CLI 项目。

NGX 图表

• GitHub:https://github.com/swimlane/ngx-charts

• 星数: 3103

• 网址:https://swimlane.github.io/ngx-charts/#/ngx-charts/bar-vertical

NGX — 图表是 Angular2 的声明性图表框架。 Ngx-charts 是独一无二的:它不包装 d3。它使用 Angular 渲染和动画 SVG 元素及其所有绑定和速度优势,并使用 d3 实现出色的数学函数、比例、轴和形状生成器等。通过让 Angular 完成所有渲染,它为 Angular 开辟了无限的可能性平台提供如 AoT、Universal 等。

样式也可以通过 CSS 完全自定义,因此您可以随意覆盖它们。此外,通过利用通过 ngx-charts 模块公开的各种 ngx-charts 组件,可以构建自定义图表。

Angular UI 路由器

• GitHub:https://github.com/angular-ui/ui-router

• 星数: 13890

• 网址:https://ui-router.github.io/

Angular UI-Router 是 Angular 的客户端单页应用程序路由框架。

UI-Router 应用程序被建模为状态的分层树。 UI-Router 提供了一个状态机,以类似事务的方式管理这些应用程序状态之间的转换。

UI-Router 提供基于状态的路由。应用程序的每个功能都被定义为一个状态。一种状态随时处于活动状态,UI-Router 管理状态之间的转换。状态使用视图(或多个视图)定义功能的 UI(和 UI 行为)。

入门套件

角启动器

• GitHub:https://github.com/PatrickJS/angular-starter

• 星数: 10277

• 网址: –

Angular Starter 可作为任何希望快速启动和运行 Angular 和 TypeScript 的人的 Angular 启动器。它使用 Webpack 4 来构建文件并协助样板文件。该工具还使用 Protractor 进行端到端故事,使用 Karma 进行单元测试。

对于任何想要开始他们的项目的人来说,这是一个很棒的 Angular 种子库。它在 Angular 的文件和应用程序组织方面具有最佳实践。该项目具有 Ahead of Time (AoT) 编译功能,可快速加载您的生产构建和摇树以自动从生产包中删除未使用的代码。

Angular 全栈生成器

• GitHub:https://github.com/angular-fullstack/generator-angular-fullstack

• 星数: 6082

• 网址:https://angular-fullstack.github.io/

用于创建 MEAN/SEAN 堆栈应用程序的 Yeoman 生成器,使用 ES2017、MongoDB/SQL、Express、Angular 和 Node — 让您可以按照最佳实践快速设置项目。

其他项目

很棒的 Angular

• GitHub:https://github.com/PatrickJS/awesome-angular

• 星数: 6643

• 网址: –

Angular 种子库、启动器、样板、示例、教程、组件、模块、视频以及 Angular 生态系统中的任何其他内容的精彩列表。

Angular 性能检查表

• GitHub:https://github.com/mgechev/angular-performance-checklist

• 星数: 2772

• 网址: –

本文档包含一系列实践,这些实践将帮助我们提高 Angular 应用程序的性能。 “Angular Performance Checklist”涵盖了不同的主题——从我们的应用程序的服务器端预渲染和捆绑到运行时性能和框架执行的更改检测的优化。

Nx

• GitHub:https://github.com/nrwl/nx

• 星数:3k

• 网址:https://nx.dev

该工具是根据 Google 开发的最佳实践构建的。它可以帮助您连接前端和后端、与您的同事协作以及组织测试。

Zvz100032 应用NG

• GitHub:https://github.com/nrwl/nx

• 星数:3k

• 网址:https://nx.dev

80 多个用于 Angular 的 UI 组件,可让您专注于业务逻辑。您无需浪费时间解决复杂用户界面的问题。

原文发表于flatlogic.com

文字来源:https://flatlogic.com/blog/top-angular-open-source-projects/

关于Flatlogic

在 Flatlogic,我们开发了管理仪表板模板和React Native模板。我们被列入白俄罗斯和立陶宛的 20 强 Web 开发公司。在过去的 6 年中,我们为小型初创企业和大型企业成功完成了 30 多个大型项目](https://flatlogic.com/case-studies)。作为一个团队,我们始终渴望帮助我们的客户。