Introduction
Angular helps in creating single page application easily by adding routing using an Angular module called 'ngRoute', but by applying it, your URLs will be prepended with a hash character. However, there is a way to remove the hash character which makes your URLs more user-friendly. In this tip, we will explain step by step how to remove the # from AngularJS URLs.
Before we get started, assume that we have a small app called myOffice.com and you can check the office departments and employees by navigating to myOffice.com/departments and myOffice.com/employees URLs.
AngularJS Application Configuration
We will start with the normal Angular routing configuration by adding a config block:
var App = angular.module('DemoApp', ['ngRoute']);
App.config(function ($routeProvider) {
$routeProvider.when("/home", {
templateUrl: "templates/index.html",
controller: "MainController"
}).when("/employees/", {
templateUrl: "templates/employees.html",
controller: "employeesController"
}).when("/departments/", {
templateUrl: "templates/departments.html",
controller: "departmentsController"
}).otherwise({redirectTo: "/home"});
});
Step 1: Remove the Hash
Then, we need to enable HTML5 routing mode:
var App = angular.module('DemoApp', ['ngRoute']);
App.config(function ($routeProvider,$locationProvider) {
$routeProvider.when("/home", {
templateUrl: "templates/index.html",
controller: "MainController"
}).when("/employees/", {
templateUrl: "templates/employees.html",
controller: "employeesController"
}).when("/departments/", {
templateUrl: "templates/departments.html",
controller: "departmentsController"
}).otherwise({redirectTo: "/home"});
$locationProvider.html5Mode(true);
});
Now, it will work if you navigate from a page to another within your Angular app. That’s because the request is handled by Angular routing, i.e., navigating from "departments" page to specific department like the IT department. However, if you try to navigate to this link myOffice.com/departments from your browser or refresh the page, you will get a 404 error from the server.
This happens because we tell our server to send us the departments page while there is no departments page on it. The server only has an index.html page and the “departments” is just a URL that routed inside Angular and the server does not know anything about it, so we need to handle that on the server.
Step 2: Handle Routes on the Server
To achieve this, we need the server to serve the index.html page instead of returning a 404 error by applying these steps:
- Make sure that the URL Rewrite module is installed. if not, install it.
- Open IIS manager.
- Select your website.
- Add a URL Rewrite rule with these values:
- Pattern: ".*\.html|css/|img/|js/|data/|lib/|templates/|favicon.ico"
- Requested URL: "Does not match the pattern"
- Using "Regular Expressions"
- Action type: "
Rewrite" - Rewrite URL: "index.html"
This rule simply asks the server to rewrite the URL to index.html page if the requested URL does not match the specified pattern.
Now, if you try the link myOffice.com/departments from your browser again, you will see the index.html page loaded but the content of the departments page is not displayed yet, that's because angular gives an error “Html 5 mode require base tag” so we need to add the base tag in the header of index.html page.
Step 3: Setting the Base Tag
We just need to set the base tag to the relative path that tells angular, when it parses the URLs, where to start parsing from.
<!doctype html>
<html ng-app="DemoApp">
<head>
<base href="/"/>
</head>
<body ng-cloak>
<h2>demo app</h2>
<div ng-view></div>
Points of Interest
Now you got rid of the hash character and your URLs look more user-friendly, but note that for old browsers, that don't support HTML5 history API like IE9, the “#” character will still appear in your URLs.
