Angular.js Get rid of # in url

Question

I am looking over the tutorial for Angular, and I am trying to get rid of the hash that is in the URL.

I have experimented with setting html5 mode to true. However it does not seem to be routing correctly.

The console says:

GET http://localhost:8000/partials/phone-list.html 404 (Not Found)

This is the code from my app:

var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers'
]);

phonecatApp.config(['$routeProvider', '$locationProvider',
  function($routeProvider, $locationProvider) {

  $routeProvider.
    when('/phones', {
      templateUrl: 'partials/phone-list.html',
      controller: 'PhoneListCtrl'
    }).
    when('/phones/:phoneId', {
      templateUrl: 'partials/phone-detail.html',
      controller: 'PhoneDetailCtrl'
    }).
    otherwise({
      redirectTo: '/phones'
  });
  $locationProvider.html5Mode(true);

}]);

I am currently just working on the localhost and using node to serve up the pages.

EDIT: I have read through this question: Removing the fragment identifier from AngularJS urls (# symbol) however my app seems to have the same code. Not sure what I am missing?

Answer 1

Don't forget to serve the pages for the /partials/phone-list.html route on the server aswell. Not only index.html (or whatever you have). Push state (html5-mode) only works when you already have initiated the application, otherwise how would the browser know where to get the javascript from when you are making a new request?

Hashbang URLs are different because you are actually making a request to the same address and thus nothing needs to be changed on the server.

Edit, also make sure that your links are working properly by checking the first answer here ngRoute set base url for all routes