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

11 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

11 comments:

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

    ReplyDelete
  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