How to Remove the "#" Sign from AngularJS URLs

bySalman Ahmad •
0
By default, AngularJS will route URLs with a hashtag like below-

 For Example:

 

http://example.com/




http://example.com/#/about




http://example.com/#/contact

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"});



      $locationProvider.html5Mode(true);



});
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">



<head>



    <base href="/"/>



</head>



<body ng-cloak>



<h2>demo app</h2>



<div ng-view></div>
Don't forget to post a comment below if you like this post.

 Chears
Happy Coding :)
Tags:

Post a Comment

Previous Post Next Post