Handling trailing slashes in angularUI router

Question

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

Answer 1

You can also do it by using $urlRouterProvider.otherwise to handle the cases where the router is unable to match the path.

In the following example, the router is unable to match /mypath and therefore calls $urlRouterProvider.otherwise to find out what to do. Here we can see the path that was requested and map it to the proper path, i.e. /mypath/

app.config(function($urlRouterProvider) {
    $urlRouterProvider.otherwise(function ($injector, $location) {
        if ($location.$$path == '/mypath')
            return "/mypath/";
        else
            return "/defaultpath";
    });

Answer 2

As of ui-router version 0.2.11 you can do this:

$urlMatcherFactoryProvider.strictMode(false);

This will treat URLs with and without trailing slashes identically.

Answer 3

I don't have enough rep for a comment so making an answer :-

$urlMatcherFactoryProvider.strictMode(false);

Needs to be before the $stateProvider.state part.

Answer 4

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

Answer 5

urlMatcherFactoryProvider is deprecated for v1.x of angular-ui-router.

Use urlService.config.strictMode (ng1, ng2) instead.

It still needs to be before $stateProvider.state().

myApp.config(function($stateProvider, $urlServiceProvider) {
  var homeState = {
    name: 'home',
    url: '/home',
    component: 'xyHome'
  };

  $urlServiceProvider.config.strictMode(false);

  $stateProvider.state(homeState);

});

Answer 6

Hi You need to set strictMode = false Angular ui-router provide method for this

$urlMatcherFactoryProvider.strictMode(false); 

You need to set strict mode before initialising the State $stateProvider.state({})

For more details you can refer this Link