使用带有nodeJS和Express的AngularJS html5mode

Question

我正在使用带有Express的nodeJS服务器来为我的AngularJS应用程序提供服务.当我使用angularJS默认路由(hashbangs)时,这一切都正常,但现在我正在尝试激活html5模式.

我正在激活html5mode,如下所示:

$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收到以下错误:

Uncaught SyntaxError: Unexpected token < 

我尝试将以下内容添加到nodeJS中,app.js以便正确地为我的资源提供服务:

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"));

但仍然没有运气.

我也尝试用以下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和Express一起工作？谢谢.

Answer 1

您的初始修复(声明特定前缀的静态中间件处理程序)应该可以正常工作,但您需要确保它们在任何其他路由之前声明(并且app.router,尽管您不需要显式使用它):

// 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("/*", ...);

此外,您需要确保实际上声明了前缀静态处理程序正常(正确路径),否则它们将无法找到任何请求的文件,并且请求将通过中间件链传递并最终由捕获程序处理 - 所有处理程序(应该很容易通过注释掉catch-all处理程序来测试,看看是否有任何JS/CSS/...请求正常工作).

Answer 2

配置express 4服务器如:

app.use(express.static(__dirname + '/public'));

app.get('/*', function(req, res){
    res.sendFile(__dirname + '/public/index.html');
});

和角度像:

app.config(function($stateProvider, $urlRouterProvider, $locationProvider){
    $stateProvider
        .state('home', {
            url: '/',
            templateUrl: 'templates/main.html'
        })
        .state('register', {
            url: '/register',
            templateUrl: 'templates/register.html'
        });

    $urlRouterProvider.otherwise("/");
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });
});