Angular HTML5 Routing

When we configure routing in AngularJs, we see # tag in the url such as http://localhost:1234/#/home

If you don't like to see # in your url, you can easily remove it by setting a property in the config section of the module.













var app=angular.module('app',['ngRoute']);
app.config(function($routeProvider,$locationProvider){
$locationProvider.html5Mode(true); //to use html5 urls
$routeProvider
          .when('/',{
             template:"Home Page"
          })    
          .when('/page1',{
             template:"Page1"
          })
          .when('/page2',{
             template:"Page 2"
          })
          .when('/page3',{
             template:"Page 3"
          })
             .otherwise('/');
          });

We are successfully able to remove the hash tag from url by setting up "html5Mode" propertyto true on $locationProvider service.
Note that we need to have base tag in our html file as shown below
<head>
   <base href="http://localhost/myApp/"/>
</head>

Comments