javascript - Angular - 从 CMS 延迟加载整个页面

Question

我正在尝试构建一个由称为 Prismic.io 的 CaaS/CMS 驱动的 Angular 应用程序。

该项目的第一阶段将是一个直接的内容筒仓(CMS 管理)，第二阶段将添加更复杂的网络应用程序组件。知道了这一点，我决定 Angular 是我最好的选择，但我正在努力想一个好的解决方案来从 Prismic API 延迟加载所有内容。

我决定探索的一个解决方案是拥有一个标准化的 $scope 变量，我们称它为 $scope.loaded。每个 Controller 将执行它必须执行的操作以查询我的 Prismic 服务以获取其各自的内容，一旦完成，它将设置 $scope.loaded = true。

我坚持使用这种方法的部分是如何在加载所有这些组件时准确地显示页面。最简单的方法是包含引用此 loaded 值的 ng-if 指令，但我觉得会出现大量无样式内容。是的，我可以使用微调器，但是让 90% 的页面都被微调器覆盖的想法似乎很愚蠢。

然后我想知道:如果我在所有 Controller 的 $scope.loaded 值都为真之前拉起应用程序的加载屏幕怎么办？在那种情况下，我如何知道哪些 Controller 当前在页面上处于事件状态并引用它们各自的范围？

(如果您对为什么这种方法不好有意见，我很乐意听到他们的答复而不是答案。我想这可能会产生太多的 http 请求，例如)。

Answer 1

这里有几个选项:

您是否查看过 ngCloak 是否可以帮助您解决闪烁问题？ https://docs.angularjs.org/api/ng/directive/ngCloak .

如果您正在使用 jquery，您可以拥有一个处理并发 ajax 请求的全局微调器 http://api.jquery.com/category/ajax/global-ajax-event-handlers/ .

或者看看类似这个全局 Angular 微调器的东西 https://github.com/monterail/angular-global-spinner/tree/master/src .

如果这些都不起作用，您始终可以在每个 Controller /指令注册自身并设置其加载标志的根作用域上创建一个数组。然后向该变量添加一个监视，以查看该数组中的所有组件何时完成加载。