AngularJS Remove Hashtag From The Routing URL – $locationProvider

AngularJS Remove Hashtag From The Routing URL – $locationProvider

In this post we will give you information about AngularJS Remove Hashtag From The Routing URL – $locationProvider. Hear we will give you detail about AngularJS Remove Hashtag From The Routing URL – $locationProviderAnd how to use it also give you demo for it if it is necessary.

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 :

https://onlinecode.org/#/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 :

  1. var app = angular.module('MyApp',[]);
  2. app.config(function($routeProvider){
  3. $routeProvider
  4. .when('/',{
  5. templateUrl :'templates/home.html',
  6. })
  7. .when('/contact',{
  8. templateUrl :'templates/contact.html',
  9. });
  10. });
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

  1. var app = angular.module('MyApp',[]);
  2. app.config(function($routeProvider, $locationProvider){
  3. // don't forget to set HTM5 mode true
  4. $locationProvider.html5Mode(true);
  5. $routeProvider
  6. .when('/',{
  7. templateUrl :'partials/home.html',
  8. })
  9. .when('/contact',{
  10. templateUrl :'partials/contact.html',
  11. });
  12. });
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.

  1. <head>
  2. <basehref=" "/>
  3. </head>
<head>
<base href=" "/>
</head>

Always add base path of angular application to basetag.

Now after following above step URL will look like :


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

Label :

Angular JS

How To

Hope this code and post will helped you for implement AngularJS Remove Hashtag From The Routing URL – $locationProvider. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

  +  28  =  35

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US