How To Remove Hash From Application URL In AngularJS

Arif Khoja
7y
11k
0
7

Article

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);
}]);