How To Remove Hash From Application URL In AngularJS

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:

<base href = “” />

Configuring $locationProvider

Let’s start by configuring $locationprovider.

DemoApplicationModule.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/Home', {
templateUrl: ApplicationURL + '/AngularJs/Views/Home.html'
}).when('/AboutUs', {
templateUrl: ApplicationURL + '/AngularJs/Views/AboutUs.html'
}).when('/ContactUs', {
templateUrl: ApplicationURL + '/AngularJs/Views/ContactUs.html'
}).otherwise({
redirectTo: '/Home'
});
// for enabling html5 mod
$locationProvider.html5Mode(true);
}]); // This is just a sample script. Paste your real code (javascript or HTML) here.

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

$locationProvider.html5Mode(true);

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.

<base href="/Demo/Index/">

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

Layout.cshtml

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Routing Demo</title>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script type="text/javascript">
var ApplicationURL = '@WebConfigurationManager.AppSettings["ApplicationURL"]';
</script>
<script src="~/AngularJS/Modules/DemoModule.js"></script>
<base href="/Demo/Index/"> </head>
<body ng-app="DemoApplicationModule"> <a href="./#/Home">Home</a> <a href="./#/AboutUs">AboutUs</a> <a href="./#/ContactUs">ContactUs</a> @RenderBody() </body>
</html>

DemoModule.js

// declared module.
var DemoApplicationModule = angular.module("DemoApplicationModule", ['ngRoute']);
//for routing of the pages
DemoApplicationModule.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/Home', {
templateUrl: ApplicationURL + '/AngularJs/Views/Home.html'
}).when('/AboutUs', {
templateUrl: ApplicationURL + '/AngularJs/Views/AboutUs.html'
}).when('/ContactUs', {
templateUrl: ApplicationURL + '/AngularJs/Views/ContactUs.html'
}).otherwise({
redirectTo: '/Home'
});
// for enabling html5 mod
$locationProvider.html5Mode(true);
}]);

Conclusion

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

5 Comments

Join the conversation! Your thoughts help the community grow.

Manish Jadli9y ago
Sir, can i have put the multiple remove # code for a single website. suppose i have created a first website in app project and second website in web project so, we are build in those two website in a single website and put the remove # code for web.config, index.html and put html5 code for controller. can this code support for both of the web.config file. Please reply my question.Thanks.
Pawan Ingale9y ago
Nice Article.. but one needs to add the following property in routes.MapRoute function (App_Start/RouteConfig.cs file) to work it perfectly in reloading state also url: "{*url}" otherwise it will give 404 error whenever user reloads the page.
Kalpit Patel9y ago
Simplest way to remove HASH from URL. Very helpful article.. THANKS
bhavik sarvaiya9y ago
Nice article ..its really useful
Yatendrasinh Joddha9y ago
Very useful stuff. Nice going buddy.