Introduction

Angular is a framework, which is developed and maintained by Google. It has features such as Two-Way binding, Dependency Injection, Testing and Directives. It is widely used to create a Single Page Application(SPA) with Two-Way binding.

To find more, refer the URL https://docs.angularjs.org/guide

Going further, I assume that you are aware of how to use Angular routing, if not refer Angular routing tutorial.

Why does URL show Hash prefix?

If you are using Angular v1.5 or lesser version, the app URL will show /#/ and from v1.6; it changes to /!#/. When you are using AngularJS routing, it rewrites the URL and shows # in the URL, so by default URL’s are shown below.

  • http://localhost:51287/#/Home
  • http://localhost:51287/#/AboutUs
  • http://localhost:51287/#/ContactUs

Where the path that maps to the folder is removed and # is placed. It is very easy to remove # from the URL.

Only these two things are to be added to make it work.

  • Configuration if $locationProvider.
  • Setting base path for relative location of pages.

$location Service

The $location Service parses the URL in the Browser address bar, which is based on the window.location and makes the URL available to your Application.

Changes to the the URL in the address bar are reflected into $location service and changes to $location are reflected into the Browser address bar.

I would highly recommend reading through the official Angular $location docs before moving forward.

Base Tag

Base tag specifies a default URL for all the relative URL’s in the Application. There can be only one <base> tag in a document and it is written in <head> section of an HTML. It is written, as shown below:

Configuring $locationProvider

Let’s start by configuring $locationprovider.

In the code given above, we have configured html5mode.

What is html5mode? It is a standardized way for the manipulation of the Browser URL, so it helps an Angular to change the URL without refreshing the page.

If you are using newer version of an Angular, then you can directly write

to enable html5mode.

Enabling Base URL (Relative URLs)

To set the base URL in an Application, we must write <base> tag in the head section of an HTML. If the HTML pages, which are to be viewed are in the root path, then we do not have to mention the relative path to the pages and we can simply write <base href=”/”> to map the pages.

If the pages are in different folder like the example, then we should provide the relative path to the folder, as shown below.

This will set the view folder to demo/index and render the pages from this path.

Layout.cshtml

 

DemoModule.js

Conclusion

This is the simplest way to remove Hash (#) from the URL and get a pretty URL.

Arif Khoja
Arif Khoja is a Developer. He is a Javascript Enthusiatic who loves logical programming and has first hand experience in building a cutting edge internet product using Angular. He is also an open source freak and keen about learning and sharing. He writes Javascript both frontend and backend. He loves learning and sharing tech all the time. He also has a hands on experience in SEO and writes articles about latest emerging technologies.
Arif Khoja on FacebookArif Khoja on GoogleArif Khoja on InstagramArif Khoja on LinkedinArif Khoja on Twitter