Use "/" as Optional Separator for Parameters in Url - Angular-Ui-Router

Question

I've a tricky issue that I was not able to solve in a while.

Essentially, when I'm on a certain $route and I do a certain $state.go(routeName, params);, I need to append a certain parameter or multiple parameters to the url.

Also, paying attention to the fact that route can also be visited with no parameters at all, so it has to be clean.

I would like to achieve this result:

• Actual Url: localhost:4000
• Wanted Url: localhost:/4000/myRoute/myStuff/myParam
• Avoid : localhost:/4000/myRoute// if a $state.go(myRoute) with no parameters is provided.

For instance:

$state.go(myRoute, {
   param1 : 'myStuff',
   param2 : 'myParam'
});

function myRoute($stateProvider) {

    $stateProvider
        .state('myRoute', {
            url: 'myRoute/{param1}{param2}',
            parent: 'myParent'
              . . .
        })
}

Will work but giving localhost:/4000/myRoute/myStuffmyParam.

So, I tried using / as separator url: 'myRoute/{param1}' + '/' + '{param2}' and it works just fine, I get localhost:/4000/myRoute/myStuff/myParam.

But, of course, / gets appended even if there are no parameters. For instance, doing $state.go('myRoute') will lead to localhost:/4000/myRoute// that is clearly wrong.

Now, then, I told myself, well, maybe if I just add it to param1 I will achieve what I need.

So, I tried with

• param1 : 'myStuff' + '/'
• param1 : 'myStuff' + '\/'
• param1 : 'myStuff/'
• param1 : 'myStuff\/'

But all lead to the same url localhost:4000/myRoute/myStuff~2FmyParam. While, if I use another separator like - it works just fine.

param1 : 'myStuff-' leads to localhost:4000/myRoute/myStuff-myParam

EDIT

Using {param} and :param is the same. Reference angular-ui/ui-router URL Routing

I don't find any solution also looking at answers provided at way to create optional parameter in url?. Trying myRoute[/:param1[/:param2]] will also throw an error.

EDIT

Also trying param1%2F or 'param1' + '%2F' won't work. I respectively get ~2F & %252f as separator. Also doing a decodeURI('%2F') leads to the same miserable result.

• Whats the proper way to use such separator, avoiding it to be appended when there are no parameters and also get rendered properly?

For any clarification just leave a comment. Thanks in advance.

Answer 1

$stateProvider.state('state', {
    url: "/state/:id/:name/:something",
    templateUrl: "bla.html",
    controller: 'BlaCtrl'
  });

$state.go('state', {id: 1, name: 'pepe', something: 'nothing'});

This works for me, produces: /state/1/pepe/nothing

Answer 2

You don't need to make all this kind of machinery to achieve what you want. As @trichetriche said, you can create a certain set of child routes.

You need to edit your $routeProvider like:

//for the clean url - localhost:/4000/myRoute/
$stateProvider
    .state('myRoute', {
        url: 'myRoute/',
        parent: 'myParent'
          . . .
})
//for myStuff/param1 url - localhost:/4000/myStuff/param1
$stateProvider
    .state('myRoute.myStuff', {
        url: 'myStuff/{param1}', //also adding other params
        parent: 'myRoute'
          . . .
})

You can add as many children as you want if you need them.

With respectively $state.go's:

• $state.go('myRoute');
• $state.go('myRoute.myStuff', { param1 : 'HeyOhLetsGo' });

Answer 3

Can't you create a mother route, and a child route ? Isn't this possible ?