javascript - How to define optional parameter using UI-Router without trailing slash as well? - Stack Overflow

admin管理员组

文章数量:1334162

I was working on migration of my Angularjs code from ng-router to UI-Router. In my ng-router I have optional parameters however I realized that same easy way to support optional parameter is not supported in ui-router. Following is my routes from my existing ng-router module.

//Define routes for view  using ng-router
$routeProvider.
        when('/my-app/home/:userid?', {
            templateUrl: '/templates/partials/home/HomeView.html',
            controller: 'HomeViewController'
        })                   
        .when('/my-app/:productKey/:userid?', {
            templateUrl: '/templates/partials/productpage/ProductPageView.html',
            controller: 'ProductViewController'
        })
        .otherwise({redirectTo: '/my-app/home'});

Note: If you see ":userid" parameter is very smoothly implemented here as optional.

I tried following in ui-router however same is not working. I have gone through many post and it was suggested to duplicate the routes. I really don't want to duplicate as it will make code dirty.

//Set the default route

$urlRouterProvider.otherwise('/my-app/home');
//Define routes for view   (Please make sure the most matched pattern is define at top)
$stateProvider
        .state('viewallcards', {
            url: '/my-app/home/:userid',
            templateUrl: '/templates/partials/home/HomeView.html',
            controller: 'HomeViewController'
        })
        .state('productpage', {
            url: '/my-app/:productKey/:userid',
            templateUrl: '/templates/partials/productpage/ProductPageView.html',
            controller: 'ProductViewController'
        });

Here /my-app/home/ works however /my-app/home doesn't work. How to make it without trailing slash as well?

Also following post on same issue has surprised to me to know that this is not supported in ui-router. Is it still valid? Please help.

I was working on migration of my Angularjs code from ng-router to UI-Router. In my ng-router I have optional parameters however I realized that same easy way to support optional parameter is not supported in ui-router. Following is my routes from my existing ng-router module.

//Define routes for view  using ng-router
$routeProvider.
        when('/my-app/home/:userid?', {
            templateUrl: '/templates/partials/home/HomeView.html',
            controller: 'HomeViewController'
        })                   
        .when('/my-app/:productKey/:userid?', {
            templateUrl: '/templates/partials/productpage/ProductPageView.html',
            controller: 'ProductViewController'
        })
        .otherwise({redirectTo: '/my-app/home'});

Note: If you see ":userid" parameter is very smoothly implemented here as optional.

I tried following in ui-router however same is not working. I have gone through many post and it was suggested to duplicate the routes. I really don't want to duplicate as it will make code dirty.

//Set the default route

$urlRouterProvider.otherwise('/my-app/home');
//Define routes for view   (Please make sure the most matched pattern is define at top)
$stateProvider
        .state('viewallcards', {
            url: '/my-app/home/:userid',
            templateUrl: '/templates/partials/home/HomeView.html',
            controller: 'HomeViewController'
        })
        .state('productpage', {
            url: '/my-app/:productKey/:userid',
            templateUrl: '/templates/partials/productpage/ProductPageView.html',
            controller: 'ProductViewController'
        });

Here /my-app/home/ works however /my-app/home doesn't work. How to make it without trailing slash as well?

Also following post on same issue has surprised to me to know that this is not supported in ui-router. Is it still valid? Please help.

• javascript
• angularjs
• angular-ui-router
• angular-routing

Share Improve this question Follow edited Jun 9, 2015 at 5:47 Radim Köhler 124k4848 gold badges242242 silver badges340340 bronze badges asked Jun 8, 2015 at 23:25 joyjoy 3,70777 gold badges4141 silver badges7474 bronze badges 6

• I don't think ui-router's parameterized URLs need question marks in the case of an optional parameter. – Jon Edwards Commented Jun 8, 2015 at 23:29
• it doesn't work with or without ?. If i remove ? then trailing slash doesn't work. – joy Commented Jun 8, 2015 at 23:31
• When I've used ui-router, I've used the curly brace form for the variables. I couldn't get the colon form to work. Maybe try {userid}? instead of :userid?, FWIW. – Jon Edwards Commented Jun 8, 2015 at 23:34
• Not working for me :-( – joy Commented Jun 8, 2015 at 23:54
• Are you getting an error? Is it loading the page at all and not passing the parameters? – Jon Edwards Commented Jun 8, 2015 at 23:56

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 9

There is a working example

We can use params : {} object to define the userid exactly as we need (i.e. ready to be omitted).

Check more details about params here:

Angular ui router passing data between states without URL

  $stateProvider
    .state('viewallcards', {
      url: '/my-app/home/:userid',
      params: { 
        userid: {squash: true, value: null }, // this will make both links below working:
        //         #/my-app/home
        //         #/my-app/home/
      },
      ...
    })
    .state('productpage', {
      url: '/my-app/:productKey/:userid',
      ...
    })

Check it in action here

By default, UI Router is in "strict mode" - where it differentiates between routes with a trailing slash and without. You can turn this off by disabling this mode:

How can I have my routes be activated when the url contains either a trailing slash or not?

Set strictMode to false in your config block:

$urlMatcherFactoryProvider.strictMode(false)

For older version of ui-router, add this snippet to your module's config function. It creates a rule on $urlRouterProvider that maps all urls that are missing a trailing slash to the same url but with the trailing slash appended.

Using this, it's best to define your optional parameters as URL parameters in the style of home?userid=foo, and set stuff that you always expect to see in the URL.

From the UI-Router's Wiki.

本文标签： javascriptHow to define optional parameter using UIRouter without trailing slash as wellStack Overflow