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

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.

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.

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.

Read More