Question

我正在编写一个角度应用程序，需要一些异步代码才能在引导阶段运行。让我们说这个包括收集几个AJAX呼叫响应。在请求资源时，会显示一个叠加图标（等待数据）。完成所有请求后，应用程序就可以开始工作了。问题是：如何在角度正确地执行此操作？

到目前为止，我在网络上找到的东西似乎很骇人听闻，例如：

http://xcellerant.net/2014/10/30/initializing-global-variables-and-synchronous-ajax-calls-in-an-angular-xpages-application/ - 这里作者使用jQuery同步运行$ .ajax，这是我不想做的100％，原因很明显。
https://blog.mariusschulz.com/2014/10/22/asynchronously-bootstrapping-angularjs-applications-with-server-side-data - 此处作者从HTML中删除ng-app以手动引导应用程序。这比上面的要好，但仍然非常hacky。

我正在寻找一种方便，干净的解决方案。例如，在主干（或其上构建的任何内容）中，您可以在initialize方法中运行多个ajax请求。 Backbone依赖于jQuery事后 - 或者投诉 - 所以只需使用$.when(list-of-promises)异步收集它们并触发将异步引导整个应用程序的事件。这纯粹是模块化的。而且没有黑客。

Answer 1

您无需延迟引导您的应用。

您使用$ http服务来请求数据。 $ http方法返回promises。您可以使用$ q服务的$ q.all（）方法等待所有$ http承诺解决。

类似的东西：

<body ng-app="app">
    <div ng-if="!Initialized">
        Overlay (waiting for data)
    </div>
    <div ng-if="Initialized">
        Application
    </div>
</body>


angular.module('app', [])
.run(function($rootScope, $q, $http){
    $rootScope.Initialized = false;
    $q.all({
        firstRequest: $http.get('/someresource'),
        secondRequest: $http.get('/someotherresoruce'),
        thirdRequest: $http.get('/athirdresource')
    }).then(function(results) {
        $rootScope.resource1 = results.firstRequest;
        $rootScope.resource2 = results.secondRequest;
        $rootScope.resource3 = results.thirdRequest;
        $rootScope.Initialized = true;
    });
});

注意，这是为了演示如何同时等待多个$ http请求以及从“加载”状态更改为“就绪”状态。使用$ rootScope通常不赞成跨控制器共享数据的方法。

如何在角度中异步初始化应用程序

1 个答案: