How to remove # from URL in AngularJS?

By Hardik Savani | September 18, 2016 | Category : Angular

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:




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:




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


<base href="/">



Angular JS Route

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


function($routeProvider, $locationProvider) {


when('/', {

templateUrl: 'templates/home.html',

controller: 'HomeController'


when('/users', {

templateUrl: 'templates/users.html',

controller: 'UserController'



redirectTo: '/'




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: