Utilisation de 'resolve' pour attendre les résultats d'une requête dans routeProvider

Question

Je n'arrive pas à comprendre comment faire pour que le routeProvider attende le retour d'un appel distant. La meilleure solution que j'ai vue jusqu'à présent est l'exemple suivant : retarder le changement de route angulaire . Malheureusement, lorsque j'ai essayé d'appliquer cet exemple à mon propre code, la liaison se déclenchait avant que les données ne soient réellement chargées. Quelqu'un connaît-il un autre exemple qui utilise la nouvelle syntaxe Resource d'angular 1.1.5 ($promise est accessible directement) ?

Voici à quoi ressemble mon code :

var productModule = angular.module('productModule', ['ngResource', 'ngLocale']).
config(['$routeProvider', function($routeProvider) {

    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html',
        controller: 'ResourceCtrl as appController' ,
        resolve:
        {
            productData: function($resource)
            {
                console.log(["calling service"]);
               return $resource(Services.ProductServices.PATH).query(null,
                   function(data){
                       console.log(["call succeeded"]);
                   },
                   function(data){
                       console.log(["calling failed"]);
                   }).$promise;
            }
        }
    });
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html'});
    $routeProvider.otherwise({redirectTo: '/view1'});
}]) ;  

productModule.controller('ResourceCtrl','$scope','productData',function($scope,productData)  {

    $scope.productData = productData;
    console.log(["promise resolved"]);
}]);

Si j'exécute ce code, la console affichera :

• service d'appel
• promesse résolue
• appel réussi

Answer 1

Cela devrait être aussi simple que cela :

resolve: {
  productData: function(ProductServices) {
    return ProductServices.query().$promise.then(function(data){
      return data;
    });
  }
}

Si votre Service ressemble à ceci :

myApp.factory('ProductServices', function($resource) {
  return $resource('/path/to/resource/:id', { id: '@id' });
});