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

Partials

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/' + req.params.name);
};

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(app.router);
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")

script(src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js",type="application/javascript")

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

body
  div(ng-view)
    block content 

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

script(src="app/app.js",type="application/javascript")
script(src="app/controllers.js",type="application/javascript")
script(src="app/directives.js",type="application/javascript")

Make our public app directory

mkdir public/app/

public/app/app.js

//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'
    }).otherwise({
        redirectTo: '/'
    });
}]).config(['$locationProvider', function($locationProvider) {
    $locationProvider.html5Mode(true);
}]);

public/app/controllers.js

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

public/app/directives.js

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

views/partials/index.jade

p Hello from partial
p {{message}}
<hello></hello>