Wednesday 12 April 2017

AngularJS Routing - Removing Hash Tag

While implementing routing in AngularJS, I observed that URLs formed while routing contained “#!” - http://localhost:53432/#!/quote/indexTo clean the URLs html5Mode attribute of $locationService should be set in the module’s config function as follows:

var app = angular.module('app', ['ui.router']);

app.config(function ($locationProvider, $stateProvider, $urlRouterProvider) {
   $locationProvider.hashPrefix('');
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });
   $stateProvider
        .state('group', {
            url: '/',
            templateUrl: '/quote/GroupInfo',
            controller: 'quoteController'
        })
        // nested states
        // each of these sections will have their own view
        .state('census', {
            url: '/',
            templateUrl: '/quote/CensusDetail',
            controller: 'censusController' })       
     }


In the above code snippet ui-router is implemented for routing. The highlighted code is all required to get rid of hash tag from the URLs.