Removing the “#” Sign from AngularJS URLs with IIS Server

Muhammad Magdi

Rate me:

4.96/5 (11 votes)

24 Feb 2016CPOL2 min read

33.2K

Step by step guide to remove the hash sign "#" from AngularJS URLs

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:

JavaScript

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:

JavaScript

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.

HTML

<!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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Muhammad Magdi

Software Developer (Senior)

Egypt

Senior software engineer with experience in Microsoft .net development stack. Having a good knowledge of team- management, solution architecture, and agile environment. I have a great passion for learning new frameworks, tools, and technologies And I do blogging sharing technical articles.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.