可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
I've been through many Angular-express seeds and kind of worked out how they work. The problem I am having is: 1). I would like to use ejs-locals for templating. 2). How to configure correctly the routing of the server-side and client-side. And also, when entering a URL such as /about, not to generate the error: cannot /get
angular app.js contains:
// angular stuff $routeprovider.when('/', { templateUrl: 'index', controller: IndexCtrl }); $routeprovider.when('/about', { templateUrl: 'partials/about', controller: IndexCtrl });
express app,js contains:
app.get('/', routes.index); app.get('/about', routes.about);
routes folder contains 'index.js':
exports.index = function(req, res){ res.render('index',{name:"Hello"}); }; exports.about = function (req, res) { res.render('partials/about'); };
Views folder contains index.ejs:
<!--HTML head/navigation bar here--> <div ng-view></div>
and inside views folder is a partials folder: (Views/partials/)
index.ejs:
<h1>Index</h1>
about.ejs:
<h1>About</h1>
回答1:
Add these routes to your express server
app.get('/partials/:filename', routes.partials); app.use(routes.index);
Then in 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!!!"}); };
This will make sure that express returns rendered templates when making requests to partials/index and partials/about.
Here's a gist: https://gist.github.com/4277025
回答2:
That's how I did it. I'm using Jade, but Ejs will be similar:
app.js
// Routes app.get('/', routes.index); app.get('/partials/:name', routes.partials);
My templates are stored in /views/partials:
app.set('views', __dirname + '/views');
Clientside you can now use angular's $routeProvider to load the partials:
/*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'}); }]); } );
回答3:
I was having some trouble with using jade and angular, this is what worked for me.
directory structure:
public |-js |-css |-views |-main -main.jade |-auth -login.jade server |-includes -layout.jade |-views -index.jade server.js
Then in the server.js config for routing looks like:
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'); })
Then angular routes look something like this:
$routeProvider.when('/', { templateUrl: '/views/main/main', // gets main.jade from server controller: 'mainCtrl' })
My index.jade looks like this:
extends ../includes/layout block main-content .navbar.navbar-inverse.navbar-fixed-top div(ng-include="'/views/account/navbar-login'") section.content div(ng-view)
回答4:
You can try something like this,
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')); });
