Je suis passé par de nombreuses graines d'angular-express et j'ai un peu compris comment elles fonctionnent. Le problème que je rencontre est: 1). Je voudrais utiliser ejs-locals pour la modélisation. 2). Comment configurer correctement le routage côté serveur et côté client. Et aussi, lors de la saisie d'une URL telle que /about
, ne pas générer l'erreur: cannot /get
angular app.jscontient:
// angular stuff
$routeprovider.when('/', {
templateUrl: 'index',
controller: IndexCtrl
});
$routeprovider.when('/about', {
templateUrl: 'partials/about',
controller: IndexCtrl
});
Express app, js contient:
app.get('/', routes.index);
app.get('/about', routes.about);
dossier routes contient 'index.js':
exports.index = function(req, res){
res.render('index',{name:"Hello"});
};
exports.about = function (req, res) {
res.render('partials/about');
};
Dossier de vues contient index.ejs
:
<!--HTML head/navigation bar here-->
<div ng-view></div>
et le dossier de vues intérieur est un dossier partials
: ( Views/partials/)
index.ejs:
<h1>Index</h1>
about.ejs:
<h1>About</h1>
Ajoutez ces routes à votre serveur express
app.get('/partials/:filename', routes.partials);
app.use(routes.index);
Puis dans 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!!!"});
};
Cela garantira que Express retourne les modèles rendus lors des requêtes à partials/index
et partials/about
.
Voici un résumé: https://Gist.github.com/4277025
C'est comme ça que je l'ai fait. J'utilise Jade, mais Ejs sera similaire:
app.js
// Routes
app.get('/', routes.index);
app.get('/partials/:name', routes.partials);
Mes modèles sont stockés dans/vues/partielles :
app.set('views', __dirname + '/views');
Côté client, vous pouvez maintenant utiliser $ routeProvider d'angular pour charger les partiels:
/*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'});
}]);
}
);
J'avais quelques problèmes avec l'utilisation de jade et angular, c'est ce qui a fonctionné pour moi.
structure de répertoire:
public
|-js
|-css
|-views
|-main
-main.jade
|-auth
-login.jade
server
|-includes
-layout.jade
|-views
-index.jade
server.js
Dans le fichier server.js, la configuration de routage ressemble à ceci:
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');
})
Ensuite, les routes angulaires ressemblent à ceci:
$routeProvider.when('/', {
templateUrl: '/views/main/main', // gets main.jade from server
controller: 'mainCtrl'
})
Mon index.jade
ressemble à ceci:
extends ../includes/layout
block main-content
.navbar.navbar-inverse.navbar-fixed-top
div(ng-include="'/views/account/navbar-login'")
section.content
div(ng-view)
Vous pouvez essayer quelque chose comme ça,
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'));
});