顶级 Angular 开源项目

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

在本文中，我们将讨论开源的 Angular 2.x 项目。许多开发人员和公司早已关闭了他们的 AngularJS 项目，因此现在在这个框架上进行开发已不合理。

在列出项目之前，我们将介绍 Angular 框架的一些特性。例如，哪些项目类型最适合？使用 Angular 有哪些优势？我们还将比较 Angular 与 Vue 和 React 的一些开源社区特性。

哪些项目应该使用 Angular？

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

我们来看一些具体的例子：

企业 Web 应用程序。Angular 团队声称，Angular 拥有开发大型项目所需的所有功能。

具有动态内容的应用程序。Angular 是一种完美的技术，适用于内容应根据用户行为和偏好动态变化的网站。依赖注入确保当一个组件发生变化时，与其相关的其他组件也会自动更改。

渐进式 Web 应用程序。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 项目最佳实践的应用程序结构。

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

它具有以下能力：

• 从头开始创建一个项目；
• 送达申请；
• 运行单元测试和端到端测试。

角度材料

GitHub：https://github.com/angular/components
星级：18346
网站：https://material.angular.io/

Angular Material 既是一个 UI 组件框架，也是 Google Material Design 规范的参考实现。该项目提供了一组基于 Material Design 的可复用、经过充分测试且易于访问的 UI 组件。它将帮助您为 Web 应用创建丰富、交互且面向设备的 UI。您无需购买任何许可证即可使用 Angular Material。

好处：

• 响应能力；
• 跨平台用户界面组件；
• 有据可查；
• 有 50 种组件可供选择；
• 释放任何属性后，都会记录在错误日志中。

Angularfire2

GitHub：https://github.com/angular/angularfire2
星级：5218
网站：-

AngularFire 是连接 Angular 和 Firebase 的官方库。AngularFire 通过可观察流提供实时更新，并且经过高度优化。在底层，AngularFire 还使用名为“WebChannel”的自定义协议来实现实时同步。

特征：

• 基于可观察的；
• 实时绑定；
• 验证;
• 离线数据；
• 服务器端渲染；
• 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。该模块为 Angular 开发者提供了使用自定义布局 API、mediaQuery 可观察对象以及注入式 DOM flexbox-2016 CSS 样式的组件布局功能。

Flex-Layout 引擎可以智能地自动将合适的 Flexbox CSS 应用于浏览器视图层次结构。这种自动化流程还解决了传统手动、纯 CSS 的框式 CSS 应用过程中遇到的许多复杂性和解决方法。

然而，Flex-Layout 的真正威力在于它的响应引擎。

应用程序

NGX管理员

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 等。

该产品具有读取、更新产品、排序、管理优惠券等电商平台的一系列标准功能。

角度谷歌地图

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 为您提供了一个框架，通过将操作的可观察对象连接到您的 store，可以隔离组件的副作用。NgRx Schematics 可帮助您避免编写通用的样板代码，让您专注于构建应用程序。

Compodoc

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-charts 是 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 行为）。

入门套件

Angular Starter

GitHub：https://github.com/PatrickJS/angular-starter
星级：10277
网站：-

Angular Starter 是一款 Angular 入门工具，适合任何想要快速上手 Angular 和 TypeScript 的用户。它使用 Webpack 4 构建文件并辅助样板代码。此外，它还使用 Protractor 进行端到端故事编写，并使用 Karma 进行单元测试。

对于任何想要启动项目的人来说，这都是一个很棒的 Angular 种子仓库。它提供了 Angular 底层文件和应用程序组织的最佳实践。该项目支持提前编译 (AoT)，可快速加载生产版本的页面，并支持 tree shake，可自动从生产包中移除未使用的代码。

Angular 全栈生成器

GitHub：https://github.com/angular-fullstack/generator-angular-fullstack
星数：6082
网站：https://angular-fullstack.github.io/

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

其他项目

很棒的 Angular

GitHub：https://github.com/PatrickJS/awesome-angular
星数：6643
网站：-

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

Angular 性能检查表

GitHub：https://github.com/mgechev/angular-performance-checklist
星级：2772
网站：-

本文档包含一系列有助于我们提升 Angular 应用程序性能的实践。“Angular 性能检查表”涵盖了不同的主题——从应用程序的服务器端预渲染和打包，到运行时性能以及框架执行的变更检测的优化。

关于flatlogic

Flatlogic 开发管理仪表板模板和React Native模板。我们是白俄罗斯和立陶宛排名前 20 的 Web 开发公司之一。在过去的 6 年里，我们成功为小型初创公司和大型企业完成了30 多个大型项目。作为一个团队，我们始终渴望为客户提供帮助。

您可能还喜欢这些文章：

如何构建物联网仪表盘
顶级 React Native UI 组件套件
顶级日期选择器 JavaScript 插件和库

最初发布于flatlogic.com — React、Angular、Vue、Bootstrap 和 React Native 模板和主题。

文本来源：顶级 Angular 开源项目