我正在编写一个 Angular 应用程序，需要一些异步代码才能在引导阶段运行。假设此 pahe 包括收集多个 AJAX 调用响应。当请求资源时，会显示一个覆盖图标(等待数据)。完成所有请求后，应用程序就可以开始工作了。问题是:如何在 Angular 中正确执行此操作？
到目前为止我在网络上发现的东西似乎都很hacky，例如:
- 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以手动引导应用程序。这比上面的要好，但仍然很老套。
我正在寻找一种方便且干净的解决方案。例如，在backbone(或构建在其之上的任何东西)中，您可以简单地在initialize方法中运行多个ajax请求。 Backbone 毕竟依赖于 jQuery - 或者有些提示 - 所以只需使用 $.when(list-of-promises) 异步收集它们，并触发一个将异步引导整个应用程序的事件。这是纯粹的模块化。而且没有黑客攻击。
最佳答案
您无需延迟启动应用程序。
您使用$http服务来请求数据。 $http 方法返回 promise 。您可以使用 $q 服务的 $q.all() 方法等待所有 $http promise 都已解决。
与此类似的东西:
<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 作为跨 Controller 共享数据的方式通常不受欢迎。
关于javascript - 如何以 Angular 异步初始化应用程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28921181/