Angular and Express routing

Add these routes to your express server

app.get('/partials/:filename', routes.partials);app.use(routes.index);

Then in routes.js

exports.partials = function(req, res){  var filename = req.params.filename;  if(!filename) return;  // might want to change this  res.render("partials/" + filename );};exports.index = function(req, res){  res.render('index', {message:"Hello!!!"});};

This will make sure that express returns rendered templates when making requests to partials/index and partials/about.

Here's a gist: https://gist.github.com/4277025

That's how I did it. I'm using Jade, but Ejs will be similar:

app.js

// Routesapp.get('/', routes.index);app.get('/partials/:name', routes.partials);

My templates are stored in /views/partials:

app.set('views', __dirname + '/views');

Clientside you can now use angular's $routeProvider to load the partials:

/*global define */define([   'angular',   'controllers/aController',   'controllers/bController'],   function (angular, aController, bController) {    'use strict';    return angular.module('controllers', [], ['$controllerProvider', '$routeProvider',        function ($controllerProvider, $routeProvider) {            $controllerProvider.register('AController', ['$scope', aController]);            $controllerProvider.register('BController', ['$scope', bController]);            // routes            $routeProvider.when('/A', {templateUrl: 'partials/A', controller: aController});            $routeProvider.when('/B', {templateUrl: 'partials/B', controller: bController});            $routeProvider.otherwise({redirectTo: '/A'});        }]);    });

I was having some trouble with using jade and angular, this is what worked for me.

directory structure:

public  |-js  |-css  |-views    |-main      -main.jade    |-auth      -login.jadeserver  |-includes    -layout.jade  |-views    -index.jadeserver.js

Then in the server.js config for routing looks like:

app.configure(function(){    app.set('views', __dirname + '/server/views');    app.set('view engine', 'jade');})// server side route for the partials filesapp.get('/views/*', function(req, res){    res.render('../../public/views/' + req.params);})// everything handled by this routeapp.get('*', function(req, res){    res.render('index');})

Then angular routes look something like this:

$routeProvider.when('/', {    templateUrl: '/views/main/main',    // gets main.jade from server    controller: 'mainCtrl'})

My index.jade looks like this:

extends ../includes/layoutblock main-content    .navbar.navbar-inverse.navbar-fixed-top        div(ng-include="'/views/account/navbar-login'")    section.content        div(ng-view)