You have noticed that whenever you write the URL of an Angular application, a hashtag, i.e /#/, always appear after the application root folder.
For Example: –
https://www.formget.com/tutorial/angularjs/#/emp_details/0It 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 tutorial, we will explain you how to remove hashtag from the routing URL.
Watch the live demo or download code from the link given below.
To demonstrate this, we are using the same application that we had created in our last blog AngularJS Routing.
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 basetag 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.
So, let’s apply it in the application and remove hashtag from the URL.
// Applicatio module
var myApp = angular.module('myApp', [
'ngRoute'
]);
// Configure routing for the application
myApp.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider){
// Setting html5Mode as true to remove hashtag
$locationProvider.html5Mode(true);
$routeProvider.
when('/', {
templateUrl:'templates/emp_list.php',
controller : 'EmpListController'
}).
when('/emp_list',{
templateUrl : 'templates/emp_list.php',
controller : 'EmpListController'
}).
when('/emp_details/:itemId',{
templateUrl : 'templates/emp_details.php',
controller : 'EmpDetailsController'
}).
otherwise(
{redirectTo : "/"}
);
}]);Add basetag:
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 basetag in the head section of the index page.
<head>
<base href=" "/>
</head>The basetag has one property, href. Href contains the URL path upto the application root folder.
For Example:-
Let suppose a URL,
https://www.formget.com/tutorial/angularjs/#/emp_details/0 Here, angularjs is the root folder of the application.
Then, we will write basetag as: –
<base href="https://www.formget.com/tutorial/angularjs/"/>After it, the application will load properly and the application URL will look something like
https://www.formget.com/tutorial/angularjs/emp_details/0 Conclusion:
Hope you got the concept for this little but very important trick. Apply it in your application and share your feedback with us from the space given below 🙂
Recommended blogs –
