Last Updated: April 19, 2021
· rhysr

Angular and Express Setup

Setup for an express and angular project

tl;dr see the github repo

npm install -g express  #install globally to add express binary to PATH
mkdir myapp
cd myapp
express   # initialise an express skeleton app
npm install   # install all the site dependencies

Configure Express

Clean up example code

  • delete any reference to "user", it's example code
  • delete routes/user.js


To be able to write your angular partials in jade (which is awesome) we need to create a route for express, so add the following beneath the first app.get() line

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

then we need to create the route itself, so open ./routes/index.js and add the following

/** serve jade enabled partials */
exports.partials = function(req, res) {
    res.render('partials/' +;

and then create the directory to serve our partials from

mkdir views/partials    

Catch-All Route

Because this is an angular powered app, we need to make express serve our app page to all requests other than css,js and images. To do this we add a wildcard route to the index.

app.get('*', routes.index);

For some reason the catch all route, stops static content from being served unless you swap the following lines around. The "static" line must come BEFORE the router line.

app.use(express.static(path.join(__dirname, 'public')));

Configure Angular

We now need to add angularjs to our app. So we need to start editting views/layout.jade

Enable angularjs app by adding the ng-app attribute to the html element
jade html(ng-app="myapp")


We also need to add the ng-view directive to the app, so let's add it beneath the body node in the layout

    block content 

Now we need to start adding our angular resources to the app


Make our public app directory

mkdir public/app/


//init app module and declare it's dependencies on other modules
var app = angular.module('myapp', ['myapp.controllers']);
app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: 'partials/index',
        controller: 'IndexController'
        redirectTo: '/'
}]).config(['$locationProvider', function($locationProvider) {


var controllers = angular.module('myapp.controllers', []);
controllers.controller('IndexController', ['$scope', function($scope) {
    $scope.message = 'Hello From Controller';


var directives = angular.module('myapp.directives', []);
directives.directive('hello', function () {
    return {
        restrict: 'E',
        template: '<p>Hello from directive</p>'


p Hello from partial
p {{message}}

4 Responses
Add your response

if you code in CoffeeScript, check out Brunch skeleton, called angular-express,

over 1 year ago ·

Thanks, I'll check it out. Coffeescript is on my todo list.

over 1 year ago ·

There is a really nice angular-express seed on github:

over 1 year ago ·

Thanks Matthis,
I referred to that project as I was writing this, which is intended as a a bit of an "idiot's guide" explaining how the integration works. I would certainly recommend using the seed you suggested in production though.

over 1 year ago ·