Wind Up Toy Wind Up Toy - 1 year ago 68
AngularJS Question

How to use AngularJS routes with Express (Node.js) when a new page is requested?

I'm using Express, which loads AngularJS from a static directory. Normally, I will request

, in which Express serves me my
and all of the correct Angular files, etc. In my Angular app, I have these routes setup, which replace the content in an

$routeProvider.when('/', {
templateUrl: '/partials/main.html',
controller: MainCtrl,

$routeProvider.when('/project/:projectId', {
templateUrl: '/partials/project.html',
controller: ProjectCtrl,


On my main page, I have a link to
<a href="/project/{{}}">
, which will successfully load the template and direct me to
or whatever ID I have specified. The problem is when I try to direct my browser to
or refresh the page, the request is going to the Express/Node server, which returns
Cannot GET /project/3

How do I setup my Express routes to accommodate for this? I'm guessing it will require the use of
in Angular (although I'd prefer to avoid the ugly ?searches and #hashes they use), but I'm clueless about how to go about setting up the Express routes to handle this.


Answer Source

I would create a catch-all handler that runs after your regular routes that sends the necessary data.

app = express();
// your normal configuration like `app.use(express.bodyParser());` here
// ...
app.use(function(req, res) {
  // Use res.sendfile, as it streams instead of reading the file into memory.
  res.sendfile(__dirname + '/public/index.html');

app.router is the middleware that runs all of your Express routes (like app.get and; normally, Express puts this at the very end of the middleware chain automatically, but you can also add it to the chain explicitly, like we did here.

Then, if the URL isn't handled by app.router, the last middleware will send the Angular HTML view down to the client. This will happen for any URL that isn't handled by the other middleware, so your Angular app will have to handle invalid routes correctly.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download