AngularJS

app/app.js

function MainController() {
    var vm = this;

    vm.greeting = "AngularJS";
}

angular.module('app', ['ngResource', 'ngRoute'])

    .config(function($routeProvider, $locationProvider) {
        $routeProvider
            .when('/', {
                templateUrl: '/partials/main',
                controller: 'MainController',
                controllerAs: 'mainCtrl'
            })
    })

    .controller('MainController', MainController);

layout.jade: add ng-app

body(ng-app="app")

scripts.jade: add angular dependencies:

script(type="text/javascript", src="/vendor/jquery/dist/jquery.min.js")
script(type="text/javascript", src="/vendor/angular/angular.min.js")
script(type="text/javascript", src="/vendor/angular-resource/angular-resource.min.js")
script(type="text/javascript", src="/vendor/angular-route/angular-route.min.js")
script(type="text/javascript", src="/app/app.js")

Because we use ngRotue, so need to tell angular where to use the view: index.jade

extends ../includes/layout

block main-content
   section.content
      div(ng-view)

Tempaltes

We use jade for templates, they are all put into partials folder. On the server, we need to set the route for those partiasl:

//Set route for partials
app.get('/partials/:partialPath', function(req,res) {
    res.render('partials/' + req.params.partialPath); //When request comes for main partials, it will look for server/views/partials/mian
});

main.jade:

h1 This si a partial
h2 {{ mainCtrl.greeting }}