如何让ng-view等待XHR响应？

Question

我试图让ng-view等待xhr请求。我有两个控制器路由ng-view，第一个完美加载。但另一个不能很好地呈现，因为在下载partial.html之后发生了xhr响应。在客户得到xhr响应之前，如何避免partial.html请求？

你可以看到路由配置下面的代码：

var configuration = [ 
    '$routeProvider', 
    '$locationProvider', 
    function(routeProvider, locationProvider) { 
    routeProvider.when('/', { 
     templateUrl: '/partials/hotelinfo.html', 
     controller: 'HotelInfo' 
    }).when('/service/dept/:id', { 
     templateUrl: '/partials/department.html', 
     controller: 'Department' 
    }).otherwise({ 
     redirectTo: '/' 
    }); 

    locationProvider.html5Mode(true); 
    } 
]; 

下面你可以看到控制器配置是获取xhr响应

<!-- language: lang-js --> 

var Department = [ 
    '$scope', 
    '$routeParams', 
    function (scope, routeParams) { 
    http.get('/service/dept/' + routParams.id).success(function (data) { 
     scope.data = data; 
    }); 
    } 
]; 

Answer 1

而不是调用从您的控制器，通话$http.get的它来自$routeProvider上的解析函数并将其注入到控制器中。这将导致Angular无法加载您的视图，直到解决了$http的承诺。

Answer 2

您可以使用routeProvider中的resolve完成此操作。它返回一个承诺。视图不会加载，直到解决了这个承诺。你可以在你的控制器中解决这个承诺。

请参阅http://docs.angularjs.org/api/ngRoute/provider/ $ routeProvider以获取更多信息。

var configuration = [ 
    '$routeProvider', 
    '$locationProvider', 
    function(routeProvider, locationProvider) { 
    routeProvider.when('/', { 
     templateUrl: '/partials/hotelinfo.html', 
     controller: 'HotelInfo' 
    }).when('/service/dept/:id', { 
     template: '/partials/department.html', 
     controller: 'Department', 
     resolve: { 
      deferred: function($q) { 
       return $q.defer(); 
      } 
     } 
    }).otherwise({ 
     redirectTo: '/' 
    }); 

    locationProvider.html5Mode(true); 
    } 
]; 


var Department = [ 
    '$scope', 
    '$routeParams', 
    'deferred', 
    function (scope, routeParams, deferred) { 
    http.get('/service/dept/' + routParams.id).success(function (data) { 
     scope.data = data; 
     deferred.resolve(); 
    }); 
    } 
];