title: Angular routing doesn't work when URL is directly visited in browser but works when clicked to?
body: <p>I have an angular app with a directory structure </p>
  
  <pre><code>app 
  ..views
  ....partials
  ......main.jade
  ......foo.jade
  ....index.jade
  </code></pre>
  
  <p>and routes defined like:</p>
  
  <p>'use strict';</p>
  
  <pre><code>angular.module('myApp', [
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngRoute', 
    'firebase', 
    'myApp.config'
  ])
    .config(function ($routeProvider, $locationProvider) {
      $locationProvider.html5Mode(true);  
  
      $routeProvider
        .when('/', {
          templateUrl: '/partials/main',
          controller: 'MainCtrl'
        })
        .when('/foo/:fooName', {
          templateUrl: '/partials/foo',
          controller: 'FooCtrl'
        })            
        .otherwise({
          redirectTo: '/'
        });
    });
  </code></pre>
  
  <p>I'm using express on the server side and the relevant code is:</p>
  
  <pre><code>    // server.js 
     app.configure('development', function(){
       app.use(express.static(path.join(__dirname, '.tmp')));
       app.use(express.static(path.join(__dirname, 'app')));
       app.use(express.errorHandler());
     });
  
     app.configure('production', function(){
      app.use(express.favicon(path.join(__dirname, 'public/favicon.ico')));
      app.use(express.static(path.join(__dirname, 'public')));
     });
  
      app.get('/', routes.index);
      app.get('/partials/:name', routes.partials);
  
      //routes.js
      exports.index = function(req, res){
        res.render('index');
      };
  
  
      exports.partials = function(req, res){
        var name = req.params.name;
        res.render('partials/' + name);
      };
  </code></pre>
  
  <p>The main route <code>"/"</code> loads fine and when i click to <code>"/foo/bar"</code> the partial view <code>foo.jade</code> loads as expected. However, when I try visiting <code>"/foo/bar"</code> directly in the URL i get a 404 response from Express <code>"cannot GET /foo/bar"</code> which makes sense since there's no route like this defined in express. However, I thought this was the whole point of defining the angular router..i.e. it's supposed to intercept this request and actually ask for <code>"/partials/foo"</code>. 
  I tried adding</p>
  
  <pre><code>//redirect all others to the index (HTML5 history)
  app.get('*', routes.index);
  </code></pre>
  
  <p>but it didnt solve the issue and seemed to be catching even the requests for static js assets and responding with the contents of <code>index.html</code> which is pretty bad.
  I'm sure I'm doing something wrong. How can I fix things so that I can directly visit the URLs?</p>