current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 0 down vote favorite

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?

share|improve this question
up vote 2 down vote

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.

share|improve this answer
    
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 – Saqib Ali yesterday
1  
You'll need to inject it first into your config function – iH8 yesterday
1  
I'll edit the question to answer that. – mostruash yesterday
    
@SaqibAli BTW you should use array notation for dependencies if you uglify/minify your code for browsers, see my controller: edit. – mostruash yesterday
    
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) – Saqib Ali 19 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.