防爆preSS 4的NodeJS，AngularJS路由 [英] Express 4, NodeJS, AngularJS routing
问题描述
我使用防爆preSS 4主办我的后端我AngularJS应用，而Nginx的作为我的前端服务器。但是HTML5模式似乎并没有工作，因为我会得到一个不能/ GET错误，当我试图进入页面链接（例如的http：//本地主机/登录）通过浏览器。是否有任何路由配置，我需要为我的前preSS / Nginx的呢？这里是我的设置code：
前preSS 4：
VAR前preSS =要求（'前preSS），
应用=前$ P $（PSS）
服务器=要求（'HTTP'）。服务器（应用程序），
bodyParser =要求（'身体解析器），
DB =要求（'./ DB），
IO =要求（'./插座'）。听（服务器）
apiRoutes =要求（'./路线/ API），
webRoutes =要求（'./路线/网络'）;app.use（bodyParser.json（））;
app.use（bodyParser.urlen codeD（{
扩展：真
}））;
app.use（'/ API，apiRoutes）;
app.use（如press.static（__目录名称+'/公'））;server.listen（3000，函数（）{
的console.log（'侦听端口％D'，server.address（）端口。）;
}）;
AngularJS：
使用严格的;
变种nodeApp = angular.module（'nodeApp'，['ngRoute']）;nodeApp.config（函数（$ routeProvider，$ locationProvider，$ controllerProvider）{
$ routeProvider.when（'/'，{
templateUrl：'谐音/ home.html做为
}）时，（'/登录'，{
templateUrl：'谐音/ login.html的
}）;
$ locationProvider.html5Mode（真）; nodeApp.controllerProvider = $ controllerProvider;
}）;
Nginx的：
＃的IP（S）在其服务器正在运行
上行测试应用{
服务器127.0.0.1:3000;
}＃Nginx的服务器实例
服务器{
听0.0.0.0:80;
SERVER_NAME test-app.cloudapp.net;
访问日志/var/log/nginx/test-app.log; ＃请求传递给具有正确的头服务器的NodeJS
位置 / {
proxy_http_version 1.1;
proxy_set_header升级$ http_upgrade;
proxy_set_header连接升级
proxy_set_header的X实时IP $ REMOTE_ADDR;
proxy_set_header的X转发，对于$ proxy_add_x_forwarded_for;
proxy_set_header主机$ HTTP_HOST;
proxy_set_header的X Nginx的-代理真实的; proxy_pass HTTP：//测试应用程序/;
proxy_redirect关闭;
}
}
我假设你使用的是单页角度的应用程序，从而使采用NG-视图中的一个html网页加载所有其他的谐音。
在这种情况下，你需要做的是这样的：
前preSS 4：
VAR前preSS =要求（'前preSS），
应用=前$ P $（PSS）
服务器=要求（'HTTP'）。服务器（应用程序），
bodyParser =要求（'身体解析器），
DB =要求（'./ DB），
IO =要求（'./插座'）。听（服务器）
apiRoutes =要求（'./路线/ API），
webRoutes =要求（'./路线/网络'）;app.use（bodyParser.json（））;
app.use（bodyParser.urlen codeD（{
扩展：真
}））;
app.use（'/ API，apiRoutes）;
app.use（如press.static（__目录名称+'/公'））;
//这是新的code：
app.use（'/ *'，函数（REQ，RES）{
res.sendfile（__目录名称+'/public/index.html'）;
}）;server.listen（3000，函数（）{
的console.log（'侦听端口％D'，server.address（）端口。）;
}）;
您所面临的问题是，即使你有路线设置为/登录路线被解雇之前，他们需要被加载。因此，服务器试图找到路径/登录，它不能返回404在单页角的应用程序的情况下，所有您在使用路由必须通过路由捕获路由匹配， app.get（'/ *'，... 在这种情况下，然后返回主angular.js HTML页面。请注意，这是最后的呼叫，因此将最后评价如果你把它第一次将prevent所有的后续规则运行的前preSS只是运行它遇到的第一个规则处理。
I am using Express 4 to host my AngularJS app on my backend, with Nginx as my frontend server. However html5 mode does not seem to work, as I will get a Cannot /GET error when I try to enter the page link (e.g. http://localhost/login) via the browser. Is there any routing configuration I need to do for my Express/Nginx? Here's my config code:
Express 4:
var express = require('express'),
app = express(),
server = require('http').Server(app),
bodyParser = require('body-parser'),
db = require('./db'),
io = require('./sockets').listen(server),
apiRoutes = require('./routes/api'),
webRoutes = require('./routes/web');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}));
app.use('/api', apiRoutes);
app.use(express.static(__dirname + '/public'));
server.listen(3000, function() {
console.log('Listening on port %d', server.address().port);
});
AngularJS:
'use strict';
var nodeApp = angular.module('nodeApp',['ngRoute']);
nodeApp.config(function($routeProvider, $locationProvider, $controllerProvider) {
$routeProvider.when('/', {
templateUrl: 'partials/home.html'
}).when('/login', {
templateUrl: 'partials/login.html'
});
$locationProvider.html5Mode(true);
nodeApp.controllerProvider = $controllerProvider;
});
Nginx:
# the IP(s) on which your server is running
upstream test-app {
server 127.0.0.1:3000;
}
# the nginx server instance
server {
listen 0.0.0.0:80;
server_name test-app.cloudapp.net;
access_log /var/log/nginx/test-app.log;
# pass the request to the nodejs server with correct headers
location / {
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-Nginx-Proxy true;
proxy_pass http://test-app/;
proxy_redirect off;
}
}
I'm assuming you are using a "single page" angular app, so one html page that uses ng-view to load all the other partials.
In this case you need to do something like this:
Express 4:
var express = require('express'),
app = express(),
server = require('http').Server(app),
bodyParser = require('body-parser'),
db = require('./db'),
io = require('./sockets').listen(server),
apiRoutes = require('./routes/api'),
webRoutes = require('./routes/web');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}));
app.use('/api', apiRoutes);
app.use(express.static(__dirname + '/public'));
// Here's the new code:
app.use('/*', function(req, res){
res.sendfile(__dirname + '/public/index.html');
});
server.listen(3000, function() {
console.log('Listening on port %d', server.address().port);
});
The problem you're facing is that even though you have routes setup for '/login' before the routes are fired they need to be loaded. So the server tries to find a match for the route '/login' which it can't returning the 404. In the case of single page angular apps all the routes you use in routing must be caught by a route, app.get('/*', ... in this case, and then return the main angular.js html page. Note that this is the last call so it will be evaluated last, if you put it first it will prevent all the subsequent rules from running as express just runs the handler for the first rule it encounters.
这篇关于防爆preSS 4的NodeJS，AngularJS路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
