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

Question

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

到目前为止我在网上找到的东西似乎很老套，例如：

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 到 bootstrap 应用程序中的 ng-app。这比上面的要好，但仍然很老套。

我正在寻找一种方便、干净的解决方案。例如，在 backbone（或建立在它之上的任何东西）中，你可以简单地运行在 initialize 中的几个 ajax 请求方法。 Backbone 毕竟依赖于 jQuery - 或者有些抱怨 - 所以只需使用 $.when(list-of-promises) 异步收集它们并触发一个将异步 bootstrap 整个应用程序的事件。这纯粹是模块化的。而且没有黑客。

Answer 1

您不需要延迟引导您的应用程序。

您使用 $http 服务请求数据。 $http 方法 return 承诺。您可以使用 $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 请求并从 "loading" 状态更改为 "ready" 状态。使用 $rootScope 作为跨控制器共享数据的方式通常不受欢迎。

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

how to initialize application asynchronously in angular

javascript

ajax

asynchronous

initialization

angularjs