AngularJS Remove Hashtag From The Routing URL – $locationProvider

AngularJS Remove Hashtag From The Routing URL – $locationProvider

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 :

  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. });

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. });

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. <base href=" "/>
  3. </head>

Always add base path of angular application to basetag.

Now after following above step URL will look like :

http://expertphp.in/contact

Phone: (+91) 8800417876
Noida, 201301
sakarya escort sakarya escort sakarya escort sakarya escort serdivan escort izmir escort eporner
akyazı escort sakarya escort ferizli escort sakarya escort geyve escort sakarya escort hendek escort sakarya escort karasu escort sakarya escort sapanca escort serdivan escort webmaster forum
pendik escort atasehir escort