Khushboo
Khushboo

Reputation: 43

AngularJS html5mode URL not working

I have a simple AngularJS application with no code related to nodeJS in it. I'm facing problem in removing # from url. I've used ui-routes for routing.

'use strict';
var app = angular.module('myapp', ['ui-router']).
        config(['$stateProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
               $locationProvider.html5Mode(true);
                $stateProvider.
                        state('home', {
                            url: '/',
                            templateUrl: 'views/index.html'
                        })
                        .state('where-am-i', {
                            url: '/where-am-i',
                            templateUrl: 'views/where_am_i.html',
                            controller: 'mainCtrl'
                        })
                        .state('audience', {
                            url: '/audience',
                            templateUrl: 'views/audience.html',
                            controller: 'mainCtrl'
                        });

            }]);

Also added base tag to the head section of my index.html.

<base href='/' />

Also tried require no base but still not able to get it working.

$locationProvider.html5Mode({
            enabled: true,
            requireBase: false
        });

Adding base tag shows 404 for all the assets I've included in index.html file.

Need a quick and simple solution for this.

Thank you in advance!

Upvotes: 0

Views: 714

Answers (1)

Sunny
Sunny

Reputation: 615

add a line after $locationProvider.html5Mode(true); as below:

$locationProvider.hashPrefix('');

hope it works.

Upvotes: 0

Related Questions