AndreaM16 AndreaM16 - 18 days ago 6
AngularJS Question

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

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

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' });