Roteamento Angular e Expresso

Já passei por muitas sementes de expressão angular e descobri como elas funcionam. O problema que estou tendo é: 1). Eu gostaria de usar ejs-locais para modelar. 2). Como configurar corretamente o roteamento do lado do servidor e do lado do cliente. E também, ao inserir um URL como /about , não gerar o erro: cannot /get

app.js angular contém:

 // angular stuff $routeprovider.when('/', { templateUrl: 'index', controller: IndexCtrl }); $routeprovider.when('/about', { templateUrl: 'partials/about', controller: IndexCtrl }); 

express app, js contém:

 app.get('/', routes.index); app.get('/about', routes.about); 

pasta de rotas contém ‘index.js’:

 exports.index = function(req, res){ res.render('index',{name:"Hello"}); }; exports.about = function (req, res) { res.render('partials/about'); }; 

A pasta Views contém index.ejs :

  

e dentro da pasta views é uma pasta partials : ( Views / partials / )

index.ejs:

  

Index

about.ejs:

 

About

Adicione estas rotas ao seu servidor expresso

 app.get('/partials/:filename', routes.partials); app.use(routes.index); 

Então no routes.js

 exports.partials = function(req, res){ var filename = req.params.filename; if(!filename) return; // might want to change this res.render("partials/" + filename ); }; exports.index = function(req, res){ res.render('index', {message:"Hello!!!"}); }; 

Isso garantirá que os retornos expressos sejam renderizados ao fazer solicitações para partials/index e partials/about .

Aqui está uma essência: https://gist.github.com/4277025

Foi assim que eu fiz. Estou usando o Jade, mas o Ejs será semelhante:

app.js

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

Meus modelos são armazenados em / views / partials :

 app.set('views', __dirname + '/views'); 

Clientside agora você pode usar o $ routeProvider do angular para carregar as parciais:

 /*global define */ define([ 'angular', 'controllers/aController', 'controllers/bController'], function (angular, aController, bController) { 'use strict'; return angular.module('controllers', [], ['$controllerProvider', '$routeProvider', function ($controllerProvider, $routeProvider) { $controllerProvider.register('AController', ['$scope', aController]); $controllerProvider.register('BController', ['$scope', bController]); // routes $routeProvider.when('/A', {templateUrl: 'partials/A', controller: aController}); $routeProvider.when('/B', {templateUrl: 'partials/B', controller: bController}); $routeProvider.otherwise({redirectTo: '/A'}); }]); } ); 

Eu estava tendo alguns problemas com o uso de jade e angular, isso é o que funcionou para mim.

estrutura de diretório:

 public |-js |-css |-views |-main -main.jade |-auth -login.jade server |-includes -layout.jade |-views -index.jade server.js 

Então, na configuração server.js para o roteamento, parece:

 app.configure(function(){ app.set('views', __dirname + '/server/views'); app.set('view engine', 'jade'); }) // server side route for the partials files app.get('/views/*', function(req, res){ res.render('../../public/views/' + req.params); }) // everything handled by this route app.get('*', function(req, res){ res.render('index'); }) 

Então, as rotas angulares se parecem com isso:

 $routeProvider.when('/', { templateUrl: '/views/main/main', // gets main.jade from server controller: 'mainCtrl' }) 

Meu index.jade é assim:

 extends ../includes/layout block main-content .navbar.navbar-inverse.navbar-fixed-top div(ng-include="'/views/account/navbar-login'") section.content div(ng-view) 

Você pode tentar algo assim,

 const path = require("path"); /* For serving static HTML files */ app.use(function(req, res, next) { res.sendFile(path.resolve(__dirname + '/dist/index.html')); }); /* For ejs, jade/pug engines */ app.use(function(req, res, next) { res.render(path.join(__dirname, '/dist/index.pug')); });