How to Remove the "#" Sign from AngularJS URLs

By default, AngularJS will route URLs with a hashtag like below-

For Example:

It is very easy to get clean URLs and remove the hash tag from the URL.

There are 2 steps to remove "#" sign from the url -

Step (1) - Suppose we have a "DemoApp" app like below. Now we remove the "#" sign by just enabling the HTML5 routing mode like below-

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"});
Step (2) - Now we need to set the base tag to the relative path that tells angular, when it parses the URLs, where to start parsing from like below -

<!doctype html>
<html ng-app="DemoApp">
    <base href="/"/>
<body ng-cloak>
<h2>demo app</h2>
<div ng-view></div>
Don't forget to post a comment below if you like this post.

Happy Coding :)

Post a Comment

Previous Post Next Post