[英]How to make Angularjs route work with expressJs route on html5mode
我已经发布了一个关于stackoverflow的问题( css和javascript没有包含在刷新上 )昨天问我为什么css和javascript没有包含在我的网页上,我刷新网页后发现它是由html5mode引起的,所以我从昨天起就一直在寻找这个问题的解决方案,但我无法得到答案。
我的文件夹结构
app.js
var express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, http = require('http')
, path = require('path')
, mongoose = require('mongoose');
var app = module.exports=express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/public/views');
app.set('view engine', 'ejs');
app.use(express.cookieParser());
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.static(path.join(__dirname, 'public')));
app.use(app.router);
app.use(function(request, response)
{
console.log("catch all");
writeFile("/public/views/master.ejs", request, response);
});
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
app.use(function (req,res) {
res.status(404).render('error', {
url: req.originalUrl
});
});
app.get('/', routes.index);
app.get('/:name', routes.view);
app.get('*', routes.risk);
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
index.js
exports.index = function(req, res){
res.render('master', { title: 'Hello World' });
};
exports.view = function (req, res) {
var name = req.params.name;
res.render(name);
};
exports.risk = function(req, res){
res.sendfile(__dirname + "/public/views/master.ejs");
};
对于exports.risk我试图让expressJs渲染母版页1在它渲染其他之前但它不起作用。
angularJs
var SymSal = angular.module('SymSal',[]).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'main.ejs',
controller: 'IndexCtrl'
}).
when('/login',{
templateUrl: 'login.ejs',
controller: 'IndexCtrl'
}).
when('/register',{
templateUrl: 'register.ejs',
controller: 'IndexCtrl'
}).
when('/about',{
templateUrl: 'about.ejs',
controller: 'IndexCtrl'
}).
otherwise({
templateUrl: 'error.ejs'
});
$locationProvider.html5Mode(true);
}]);
SymSal.controller('IndexCtrl',function(){
})
感谢您的帮助,谢谢!
对于exports.risk我试图让expressJs渲染母版页1在它渲染其他之前但它不起作用。
路由按顺序匹配:
app.get('/', routes.index);
app.get('/:name', routes.view);
app.get('*', routes.risk);
如果路由匹配'/'render routes.index。 如果路由与'/'不匹配,请检查它是否与'/:name'匹配(例如/ login,/ register)并渲染routes.view。 如果路由与'/'和'/:name'不匹配(例如,路由类似于/ user / 1),则会渲染routes.risk。
要使快速渲染主页首先需要删除“/”和“/:name”的路径匹配器,并保留与每条路径匹配的通用匹配器('*')。
现在,无论您提供什么URL,服务器都将发回母版页。 如果你调用localhost:3000 / login,服务器将发回主页面(如果你调用localhost:3000,则会返回相同的页面)。 Angular将看到指定了路径(/ login)并将调用相应的$ routeProvider.when()函数。
要处理api调用(例如从db获取数据,将数据保存到db),您需要为此指定路由匹配器并将其放在通用匹配器('*')上方:
app.get('/api', routes.api);
重要的是要提到你不要在$ routeProvider.when()中使用'/ api'。
剩下的就是正确处理静态文件:记住每个URL都由通用匹配器('*')处理。 因此静态文件使用错误的MIME类型进行渲染。 要解决此问题,您需要在特定路径下访问所有静态文件,例如'/ static'。 只需更新
app.use(express.static(path.join(__dirname, 'public')));
至
app.use('/static', express.static(path.join(__dirname, 'public')));
您需要更新母版页中的所有路径以匹配新模式:'/ js / angular.js'现在是'/static/js/angular.js'
感谢@bekite提供合理解决方案的基础。 在他的初始解决方案的基础上,我发现以下对我自己来说有点清洁,并且它避免了需要使用/static
前缀更新和维护所有路径。 请注意, app.get('*', routes.risk)
对我不起作用(Express v3.4.4),但是使用正则表达式:
...
app.use(app.router);
app.use(express.static(path.join(__dirname, 'app')));
// Express routes - ensure these are not defined in Angular's app.js $routeProvider:
app.get('/api', routes.api);
/**
* ANGULAR APP ROUTING
* --------------------
* These routes will fallback to Angular for resolution of any uri:
* Note that the * wildcard will not work, hence the alternate regex
* It is crucial that 'static' assets never be referenced with a leading
* forward slash '/', else they'll match this rule and 404's will occur
*/
//app.get('*', routes.risk);
app.get('/[a-z]{0,100}', routes.risk);
////
// alternatively:
//
// app.get('/[a-z]{0,100}', function(req, res) {
// res.sendfile('app/index.html', {title: 'Default Title', stuff: 'More stuff to send to angular'}
// });
...
根据@bekite,Angular路径将传递到通用路径(如果需要,可以提供进一步的分支),并由Angular $ routeProvider捕获。 快速路径使用/api
前缀捕获,并根据需要处理服务器端。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.