Fetching route parameters in service with angular-ui-router

Question

Using Angular's default router, you can resolve an AJAX resource by putting something like this in the routing:

.when('/view/:recipeId', {
    controller: 'ViewCtrl',
    resolve: {
      recipe: ["RecipeLoader", function(RecipeLoader) {
        return RecipeLoader();
      }]
    },

And implementing this service:

services.factory('RecipeLoader', ['Recipe', '$route', '$q',
    function(Recipe, $route, $q) {
  return function() {
    var delay = $q.defer();
    Recipe.get({id: $route.current.params.recipeId}, function(recipe) {
      delay.resolve(recipe);
    }, function() {
      delay.reject('Unable to fetch recipe '  + $route.current.params.recipeId);
    });
    return delay.promise;
  };
}]);

I'm working on an Ionic app at present, and have the following service:

services.factory('AlbumLoader', ['Album', '$route','$q', function (Album, $state, $q) { 
  return function () { 
    var delay = $q.defer();
    Album.get({id: $route.current.params.albumId}, function (album) { 
      delay.resolve(album);
    }, function() { 
      delay.reject('Unable to fetch album');
    });
    return delay.promise;
  } 
}]);

And the following route:

  .state('app.album', { 
    cache: false,
    url: "/albums/:albumId",
    resolve: { 
      album: ['AlbumLoader', function (AlbumLoader) { 
        return AlbumLoader();
      }]
    },
    views: { 
      'menuContent': { 
        templateUrl: "templates/album.html",
        controller: 'AlbumCtrl'
      } 
    } 
  })

Ionic uses angular-ui-router, and the documentation for it isn't exactly clear on this issue. How can I pick up the route parameters in the service using angular-ui-router in the same way the default Angular router does?

EDIT: Still having some problems with this. Using the Chrome debugger inside the loader, $state.params is an empty object when the URL is #/app/albums/17ef729c-af5b-4724-9c69-9585ab542e99. This results in the error message Error: [$resource:badcfg] Error in resource configuration for action get. Expected response to contain an object but got an array because the album ID isn't getting passed through.

Nix · Accepted Answer · 2016-02-11 12:40:08Z

2

$state acts just like $route. Just change $route to $state and its not nested under $state.current.params use $state.params. Or you can inject $stateParams.

services.factory('AlbumLoader', ['Album', '$state', '$q', function(Album, $state, $q) {

  var delay = $q.defer();
  Album.get({
    id: $state.params.albumId
  }, function(album) {
    delay.resolve(album);
  }, function() {
    delay.reject('Unable to fetch album');
  });
  return delay.promise;
}]);

Documentation on $stateParams, jsbin to play around with it:

edited Feb 11, 2016 at 12:40

answered Feb 11, 2016 at 12:27

Nix

58.8k31 gold badges154 silver badges206 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Przemek Over a year ago

Are sure that $state.current.params.albumId exist? I think it is: $state.params.albumId

Matthew Daly Over a year ago

Still having some trouble with this - using the Chrome debugger inside teh loader, $state.params is an empty object. This results in the error message Error: [$resource:badcfg] Error in resource configuration for action get. Expected response to contain an object but got an array because the album ID isn't getting passed through.

dendimiiii · Accepted Answer · 2016-02-11 12:41:43Z

0

this in your state config

.state("funnyState", {
            url: "/xxx/:id",
                templateUrl: "template.html",
                controller: "funnyController",
                resolve: {
                   thingINeed : function($stateParams, funnyService){
                        return funnyService.getReallyFunnyItem($stateParams.id);
                    }
                }
            })

And in your controller this

angular.module("app.controllers").controller("funnyController", ["$state", "thingINeed", funnyController]);
    function funnyController($state, thingINeed){
//thingIneed is resolved promise
//$state contains the id -> $state.params.id
}

At least thats how I am doing it in my current project.

edited Feb 11, 2016 at 12:41

answered Feb 11, 2016 at 12:35

dendimiiii

1,6993 gold badges16 silver badges27 bronze badges

Collectives™ on Stack Overflow

Fetching route parameters in service with angular-ui-router

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related