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">
<!--provide base url for mapping routing in the angular routing-->
<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.
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.
2 comments
Can you plaese explain.. why i need to provide var ApplicationURL = ‘@WebConfigurationManager.AppSettings[“ApplicationURL”]’;
Hello Idris, actually the demo that i created was in c# so to pass localhost url from webconfig to javascript above code is written.