Angular JS remove hash from URL not working

Question

I am trying to get rid of the url looking like http://example.com/#/album/0 and have it look more like http://example.com/album/0.

I have the following code

(function() {
var app = angular.module('chp', ['ngRoute', 'projectControllers']);

app.config(['$routeProvider', '$locationProvider',
  function($routeProvider, $locationProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'partials/directory.html',
        controller: 'ProjectsCtrl'
      }).
      when('/album/:id', {
        templateUrl: 'partials/album.html',
        controller: 'ProjectDetailCtrl'
      }).
      otherwise({
        redirectTo: '/'
      });

      $locationProvider.html5Mode(true);
  }]);

var projectControllers = angular.module('projectControllers', []);

projectControllers.controller('ProjectsCtrl', ['$scope', '$http',
  function ($scope, $http) {
    $scope.projects = albums;
    $scope.filters = { };
  }]);

projectControllers.controller('ProjectDetailCtrl', ['$scope', '$routeParams', '$sce',
  function($scope, $routeParams, $sce) {
    $scope.project = albums[$routeParams.id];
})();

but this is causing my app the break entirely once I add in $locationProvider in the three places shown. Any idea as to why this is not working for me? Also I am including angular-route.js just after jquery and angular.js so that cant be the problem

Why would you want to inject $locationProvider into all of your controllers? $locationProvider.html5Mode(true); should remove the /#/, nothing else needed. — Thor Jacobsen
– Thor Jacobsen, Commented Jan 16, 2015 at 8:05

PnewO · Accepted Answer · 2015-01-16 09:05:32Z

1

At a glance it looks all right to me, but you must make sure your server is set up to serve http://example.com/index.html for any route, otherwise it will try to load http://example.com/album/0/index.html before bootstrapping your angular application. What do you see when you enable html5? 404 not found? Console error?

You might also need to add <base href="/" /> inside <head></head> in your index.html file

edited Jan 16, 2015 at 9:05

PnewO

32 bronze badges

answered Jan 16, 2015 at 8:10

Andrei Cojea

6656 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2994560 Over a year ago

no i see the page still with no errors in the console only it's not loading any of the data like before

Andrei Cojea Over a year ago

Then maybe Thor Jacobsen is right, are you trying to inject $locationProvider in any controller? If so, use $location and keep $locationProvider only in config.

Collectives™ on Stack Overflow

Angular JS remove hash from URL not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related