angularjsangular-ui-routerhtml5mode

Angular 1 UI-Router - HTML5 Mode param URL to always end with a forward slash


I've got a page that has a base URL of /foo/ and have set up my state to expect a param.

So, if the user hits /foo/user1/, user1 is the param.

Is it possible to watch for both types of urls? For example, can I declare /foo/user1/ and /foo/user1 (notice, there's no forward slash) in the same state or do I need to create another state to specifically watch for the trailing slash?

Currently, it can be one or the other, but not both. Is that an accurate statement, or am I missing something in the documentation?


Solution

  • if you are using latest version of ui-router add this in your config block $urlMatcherFactoryProvider.strictMode(false) but for older versions of ui-router add this code

    $urlRouterProvider.rule(function ($injector, $location) {
        var path = $location.url();
    
        // check to see if the path already has a slash where it should be
        if (path[path.length - 1] === '/' || path.indexOf('/?') > -1) {
            return;
        }
    
        if (path.indexOf('?') > -1) {
            return path.replace('?', '/?');
        }
    
        return path + '/';
    });
    

    you should checkout their FAQ area, there is a dedicated section for trailing slash