Angular - Lazy从CMS加载整个页面

时间:2014-12-30 00:32:50

标签: javascript html angularjs

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

这个项目的第一阶段将是一个直接的内容 - 筒仓(CMS管理),第二阶段将添加更复杂的Web应用程序组件。知道了这一点,我认为Angular是我最好的选择,但我很难想到一个很好的解决方案,让所有内容都来自Prismic API。

我决定探索的一个解决方案是使用标准化的$ scope变量,我们称之为$scope.loaded。每个控制器都会尽力查询我的Prismic服务的相应内容,一旦完成,它就会设置$scope.loaded = true

我坚持使用这种方法的部分是在加载所有这些组件时如何显示页面。最简单的方法是包含引用此ng-if值的loaded指令,但我觉得会有大量无格式内容。是的,我可以使用微调器,但是在旋转器中覆盖90%页面的想法似乎很奇怪。

然后我想知道:如果我为应用程序启动加载屏幕,直到所有控制器的$scope.loaded值都是真实的,该怎么办?在这种情况下,我如何知道页面上当前处于活动状态的控制器并引用它们各自的范围?

(如果你对这种方法为什么不好有评论,我很乐意听到它们作为回复而不是答案。我想这可能会产生太多的http请求,例如)。

1 个答案:

答案 0 :(得分:3)

这里有几个选项:

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

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

或者看看像这个全局角度微调器https://github.com/monterail/angular-global-spinner/tree/master/src

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