javascript - AngularJS - 在单个 AJAX 调用中检索多个小部件的数据

Question

我有一个关于多个小部件的数据检索的架构问题。

我正在使用 AngularJS 构建一个大型 JavaScript 应用程序(一个迷你 SPA)。我想创建一个非常模块化的仪表板应用程序，其中包含交互式小部件，用户可以选择在布局系统的容器中包含、排除或重新定位这些小部件。用户可以与每个小部件交互，从而单独刷新其数据等等。每个小部件将显示与其他小部件非常不同的数据。

<小时/>

到目前为止，从架构上来说，每个小部件都将由这些 AngularJS 组件表示:

• 部分 View 模板(向用户显示数据)
• 一个 Controller (实现小部件行为并处理相应服务的成功回调)
• 一个服务(使用 $http 检索数据并向调用 Controller 返回一个 Promise 对象)

因此，每个小部件都能够通过调用特定端点的 Angular 服务提取自己的数据。

现在，当用户到达可能包含 5 个小部件的仪表板页面时，我不想对 5 个不同的服务器端点进行 5 个单独的并行 AJAX 调用。那效率不高；我想减少对服务器的并行请求。

相反，在到达页面时，我宁愿通过调用聚合了 5 个小部件的所有数据的端点来进行单个 AJAX 调用。

问题:假设服务器可以将来自 5 个小部件的所有数据捆绑/合并在一个巧妙的包装器中的 1 个 JSON 负载中，那么在 AngularJS 应用程序中，我将如何检索和分发该数据到 5 个小部件 Controller ，以便它们可以使用新的服务器数据初始化自己？

当然，我希望保留任何单个小部件仅刷新自身的能力。尽管到达仪表板页面之外的行为并不是我在这个问题中询问的内容。

也许有文章讨论过这个问题，但我还没有找到。

<小时/>

我已经想到了一个我认为“好”的架构想法，但我想知道是否有更好的解决方案。

可能性)除了进行 AJAX 调用的 5 个 Angular 服务之外，还引入了第 6 个名为 WidgetAggregateService 的服务。当执行 retrieveAllAndBroadcast() 方法时，该服务将自行处理成功回调，然后使用 $rootScope.$emit() 将有效负载发布到 5 个 Controller 。因此，WidgetAggregateService 将在 $rootScope 上使用中介模式(或 PubSub 模式)，5 个 Controller 可以通过 $rootScope.$on() 订阅该模式。每个小部件的 Controller 都可以获取聚合数据有效负载中的相关信息。

Answer 1

我和我的团队想出了一个解决方案......

API合约

我们开发了一个 API 合约，允许我们向服务器发出 1 个或多个小部件的请求(包括传递相关请求参数)，这些小部件将在 JSON 包装器中返回 1 个或多个小部件响应。因此我们可以通过以下方式进行检索:

• 单个小部件检索
• 多个(聚合)小部件检索 - 我们一次请求 2 个或更多小部件的数据。

在对服务器的一次调用中。

<小时/>

通过聚合检索将数据传递到小部件 Controller

1) 聚合检索:我们有一个 AngualrJS“页面” Controller ，负责在页面加载时对页面上的所有小部件进行聚合检索。它通过将 AJAX 请求委托(delegate)给 Ng 工厂来处理数据检索，从而发出对页面上所有 5 个小部件的请求 - 我们将其称为“PageResourceFactory”。

2) 转发到各个小部件资源工厂:成功将数据返回“PageResourceFactory”后，它会调用另一个工厂助手将相关响应转发到调用其设置方法的各个小部件资源工厂。因此，此时，所有 5 个小部件资源工厂都有其数据集。

3) 小部件 Controller 订阅新数据:在页面初始化期间，每个小部件 Controller 已经设置了对其自己的资源工厂的订阅，以实质上监听何时设置新数据(通过其资源工厂)设置方法)。因此， Controller 可以知道数据何时发生变化(无论小部件 Controller 是否发起检索)。

4) 小部件 Controller 绑定(bind)数据:每个小部件 Controller 都会收到数据更改的“通知”，因此可以通过将其放在绑定(bind)到 View 的范围上来做出相应的响应。

单次检索

这只是标准的 AJAX 检索。
1) Controller 通过资源工厂发出请求。

2) 资源工厂借助 $http 执行 AJAX 请求并将 Promise 对象传递回 Controller 。

3) Controller 获取数据(在成功调用 Promise 后)并将其绑定(bind)以供 View 显示。

<小时/>

这就是我们解决问题的方法。我确信还有其他可能性。