Angular routing doesn't work when URL is directly visited in browser but works when clicked to?

Question

I have an angular app with a directory structure

app 
..views
....partials
......main.jade
......foo.jade
....index.jade

and routes defined like:

'use strict';

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: '/'
      });
  });

I'm using express on the server side and the relevant code is:

    // 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);
    };

The main route "/" loads fine and when i click to "/foo/bar" the partial view foo.jade loads as expected. However, when I try visiting "/foo/bar" directly in the URL i get a 404 response from Express "cannot GET /foo/bar" 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 "/partials/foo". I tried adding

//redirect all others to the index (HTML5 history)
app.get('*', routes.index);

but it didnt solve the issue and seemed to be catching even the requests for static js assets and responding with the contents of index.html 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?

Patryk Ziemkowski · Answer 1 · 2013-12-08T21:24:58.723

18

The reason routing is behaving like this is html5mode turned on. Notice the line: $locationProvider.html5Mode(true);

You need to understand that when you try to access "/foo/bar" directly your browser sends HTTP GET request to this URL. When you try to access this url via link clicking, like you said, Angular is intercepting this action and calls History.pushState that only updates browser's link.

What you need to do in order to make html5mode routing work is implementing url rewrite. Every request has to be redirected to your index file that bootstraps AngularJS application, but this needs to be done on your server. Angular will render the desired page by itself.

Check out connect mod rewrite grunt task that does exacly that.

You can also you this middleware directly.

edited Dec 08 '13 at 21:24

answered Dec 08 '13 at 21:10

Patryk Ziemkowski

1,490
12
26

But i tried doing this on the server with: app.get('*', routes.index); and that didnt work. – algorithmicCoder Dec 08 '13 at 21:13
I don't think you can do that. If you are using express, connect-mod-rewrite should be easy for you to use. Express is written on top of connect. – Patryk Ziemkowski Dec 08 '13 at 21:17
But that's exactly what is done here: https://github.com/btford/angular-express-seed/blob/master/app.js and that's the standard Angular reference. Why does it work in that case? – algorithmicCoder Dec 08 '13 at 21:40

Angular routing doesn't work when URL is directly visited in browser but works when clicked to?

1 Answers1

Linked