AngularJS - 如何处理控制器/服务中所需数据的长时间运行请求

Question

当我的角度应用程序首次加载时，我需要对一些相当大的数据进行一些请求。 然后，此数据将用于控制器和服务，以确定如何显示页面。 我收到各种JavaScript错误，因为控制器和服务在请求返回之前尝试访问此数据。

我知道在HTML页面中，您可以绑定到此异步数据，并且当请求返回时，angular将为您填充它。 但是，基于这些数据，我的控制器和服务中发生了一些非常复杂的逻辑。 所以，我想我有2个问题。

1. 无论如何以某种方式使用控制器和服务中的异步数据？
2. 有没有办法防止角度尝试渲染页面，直到数据返回后？ 这基本上使数据请求同步，我很好。 这只会在最初的完整HTML页面加载上。

我在这里可以找到jsFiddle的尝试： http ： //jsfiddle.net/sES9T/

Answer 1

基本流程应如下所示：在控制器函数内部，生成$ http请求，在success（）回调中，根据需要设置$ scope变量。 你的流程与此不同吗？

此外，使用ng-show指令隐藏DOM元素，直到作用域包含您需要的数据。

你的控制器看起来像这样：

MyCtrl = ( $scope, $http ) ->
  promise = $http.get "/url"
  promise.success ( data ) ->
    $scope.foo = data

您的视图将如下所示：

div(ng-show="foo")
  p Here is my data, and some other stuff
  p {{ foo }}

编辑

我在这里修改了你的jsfiddle：

http://jsfiddle.net/sES9T/4/

它按预期工作，问题是你试图访问未定义变量的属性，这是一个错误。 此外，在第三次测试中，变量被命名为错误，但在命名为right时仍需要进行检查。

我推荐使用coffeescript，因为那些if语句可以通过存在（（））运算符更加简洁，如下所示：

myLargeData?.data

该代码将在尝试访问它的属性之前检查myLargeData是否已定义且非null，就像我上面手动完成的那样。 如果它未定义或为null，它将返回undefined，而不是导致错误。

Answer 2

我建议你使用路由器的resolve来加载和处理所有需要的数据。 只有在实际解析了所有结算后，才会执行控制器。 因此，在完成请求并处理数据之前，视图将不会呈现。 我相信这是一种更优雅和推荐的方法。

此外，您应该将所有数据加载和处理逻辑提取到单独的服务中，并从解决方案将工作中继到您的服务。 您的服务应返回一个promise对象，该对象将在所有处理完成后解析。

请参阅$ routeProvider的文档 （“resolve”属性）。