ww38iq
Last Updated: February 25, 2016
·
28.7K
· 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

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>

5 Responses
Add your response

7168

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

https://github.com/clonn/angular-express

over 1 year ago ·
7170

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

over 1 year ago ·
7298

There is a really nice angular-express seed on github: https://github.com/btford/angular-express-seed

over 1 year ago ·
7299

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 ·
17440

Thank you so much! I have been struggling for hours trying to get my jade templates to render in angular!

This is what solved it

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

over 1 year ago ·