angularjs - 在所有 $http 异步调用完成后加载路由模板/ Controller

Question

目前，我有一个包含以下内容的 index.html:

<div ng-controller="MainCntl">  
    <div ng-view></div>
</div>

ng-view 根据路由 URL 加载“template1.html”或“template2.html”。 “template1”由“Controller1”控制，“template2”由“Controller2”控制。

我想做什么 :仅在 MainController 内的所有异步调用完成后才加载 URL 映射内容(使用 $routeProvider)。

任何建议将不胜感激。

Answer 1

为此，AngularJS 路由有一个属性，即 解决 属性(property):

window.angular.module('app',[])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'afterDoingSomething.html',
        controller: 'appCtrl',
        resolve: {
          // function that returns a promise
        }
      })
      .otherwise({
        redirectTo: '/'
      });
  }])

这样，只有在返回的 promise 被解析后才会加载 View 。

试图解释这一点是没有意义的，当 egghead解释得很好:

On promisses

The resolve function

A More pratical application

请记住，任何 $http 或 $resource 调用都将返回这些 promise ，因此您不必直接使用它们(返回 $http(...) 也可以正常工作 - 或者您可以将许多 $http 调用合并为一个 promise )