Как сделать ng-view ждать ответа XHR?

Question

Я пытаюсь сделать ng-view ждать запроса xhr. У меня есть два контроллера для маршрутизируемого ng-view, первый из которых загружен отлично. Но другой не получается хорошо отображаться, потому что ответ xhr происходит после загрузки partial.html. Как мне избежать запроса partial.html, пока этот клиент не получит ответ xhr?

Вы можете увидеть ниже код для конфигурации маршрута:

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. Он возвращает обещание. Вид не будет загружаться, пока это обещание не будет разрешено. Вы можете решить это обещание в своем контроллере.

См. 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(); 
    }); 
    } 
];