How to remove # from URL in AngularJS?

Today now in this post i will show you How to remove # from URL in AngularJS? If we are working on AngularJS web application by using angular route then we are notice one thing sometimes. If we click on any hyper links it is makes as like as bellow:

http://localhost:8000/#
http://localhost:8000/#/items
http://localhost:8000/#/users

Here I mean always “#” will be there, But when we are on live this web application then it should need to delete “#” from the URL, because it makes the issue when we are share link on facebook or etc.

But it should look likes as:

http://localhost:8000/
http://localhost:8000/items
http://localhost:8000/users

But we can easily remove by using “$locationProvider.html5Mode(true);”. we can do it as like as bellow simple example i did, but make it sure we need to first add the base tag on our head tag as 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);
}]);

Read Also: How to implement infinite ajax scroll pagination in Laravel?

Thanks for read. I hope it help you. For more you can follow us on facebook

Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.