How to remove # from URL in AngularJS?

By Hardik Savani | September 18, 2016 | | 1989 Viewer | Category : AngularJS


Share this post:

If you work on AngularJS web application using angular route then you notice one thing. If you click on any hyper links it makes like as bellow:

http://localhost:8000/#

http://localhost:8000/#/items

http://localhost:8000/#/users

I mean always "#" will be there, But when we live this web application then it should delete "#" from URL, because it makes issue when we share link on facebook or etc.

But should look likes:

http://localhost:8000/

http://localhost:8000/items

http://localhost:8000/users

But we can remove easily using "$locationProvider.html5Mode(true);". You can do it like as bellow simple example i did, but make sure you have to first add base tag on your head tag like as bellow:

Your root file

<head>

<base href="/">

....

</head>

Angular JS Route

var app = angular.module('main-App',['ngRoute']);


app.config(['$routeProvider','$locationProvider',

function($routeProvider, $locationProvider) {

$routeProvider.

when('/', {

templateUrl: 'templates/home.html',

controller: 'HomeController'

}).

when('/users', {

templateUrl: 'templates/users.html',

controller: 'UserController'

}).

otherwise({

redirectTo: '/'

});


$locationProvider.html5Mode(true);

}]);



We are Recommending you: