Pretty URLs in AngularJS: Removing the Hashtag(#) tag

19 comments

Remove Hashtag From The Routing URL 


Whenever we write URL of an angular application , a hashtag  ie (#) always appear after the application root folder

For Example: –

 https://www.conflate.com /tutorial/angularjs/#/emp_details/0

It happens because AngularJS is a javascript framework which work at front-end rather than back-end. So, angular adds a hashtag, by default, after the application root folder name.
In this Post, we will explain you how to remove hashtag from the routing URL.   LIVE DEMO & GET WP THEME
In earlier application code,  you have noticed that whenever you run the application through some URL, a hashtag, i.e /#/, will appear in the URL just after the application folder name, which looks ugly.
So, let’s remove this hashtag from the URL and make you URL more beautiful and comfortable to read.
For this, you need to do two changes in the application.

  1. Configure $locationProvider service in the application module.

  2. Add a base tag in head section the application.

Configure $locationProvider
$locationProvider is used to to configure the application module and tell it how to store deep linking path of the application.
It uses html5Mode() method with true as parameter to remove hashtag, i.e /#/, from the URL of the application.In Angular, the $location service parses the URL in the address bar and makes changes to your application and vice versa.
So, let’s apply it in the application and remove hashtag from the URL.
Pretty URLs in AngularJS: Removing the Hashtag(#) tag


Configuring $locationProvider will remove the hashtag from the application URL but, application will not load correctly. To resolve this, we will have to add a base tag in the head section of  the index page.


Pretty URLs in AngularJS: Removing the Hashtag(#) tag

The base tag has one property, href. Href contains the URL path up to the application root folder.
For Example:-
Let suppose a URL,

https://www.conflate.com/tutorial/angularjs/#/emp_details/0

Here, angularjs is the root folder of the application.
Then, we will write base tag as:  
<base href="https://www.conflate.com /tutorial/angularjs/"/>

After it, the application will load properly and the application URL will look something like 
https://www.conflate.com /tutorial/angularjs/emp_details/0

You can refer how to remove hashtag from below video:


Thanks Guys,hope you got the concept for this little but very important trick. Apply it in your application and share your feedback with us.Also If you have more such tricks and solution feel free to share.

If You Enjoyed This, Take 5 Seconds To Share It

19 comments:

  1. nice information.keep posting good stuff :) all the best

    ReplyDelete
    Replies
    1. Hey,Thanks Aniruddha. Keep following and keep sharing.

      Delete
    2. Really good one. Very helpful.

      Delete
    3. Thanks dear.Keep following and help others.

      Delete
  2. Thank you for sharing such an informative article. I really hope I can see other interesting posts. Keep up the good work!


    ReplyDelete
    Replies
    1. Thanks a lot.I will surely keep posting such posts.If you need any more help and want to to have post on it feel free to contact us.

      Delete
  3. But when reload the page https://www.conflate.com /tutorial/angularjs/emp_details/0
    it will give error like Cannot GET /tutorial/angularjs/emp_details/0 . How to solve this . I am using laravel as backend .

    ReplyDelete
  4. But when reload the page https://www.conflate.com /tutorial/angularjs/emp_details/0
    it will give error like Cannot GET /tutorial/angularjs/emp_details/0 . How to solve this . I am using laravel as backend .

    ReplyDelete
    Replies
    1. This is just example,we have used here for better understanding.

      Delete
  5. Excellent ! I am truly impressed that there is so much about this subject that has been revealed and you did it so nicely.
    Angularjs developer

    ReplyDelete
    Replies
    1. Thanks Emma for your inspiring words. Please share and keep following.

      Delete
  6. Nice Blog, Keep sharing your ideas and information.I would like more information about this, because it is very nice...Thanks for sharing. Thanks a lot
    Anika Digital Media
    seo services in UK
    web design development company in UK

    ReplyDelete
  7. Great Article Cyber Security Projects projects for cse Networking Security Projects JavaScript Training in Chennai JavaScript Training in Chennai The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

    ReplyDelete
  8. Thanks for sharing the great content. It will helps a lot.

    Thanks Again.

    Web Development Company India

    ReplyDelete
  9. Thanks for your marvelous posting! I really enjoyed reading it. you're a great author. I will be sure to bookmark your blog and will come back very soon..God bless uou HDPE Pipe Fittings

    ReplyDelete
  10. this is a great article about vapes in kampala

    ReplyDelete
  11. I really appreciate your post, and you explain each and every point very well. Thanks for sharing this information.
    angularjs training in chennai

    ReplyDelete
  12. I really appreciate your post, and you explain each and every point very well. Thanks for sharing this information.
    angularjs training in chennai

    ReplyDelete