How to use AngularJS UI-router capture this URL with an optional parameter?

Question

I'm using AngularJD ui-router to capture my URL and send two parameters from that URL to my controller. Here are my requirements:

The first parameter is a mandatory integer (id)
The second parameter is an optional string (slug)
The two parameters are separated by a /
I want it to ignore any single trailing /

Currently, I'm doing this:

$stateProvider.state('mystate',
  {
    url: '/mystate/{id:int}{slug:(?:/[^/]+)?}',
    params: {
      slug: {value: null}
    },
    templateUrl: 'partials/mystate.html',
    controller: function($stateParams) {
      console.log('$stateParams.id=',$stateParams.id, ' $stateParams.slug=',$stateParams.slug);
    }
  }

For URL: mystate/1 This correctly captures:

$stateParams.id=1, $stateParams.slug=null

For URL: mystate/1/myslug This captures the wrong value for slug:

$stateParams.id=1, $stateParams.slug=/asdad

For URL: mystate/1/ This doesn't capture anything.

For URL: mystate/1/myslug/ This doesn't capture anything.

How can I write this so that it captures all four of the aforementioned URLs properly but doesn't pass any of the /s to the controller?

mostruash · Accepted Answer · 2016-01-03 16:02:40Z

2

For optional trailing slash, you need to set strict mode to false in a config block:

angular.module('yourModule').config(['$urlMatcherFactoryProvider', function($urlMatcherFactoryProvider) {
  $urlMatcherFactoryProvider.strictMode(false);
}]);

For having optional parameters, there's a long discussion here. At the end, they suggest using squash:

$stateProvider.state('mystate',
{
  url: '/mystate/{id:int}/:slug',
  params: {
    slug: {value: null, squash: true}
  },
  templateUrl: 'partials/mystate.html',
  controller: ['$stateParams', function($stateParams) {
    console.log('$stateParams.id=',$stateParams.id, ' $stateParams.slug=',$stateParams.slug);
  }]
}

squash has good documentation, if you set it to true, it omits the parameter from URL when it has the default value.

edited Jan 3, 2016 at 16:02

answered Jan 3, 2016 at 10:54

mostruash

4,1892 gold badges26 silver badges40 bronze badges

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

5 Comments

Saqib Ali Over a year ago

Thanks!! Where do I insert the line for $urlMatcherFactoryProvider? When I inserted it right before the $stateProvider line, I got:

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: ReferenceError: $urlMatcherFactoryProvider is not defined

iH8 Over a year ago

You'll need to inject it first into your config function

mostruash Over a year ago

@SaqibAli BTW you should use array notation for dependencies if you uglify/minify your code for browsers, see my controller: edit.

Saqib Ali Over a year ago

the $urlMatcherFactoryProvider line seems to have no effect. I put it on my app, like you instructed. The slug and the id are being captured... but ONLY if there is a trailing slash (in either case)

mostruash Over a year ago

Did you make sure that line is executed by putting a console.log statement next to it?

Collectives™ on Stack Overflow

How to use AngularJS UI-router capture this URL with an optional parameter?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related