AngularJS Inserting child state parameter into $urlRouterProvider (UI-Router)

Question

I'm trying to use $urlRouterProvider to redirect me from a parent state to a child one, though the child one is a URL that accepts a parameter. (child url: /:page?pageId).

I am simply hoping to enter the application by entering from www.example.com/home, where the $urlRouterProvider should then take over the routing.

The code looks something like this:

$urlRouterProvider.when('/home', '/home/?pageId=1');
$stateProvider.state('home', {
    url: '/home',
    abstract: true,
    templateUrl: 'home.tpl.html'
}).state('home.page', {
    url: '/:page?pageId',
    templateUrl: '...'
});

As you can see, I was hoping that by using the $urlRouterProvider I would be able to direct the location from the /home (parent state) to the parameterized child state /:page?pageId by forcing the url /?pageId=1. Instead, it just appends a trailing slash to /home/.

Here is a very dysfunctional plnkr of this madness: http://plnkr.co/edit/XZ4jkhqzQmykIgx0CvH2?p=preview

Thanks!

Radim Köhler · Accepted Answer · 2015-05-20 09:54:13Z

1

There is a working plunker

I am not sure why the above notation is not working (if intended to skip it or not), but with this adjustment it will work:

$stateProvider.state('home', { 
    url: '/home',
    abstract: true, 
    templateUrl: 'home.html',
    controller: 'controller',
}).state('home.child', {
    url: '/:page?pageId',
    templateUrl: 'childtemplate.html',
    params : {                 // HERE we do define the defaults
      pageId: {value: 1},      // these would serve as a starting value
    }
});

So, what we are effectively doing here, is to declaring the default value out of url, but in the params: {} setting:

...
params : {
    pageId: {value: 1},
}

Check it here

answered May 20, 2015 at 9:54

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

Collectives™ on Stack Overflow

AngularJS Inserting child state parameter into $urlRouterProvider (UI-Router)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related