ng-link is not working when override the setTemplateMapping and pass the "/" on router component

[alpeshmail]

HI , I've been looking over the code for the new router, coming from a ui-router background. I can see the use of conventions for mapping components to templates and controllers, but it also feels very limiting not to be able to configure these. To support the multiple level folder architecture i override the setTemplateMapping,setComponentFromCtrlMapping and setCtrlNameMapping, after override my url is working on browser but ng-link button or hyperlink is not working. As per my understanding it is issue on ng-link that it's not working when i used the slash on component. Here is my code.

/* Override the $componentLoaderProvider*/

appVar.config([ '$componentLoaderProvider', function ($componentLoaderProvider) { var DEFAULT_SUFFIX = 'Controller';

    function dashCase(str) {
        return str.replace(/([A-Z])/g, function ($1) {
            return '-' + $1.toLowerCase();
        });
    }

    function slashCase(str) {
        var n = str.lastIndexOf('/');
        if (n > 0) {
            return str.substring(n + 1);
        }
        return str;
    }

    $componentLoaderProvider.setTemplateMapping(function (name) {
        var dashName = dashCase(name);
        return './components/' + dashName + '/' + dashName + '.html';
        //return './components/' + dashName +  '.html';
    });

    $componentLoaderProvider.setComponentFromCtrlMapping(function (name) {
        var nameWOSlash = slashCase(name);
        return nameWOSlash[0].toLowerCase() + nameWOSlash.substr(1, nameWOSlash.length - DEFAULT_SUFFIX.length - 1);
      //  return name[0].toLowerCase() + name.substr(1, name.length - DEFAULT_SUFFIX.length - 1);
    });

    $componentLoaderProvider.setCtrlNameMapping(function (name) {
        var nameWOSlash = slashCase(name);
        //return nameWOSlash[0].toUpperCase() + nameWOSlash.substr(1) + DEFAULT_SUFFIX;
        return nameWOSlash[0].toUpperCase() + nameWOSlash.substr(1) + DEFAULT_SUFFIX;
        //return name[0].toUpperCase() + name.substr(1) + DEFAULT_SUFFIX;
    });

}]);

/* Controller */

angular.module('app', ['ngNewRouter', 'ngAnimate', 'ngMaterial', 'app.home', 'app.detail']) .controller('AppController', ['$router', AppController]);

AppController.$routeConfig = [ { path: '/', component: 'home/home' }, { path: '/home', component: 'home/home' }, { path: '/detail/:id', component: 'detail/detail' }, { path: '/childDetail/:id', component: 'childDetail/childDetail' } ];

<div class="md-toolbar-tools main-nav">
  <md-button style="border: 2px solid #fff;" ng-link="home">Home</md-button>
  <md-button style="border: 2px solid #fff;" ng-link="detail({id: 5})">Detail</md-button>
  <md-button style="border: 2px solid #fff;" ng-link="childDetail({id: 5})">Child Detail</md-button>
</div>