I'm having trouble figuring out how to get the routeProvider to wait until a remote call returns. The best solution I've seen for far was the example here: delaying angular route change . Unfortunately, when I tired to apply that example to my own code, the binding would trigger before the data was actually loaded. Does anyone know of another example that uses the new Resource syntax from angular 1.1.5 ($promise can be accessed directly )?

Here is what my code looks like:

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"]);
}]);

If I run that code, the console would display:

• calling service
• promise resolved
• call succeeded

I'm having trouble figuring out how to get the routeProvider to wait until a remote call returns. The best solution I've seen for far was the example here: delaying angular route change . Unfortunately, when I tired to apply that example to my own code, the binding would trigger before the data was actually loaded. Does anyone know of another example that uses the new Resource syntax from angular 1.1.5 ($promise can be accessed directly )?

Here is what my code looks like:

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"]);
}]);

If I run that code, the console would display:

• calling service
• promise resolved
• call succeeded

• javascript
• angularjs
• promise
• angularjs-routing

1 Answer 1

It should be as simple as this:

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

If your Service looks something like this:

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