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路由有一个用于此目的的属性，即 resolve 属性：

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

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

当egghead如此解释时，试图解释这一点毫无意义：

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

Answer 2

有另一条路线'template3'，当异步调用正在进行时将显示，并且将成为默认路由。

从异步呼叫承诺API的'然后'或'成功'使用 $ location.path（）更新路线当满足所有条件时，您可以将用户路由到预期的模板，当您需要显示错误消息时，您可以使用加载时显示的默认模板。

在所有$ http异步调用完成后加载路径模板/控制器

2 个答案: