CODEWITHSUNDEEP
angularjsangular-ui-router
Natu Myers
Natu Myers

Reputation: 496

AngularJS $locationProvider.html5Mode not working on localhost

I'm trying to get rid of the hashtag that appears in my ui-router URLs. (http://localhost:3000/email doesn't work but http://localhost:3000/#email works. After scouring SO, I haven't found a case that works for me. I'm running locally for now, so I assume I don't need any "Server configuration" and I included "" in my index.html. 

(function(angular) {
    'use strict';
    angular.module('myApp', ['ui.router'])



    .controller('MainController', function($scope, $route, $routeParams, $location) {
        $scope.$route = $route;
        $scope.$location = $location;
        $scope.$routeParams = $routeParams;
    })

    .config([
            ['$stateProvider', '$locationProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider, $locationProvider, $provide) {

                $urlRouterProvider.otherwise('/email');

                // PAGES

                $stateProvider

                    .state('email', {
                    url: '/email',
                    templateUrl: '../pages/email.html',
                    controller: 'EmailController'
                })

                .state('about', {
                    url: '/about',
                    templateUrl: '../pages/about.html',
                    controller: 'AboutController'
                })

                // ... the rest...

                $locationProvider
                    .html5Mode(true); // enable html5Mode for pushstate ('#'-less URLs DOESN'T WORK)
                    .hashPrefix('!');

                $provide.decorator('$sniffer', function($delegate) {
                    $delegate.history = false;
                    return $delegate;
                });

            }]);

Upvotes: 2

Views: 11028

Answers (4)

Projesh Pal
Projesh Pal

Reputation: 458

Your app config will look like this

app.config(function ($routeProvider,$locationProvider) { 
$locationProvider.html5Mode(true);
$routeProvider
    .when("/", {
        templateUrl: 'url',
        controller : 'mainController'
    })
});

Use tag in your page head

<base  href="abc.com/"/>

This may create problem with following href, will not load the page properly

<a href="abc.com/about">About Us</a>

To overcome this use target="_self" in anchor tag as follow

<a href="abc.com/about" target="_self">About Us</a>

Upvotes: 0

yjimk
yjimk

Reputation: 486

Perhaps try this code? I think it may be down to one of these reasons.

  • Config dependencies weren't set correctly (out of order)
  • That .hasPrefix(!) was put in after a semi-colon.
  • Also need to assign a base location in your <head> tag using <base href='/'> (or maybe '/email' ?)

angular.module('myApp', ['ui.router'])

.controller('MainController', function ($scope, $route, $routeParams, $location) {
    $scope.$route = $route;
    $scope.$location = $location;
    $scope.$routeParams = $routeParams;
})

.config(function ($stateProvider, $urlRouterProvider, $locationProvider, $provide) {

    $urlRouterProvider.otherwise('/email');

    // PAGES

    $stateProvider

        .state('email', {
            url: '/email',
            templateUrl: '../pages/email.html',
            controller: 'EmailController'
        })

        .state('about', {
            url: '/about',
            templateUrl: '../pages/about.html',
            controller: 'AboutController'
        });

    $locationProvider.html5Mode(true).hashPrefix('!');

    $provide.decorator('$sniffer', function ($delegate) {
        $delegate.history = false;
        return $delegate;
    });

});

Apologies, I can't get the code sample to behave.

Upvotes: 2

Lansana Camara
Lansana Camara

Reputation: 9873

You can either do this in your run block:

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

And your url's will be changed from domain.com/#foo to domain.com/foo (this requires no explicit base).

...or do this in your run block:

$locationProvider.html5Mode(true);

...and then add this to your html <head>:

<base href="/">

This solution provides the same outcome as the first, except that now there is a specified base.

Upvotes: 11

dieuhd
dieuhd

Reputation: 1326

Did you set base in HTML-file same as follow:

<html>
  <head>
    <base href="/">
  </head>
</html>

and you should remove .hashPrefix('!'); at config, so this code will same here:

$stateProvider

    .state('email', {
    url: '/email',
    templateUrl: '../pages/email.html',
    controller: 'EmailController'
})

.state('about', {
    url: '/about',
    templateUrl: '../pages/about.html',
    controller: 'AboutController'
})

// ... the rest...

$locationProvider
    .html5Mode(true); // enable html5Mode for pushstate ('#'-less URLs DOESN'T WORK)

$provide.decorator('$sniffer', function($delegate) {
    $delegate.history = false;
    return $delegate;
});

Upvotes: 1

Related Questions