Hello Programmers,

By default AngularJS places hash (#) in URL when we build a single page application using it. There is some circumstances when hash creates problem. Search Engines like Google couldn't parse and read content from the URL with hash tag inside URL. Hash creates problem in SEO. And I'm sure nobody would like this. So if you wish to eliminate hash tag from your URL, follow the steps below - 

1. Inject $locationProvider in your config method and enable HTML5 mode.

spaApp.config(function($routeProvider, $locationProvider) {
	$routeProvider

            // route for the home page
            .when('/', {
                templateUrl : 'pages/home.html',
                controller  : 'mainController'
            })

            // route for the about page
            .when('/about', {
                templateUrl : 'pages/about.html',
                controller  : 'aboutController'
            })

            // route for the contact page
            .when('/contact', {
                templateUrl : 'pages/contact.html',
                controller  : 'contactController'
            });

    $locationProvider.html5Mode(true);
});

2. Remove hash tag from your links in your pages if any.

<ul class="nav navbar-nav navbar-right">
    <li><a href=""><i class="fa fa-home"></i> Home</a></li>
    <li><a href="about"><i class="fa fa-shield"></i> About</a></li>
    <li><a href="contact"><i class="fa fa-comment"></i> Contact</a></li>
</ul>

3. Tell your webserver to forward all request to your AngularJS app. My app runs over apache2 and I've added the following config to my 000-default.conf file in /etc/apache2/site-available directory.

RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ /spa/

Here spa is the name of my AngularJs app. Refresh your application and you will find that hash tag has been removed.

Thanks.