AngularJS Remove Hashtag From The Routing URL

AngularJS Remove Hashtag From The Routing URL – $locationProvider

Posted 8 years ago By Ajay Gupta 25977

In AngularJS, you will notice that whenever you write the URL of an angular application then you will see a hashtag '#' always appear after your application root folder.

For Example :

Suppose i have a contact page and when i click on contact us page then it redirects to following URL :

http://expertphp.in/#/contact

So it means in angular it's default setting that add hashtag '#' with your URL.

See below code that will give you the output with hashtag :

var app = angular.module('MyApp', []);
app.config(function ($routeProvider) {
   $routeProvider
        .when('/', {
            templateUrl : 'templates/home.html',
        })
        .when('/contact', {
            templateUrl : 'templates/contact.html',
        });
    
});

var app = angular.module('MyApp', []);

app.config(function ($routeProvider) {

   $routeProvider
        .when('/', {
            templateUrl : 'templates/home.html',
        })
        .when('/contact', {
            templateUrl : 'templates/contact.html',
        });
    
});

Now i want to remove '#' sign from URL and now i am going to tell you how to remove hashtag from routing URL.

It's very easy to remove hash sign from URL.

You will need to make only two changes in above code :

Add $locationProvider service in the angular application. As we know $location service
Add a basetag in head section of angular application.

Inject $locationProvider

var app = angular.module('MyApp', []);
    
app.config(function ($routeProvider, $locationProvider) {
    
    // don't forget to set HTM5 mode true
    $locationProvider.html5Mode(true);
    
    $routeProvider
        .when('/', {
            templateUrl : 'partials/home.html',
        })
        .when('/contact', {
            templateUrl : 'partials/contact.html',
        });
    
});

var app = angular.module('MyApp', []);
    
app.config(function ($routeProvider, $locationProvider) {
    
    // don't forget to set HTM5 mode true
    $locationProvider.html5Mode(true);
    
    $routeProvider
        .when('/', {
            templateUrl : 'partials/home.html',
        })
        .when('/contact', {
            templateUrl : 'partials/contact.html',
        });
    
});

Don't forget to set html5Mode to true to remove hashtag from application URL.

Add basetag

I add basetag in head section of index page because application does not load correctly while $locationProvider removed the hashtag from the URL.

So always add basetag in your head section if you want to remove hashtag from URL.

<head>
<base href=" "/>
</head>

<head>
<base href=" "/>
</head>

Always add base path of angular application to basetag.

Now after following above step URL will look like :

http://expertphp.in/contact

Now you can apply it in your application whenever you will need to remove hashtag to make URL pretty.

AngularJS Remove Hashtag From The Routing URL – $locationProvider

AngularJS Remove Hashtag From The Routing URL – $locationProvider

Tags :

Related Posts

Angularjs Form Submit Example

How to apply Search Sort and Pagination in AngularJS Example using dir-pagination-controls

Using ngController With ngRepeat In AngularJS to List Items in Table Example

Angularjs two way data binding with directive isolate scope binding example

AngularJS PHP - upload and display image using FileReader with example

Understanding AngularJS Controllers and scope inheritance with example

AngularJS - How to Create a Custom Slugify Filter for SEO friendly URL

A Simple example of Get, Set and Clear Cookie in AngularJS

Dependent Dynamic dropdown using Angular Js and Laravel 5.6