Angular JS - set and get query string parameter on $stateProvider state

Question

I think this is just basically a question of syntax, but I have this routing set up:

app.config(['$stateProvider', function ($stateProvider) {
    $stateProvider.state('addAlbum', {
        url: "/albums/create/:artistId",
        templateUrl: "public/albums/views/album.tpl.html",
        controller: "createAlbumController",
        data: {
            pageTitle: 'Create Album'
        },
        resolve: {
            albums: function (publicArtistServices) {
                return publicArtistServices.getAlbums(1);

            }
        }
    });
}]);

And I need that getAlbums() method to use the artistId passed in on the URL:

return publicArtistServices.getAlbums({need artistId from URL here});

I tried guessing at it by using return publicArtistServices.getAlbums($state.params[0]); but that just threw a "$state is not defined" error.

What's the right syntax here?

hanothan · Accepted Answer · 2015-01-29 16:58:00Z

5

$stateParams is what you want to use for this.

app.config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('addAlbum', {
    url: "/albums/create/:artistId",
    templateUrl: "public/albums/views/album.tpl.html",
    controller: "createAlbumController",
    data: {
        pageTitle: 'Create Album'
    },
    resolve: {
        albums: function ($stateParams, publicArtistServices) {
            return publicArtistServices.getAlbums($stateParams.artistId);
        }
    }
});

}]);

answered Jan 29, 2015 at 16:58

hanothan

2311 silver badge7 bronze badges

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

3 Comments

JMax2012 Over a year ago

Oh, man, I didn't see this answer before I marked the other one correct. But yes, this is exactly the code that worked for me.

JMax2012 Over a year ago

I feel like maybe I should mark this as the correct answer, even though the other answer is what lead me to solve the problem.

hanothan Over a year ago

You should mark this correct since $stateParams is really what should be used here :)

Community · Accepted Answer · 2017-05-23 12:32:12Z

1

You need to include the $state parameter (to "inject" it into your function):

        albums: function ($state, publicArtistServices) {
            return publicArtistServices.getAlbums($state.params[0]);
        }

If that doesn't work, use $route.current.params.artistId as shown here: https://stackoverflow.com/a/13433335/584846

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Jan 29, 2015 at 16:47

Brent Washburne

13.2k4 gold badges65 silver badges86 bronze badges

2 Comments

JMax2012 Over a year ago

Hm. Neither $state.params (after injection - can't believe I forgot to do that!) nor $route.current.params worked. However, per a comment on that link you referenced ("for people using ui-router and coming here: $stateParams is way to go"), I was able to get it to work using: function (publicArtistServices, $stateParams) { return publicArtistServices.getAlbums($stateParams.artistId); }

Brent Washburne Over a year ago

kudos to @hanothan for finding $stateParams too

Collectives™ on Stack Overflow

Angular JS - set and get query string parameter on $stateProvider state

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related