SLearner SLearner - 5 months ago 57
AngularJS Question

Handling trailing slashes in angularUI router

It's been hours since I started working on this problem and I can't seem to get my head around the solution.

I have an app that may result in users actually typing in the URL. In such cases it is not hard to believe that user might enter a trailing slash. For example,


www.xxx.com/users/2 and www.xxx.com/edit/company/123


should be treated the same as


www.xxx.com/users/2/ and www.xxx.com/edit/company/123/


This only needs to done for handling URL routing on the client side. I am not interested in handling trailing slashes in resource/API calls. I am only interested in handling trailing slashed in the browser.

So I researched and found not many answers on the net. Most of them led me to the FAQ section of angular-ui router.

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions

Here they tell us to write a rule, which is what I want to do, but it doesn't seem to be working, or maybe I am doing it wrong.

Here's the plunkr where I have added my code.

http://plnkr.co/edit/fD9q7L?p=preview

Basically, I have added this to my config, the rest of the code is pretty much the basic stuff.

$urlRouterProvider.rule(function($injector, $location) {
//if last charcter is a slash, return the same url without the slash
if($location.$$url[length-1] === '/') {
return $location.$$url.substr(0,$location.$$url.length - 2);
} else {
//if the last char is not a trailing slash, do nothing
return $location.$$url;
}
});


Basically, I want to make the trailing slash optional, ie it's presence or absence on the address bar should have no effect on the state loaded.

Thanks for the help!

Answer

There is a link to working plunker

And this is the updated rule definition:

  $urlRouterProvider.rule(function($injector, $location) {

    var path = $location.path();
    var hasTrailingSlash = path[path.length-1] === '/';

    if(hasTrailingSlash) {

      //if last charcter is a slash, return the same url without the slash  
      var newPath = path.substr(0, path.length - 1); 
      return newPath; 
    } 

  });

And these links will now work properly:

  <ul class="nav">
    <li><a ui-sref="route1">Route 1</a></li>
    <li><a ui-sref="route2">Route 2</a></li>
    <li><a href="#/route1/">#/route1/</a></li>
    <li><a href="#/route2/">#/route2/</a></li>
    <li><a href="#/route1" >#/route1</a></li>
    <li><a href="#/route2" >#/route2</a></li>
  </ul>

The magic could be defined like this: do return changed value if there is a change... otherwise do nothing... see example

Comments