使用AngularJS html5mode与和的NodeJS防爆preSS [英] using AngularJS html5mode with nodeJS and Express

问题描述

我使用的是服务器的NodeJS与前preSS为我的AngularJS应用。当我使用angularJS缺省路由（hashbangs），但现在我想激活HTML5模式这一切工作正常。

I'm using a nodeJS server with Express to serve my AngularJS application. This all works fine when I'm using angularJS default routes (hashbangs), but now I'm trying to activate html5 mode.

我激活html5mode是这样的：

I'm activating html5mode like this:

$locationProvider.html5Mode(true).hashPrefix('!');

这是我的NodeJS app.js 文件看起来是这样的：

var path     = require('path'),
    express  = require('express'),
    app      = express(),
    routes   = require(path.join(__dirname, 'routes'));

app.configure(function() {
    app.use(express.logger('dev'));
    app.use(express.compress());
    app.use(express.methodOverride());
    app.use(express.bodyParser());
    app.use(app.router);
    app.all("/*", function(req, res, next) {
        res.sendfile("index.html", { root: __dirname + "/../app" });
    });
    app.use(express.errorHandler({
        dumpExceptions: true, 
        showStack: true
    }));
});

不过，这现任所有请求我的 index.html的文件，所以我从requireJS以下错误：

However, this now serves all requests as my index.html file, and so I get the following error from requireJS:

Uncaught SyntaxError: Unexpected token < 

我尝试添加以下到我的NodeJS app.js 所以它会正确地为我的资源：

I tried adding the following to my nodeJS app.js so it would serve my resources correctly:

app.use("/js", express.static(__dirname + "/../app/js"));
app.use("/img", express.static(__dirname + "/../app/img"));
app.use("/css", express.static(__dirname + "/../app/css"));
app.use("/partials", express.static(__dirname + "/../app/partials"));

但仍没有运气。

but still no luck.

我也试图与替换 app.all 语句：

app.use(function(req, res) {
  // Use res.sendfile, as it streams instead of reading the file into memory.
  res.sendfile(__dirname + '/../app/index.html');
});

但也不能工作。我能做些什么来获得angularJS html5mode与和的NodeJS防爆preSS工作吗？谢谢你。

but that didn't work either. What can I do to get angularJS html5mode working with nodeJS and Express? Thanks.

推荐答案

您最初的定位点（声明为特定的prefixes静态中间件处理程序）应该工作得很好，但你必须确保他们宣称的前的任何其他途径（和 app.router ，虽然你并不需要明确地使用它）：

Your initial fix (declaring static middleware handlers for specific prefixes) should work just fine, but you need to make sure they are declared before any other routes (and app.router, although you don't need to explicitly use it):

// these need to go first:
app.use("/js", express.static(__dirname + "/../app/js"));
app.use("/img", express.static(__dirname + "/../app/img"));
app.use("/css", express.static(__dirname + "/../app/css"));
app.use("/partials", express.static(__dirname + "/../app/partials"));

// any other routes:
app.all("/*", ...);

此外，您还需要确保在prefixed静态处理程序实际上是宣布好（正确的路径），否则他们将无法找到任何要求的文件和请求将向下传递中间件链，并最终通过捕获所有的处理程序进行处理（应该是很容易被注释掉捕获所有的处理程序进行测试，看看是否有JS / CSS / ...请求工作没关系）。

Also, you need to make sure that the prefixed static handlers are actually declared okay (correct path), otherwise they won't be able to find any requested files and the requests will pass down the middleware chain and ultimately be handled by the catch-all handler (should be easy enough to test by commenting out the catch-all handler and see if any JS/CSS/... requests work okay).

这篇关于使用AngularJS html5mode与和的NodeJS防爆preSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！