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

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

no i see the page still with no errors in the console only it's not loading any of the data like before
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

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related