404 error when using routing with Angular.js

Question

I'm trying to set up routing with angular and angularfire but am having trouble.

var app = angular.module('sampleApp', ['ngRoute', 'firebase', 'ui.bootstrap']);

app.config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'index.html',
        controller: 'SampleCtrl'
      })
      .when('/login', {
        templateUrl: 'views/login.html',
        controller: 'LoginCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });

  });

app.controller('LoginCtrl', function($scope, $firebase){
  console.log('LoginCtrl')
})

when I try to hit localhost:8000/login I get the following error message

Error code explanation: 404 = Nothing matches the given URI.

How can I set up simple routes with ngRoute and AngularFire?

Answer 1

When using the default router you need to use a hash in the url.

localhost:8000/#/login

If you want to remove the hash, that's another story.

You'll need to use the $locationProvider and set html5Mode() to true. From there you'll have to stop using $window.location.href to change routes and use $location.path().

Then you'll have to get a server or use a service like Firebase Hosting that supports URL rewrites.

Answer 2

play-around $location here (see the "test output" part, this helps me understand $route), hope this helps.

http://ngtutorial.com/learn/route.html#/_tblcontents_5