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-enabledindex.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?