Configuração para um projeto expresso e angular

tl; dr veja o repositório github

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

Configurar Express

Limpe o código de exemplo

• exclua qualquer referência a “usuário”, seu código de exemplo
• excluir rotas / user.js

Parciais

Para poder escrever seus parciais angulares em jade (o que é incrível), precisamos criar uma rota para expresso, então adicione o seguinte abaixo da primeira linha app.get ()

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

então precisamos criar a própria rota, então abra ./routes/index.js e adicione o seguinte

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

e, em seguida, criar o diretório para servir nossos parciais de

mkdir views/partials    

Rota pega-tudo

Como este é um aplicativo movido a angular, precisamos fazer o expresso servir a página do nosso aplicativo para todas as solicitações, exceto css, js e imagens. Para fazer isso, adicionamos uma rota curinga ao índice.

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

Por algum motivo, o catch all route impede que o conteúdo estático seja veiculado, a menos que você troque as seguintes linhas. A linha “estática” deve vir ANTES da linha do roteador.

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

Configurar Angular

Agora precisamos adicionar angularjs ao nosso aplicativo. Portanto, precisamos começar a editar views / layout.jade

Habilite o aplicativo angularjs adicionando o atributo ng-app ao elemento html
jade html(ng-app="myapp")

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

Também precisamos adicionar a diretiva ng-view ao aplicativo, então vamos adicioná-la abaixo do nó do corpo no layout

body
  div(ng-view)
    block content 

Agora precisamos começar a adicionar nossos recursos angulares ao aplicativo

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

Faça nosso diretório público de aplicativos

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>