CODEWITHSUNDEEP
angularjsangular-ui-router
tim_xyz
tim_xyz

Reputation: 13481

Multiple parameters in ui-router state URL

Is it possible to use multiple parameters in a ui-router state url?

Take note of id and game_id in example below

.state('games', {
    url: 'users/{id}/games/{game_id}',
    templateUrl: 'games/_game.html',
    controller: 'GameCtrl'
})

When I try to navigate to a URL like, app.io/users/1/games/2 it automatically redirects off of the page so I'm wondering if its not possible?

Upvotes: 0

Views: 1274

Answers (2)

tim_xyz
tim_xyz

Reputation: 13481

To answer my own question - yes its possible. My error was using incorrect syntax.

I did this

.state('games', {
    url: 'users/{id}/games/{game_id}',
    templateUrl: 'games/_game.html',
    controller: 'GameCtrl'
})

But should have done this

.state('games', {
    url: '/users/{id}/games/{game_id}',
    templateUrl: 'games/_game.html',
    controller: 'GameCtrl'
})

Note the / at the beginning of the string passed to url:. This / is required to make it work.

Upvotes: 2

Gabriel Sadaka
Gabriel Sadaka

Reputation: 1746

To specify url parameters in angular-ui-router you need to use :param not {param}.

.state('games', {
    url: 'users/:id/games/:game_id',
    templateUrl: 'games/_game.html',
    controller: 'GameCtrl'
})

Please consult their documentation for more examples.

Upvotes: 0

Related Questions