How to have Express routing work with Angular routing with HTML5 style URLs?

Question

I would like to make an AngularJS app with HTML5-style URLs (i.e. with no # fragment in the URL). Thus in the routing controller module of my Angular app I've got something like the following:

angular.module('app').config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider) {
    $locationProvider.html5Mode(true)
...
}

$routeProvider
.when('/1/:param', /* do something */)
.when('/2/:param', /* do something else */)
.when('/3/:param', /* do something else again*/);

A number of working examples like AngularFun don't use HTML5 mode. For a request like http://localhost:3005/#/1/foo, it's clear that

• the http://localhost:3005/ part is handled server-side / by Express. Express happily serves our Angular-enabled index.html
• the /1/foo route is handled client-side by Angular's router

Say our server.coffee looks, as standard, something like the below (we serve the static dist directory that contains our compiled, minified Angular sources:

express = require 'express'
routes = require './routes'
dir = "#{__dirname}/dist"            # sources live here
port = process.env.PORT ? process.argv.splice(2)[0] ? 3005
app = express()

app.configure -> 
    app.use express.logger 'dev'
    app.use express.bodyParser()
    app.use express.methodOverride()
    app.use express.errorHandler()
    app.use express.static dir       # serve the dist directory
    app.use app.router
    routes app, dir                  # extra custom routes

If we do use HTML5 mode, our URL http://localhost:3005/#/1/foo becomes http://localhost:3005/1/foo (no more hash #). This time, the entire URL is intercepted by Express, and it gets confused because we don't define routes other than /.

What we would really like to say is that the latter part of the URL (/1/foo) should be 'delegated' to Angular for handling. How can we say this?

Answer 1

It appears that it does all work. I didn't do that work myself, however. I relied on this skeleton project: https://github.com/thanh-nguyen/angular-express-seed-coffee

This allows you a certain degree of control over which paths are handled by the client and which by the server.