Angular UI-Router: Accept same query parameter on every url

Question

I'm curious if there's a way to configure UI-Router to accept a query string parameter for all routes in an application.

For context, I have a resolve handler on all of my application's routes, which takes in a query parameter and triggers some behaviour based on that parameter. Here's a reduced version of my application's state definitions:

$stateProvider
  .state('state1', {
    url: '/state1?myparam'
    resolve: myHandler,
    templateUrl: 'state1.html',
    controller: 'Ctrl1',
  })
  .state('state2', {
    url: '/state2?myparam',
    resolve: myHandler,
    // [etc]
  })
  .state('state2.child1', {
    url: '/state2/child1?myparam',
    resolve: myHandler,
    // [etc]
  })
  // [and a bunch more similar '.state's];

This works fine, and I'm able to access the myparam value inside of myHandler via $stateParams. It just seems a bit repetitive to add ?myparam to every route definition's url.

Any suggestions?

Vidya Sagar · Accepted Answer · 2015-12-03 04:41:39Z

1

Did you tried using $urlMatcherFactory.

Snippet:

var urlMatcher = $urlMatcherFactory.compile("/state2/:id?param1");
$stateProvider.state('myState', {
    url: urlMatcher 
});

Hope this query params and urlMatcherFactory filehelps you.

P.S: I did not test this code.

answered Dec 3, 2015 at 4:41

Vidya Sagar

1,7173 gold badges17 silver badges30 bronze badges

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

1 Comment

Ben Flanagan Over a year ago

Thanks @Sagar, urlMatcherFactory looks promising - I didn't see that in the ui-router docs. I'll give it a try when I have a little time, and report back!

Collectives™ on Stack Overflow

Angular UI-Router: Accept same query parameter on every url

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related