Yeoman and angular - routing doesn't work

Question

I'm trying start developing angular apps with yeoman. It may sounds stupid, but I have a problem with creating routes using yo:angular route.

When I create new route using:

yo:angular route foo

yeoman creates:

app/scripts/controllers/foo.js              (controller)
app/views/foo.html                          (view)
app/test/spec/controllers/foo.js            (testing the controller)

in app.js it creates:

  .config(function ($routeProvider) {
   $routeProvider
  .when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
  })
  .when('/foo', {
    templateUrl: 'views/foo.html',
    controller: 'FooCtrl'
  })
  .otherwise({
    redirectTo: '/'
  });
});

so everything should work fine. Unfortunately the route doesn't work - when I try open

http://localhost:9000/foo

I get following error:

Cannot GET /foo

The idea of routes in yeoman looks pretty easy and I'm not sure where the problem is.

Answer 1

Did you enable HTML5 mode in your Angular application? If not, the URL would be:

http://localhost:9000/#/foo

And if you have enabled HTML5 mode in your Angular application, you have to make sure whatever server you're using has been configured to handle all routes as they were the root of the application.