Remove template name from URL AngularJS

Question

I am using angularJS $routeProvider,

//Template

//Routing

function ($routeProvider) {
       $routeProvider.
          when('/_profileView', {
              templateUrl: '_profileView.htm',
              controller: '_profileViewController'
          }).
          when('/', {
              templateUrl: '_homeView.htm',
              controller: '_homeViewController'
          }).
          when('/_homeView', {
              templateUrl: '_homeView.htm',
              controller: '_homeViewController'
          })} 

Is there a way to remove the template name from the Url like this: Example.com/#/_homeView ----> Example.com/

Answer 1

If you would use ui.router instead of ng-route it would solve your problem. For example:

angular.module('app',[ 'ui.router' ])
.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/");
    $stateProvider.state('home', {
        url : "/",
        templateUrl : "_homeView.htm",
        controller: "_homeViewController"
    }).state('profile', {
        url : "/_profileView",
        templateUrl: "_profileView.htm",
        controller: "_profileViewController"
    })
 });

Inside the url attribute if you give just "/" the outcome is just what you need.

Another note on using ui.router instead ng-route -- I experienced that, if you want to use nested ng-view -s it's possible only with ui.router .

I hope this helps, cheers!