Angular和Express路由
我已经经历了许多angular度expression的种子，并且研究出它们是如何工作的。 我遇到的问题是： 1）。 我想用ejs-locals进行模板化。 2）。 如何正确configuration服务器端和客户端的路由。 另外，当input/about等URL时，不会产生错误： cannot /get
angular度app.js包含：
// angular stuff $routeprovider.when('/', { templateUrl: 'index', controller: IndexCtrl }); $routeprovider.when('/about', { templateUrl: 'partials/about', controller: IndexCtrl });
表示应用程序，JS包含：
app.get('/', routes.index); app.get('/about', routes.about);
路线文件夹包含'index.js'：
exports.index = function(req, res){ res.render('index',{name:"Hello"}); }; exports.about = function (req, res) { res.render('partials/about'); };
视图文件夹包含index.ejs ：
<!--HTML head/navigation bar here--> <div ng-view></div>
和里面的意见文件夹是partials文件夹：（ Views / partials / ）
index.ejs：
<h1>Index</h1>
about.ejs：
<h1>About</h1>
将这些路线添加到您的快递服务器
app.get('/partials/:filename', routes.partials); app.use(routes.index);
然后在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!!!"}); };
这将确保在向partials/index和partials/about请求时，express返回呈现模板。
这是一个要点： https ： //gist.github.com/4277025
我就是这么做的。 我使用的是翡翠，但是Ejs会类似：
app.js
// Routes app.get('/', routes.index); app.get('/partials/:name', routes.partials);
我的模板存储在/ views / partials ：
app.set('views', __dirname + '/views');
客户端现在可以使用angular的$ routeProvider来加载部分：
/*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'}); }]); } );
我在使用玉和棱镜时遇到了一些麻烦，这对我来说是有效的。
目录结构：
public |-js |-css |-views |-main -main.jade |-auth -login.jade server |-includes -layout.jade |-views -index.jade server.js
然后在server.jsconfiguration路由看起来像：
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'); })
然后angular路由看起来像这样：
$routeProvider.when('/', { templateUrl: '/views/main/main', // gets main.jade from server controller: 'mainCtrl' })
我的index.jade看起来像这样：
extends ../includes/layout block main-content .navbar.navbar-inverse.navbar-fixed-top div(ng-include="'/views/account/navbar-login'") section.content div(ng-view)
你可以尝试这样的事情，
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')); });
