带有Express的Angular HTML5模式

Question

我知道这个问题有答案，但它们并没有为我充分发挥作用。我正在使用Angular
1.4和Express4。Express正在处理API调用，而Angular应该正在处理所有HTML。

我的快递app.js：

var express = require('express');
var path = require('path');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

require('./routes/api')(app);

var app = express();

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());

app.use(express.static(path.join(__dirname, '../client')));
// This covers serving up the index page
app.use(express.static(path.join(__dirname, '../client/.tmp')));
app.use(express.static(path.join(__dirname, '../client/app')));

app.all('*', function(req, res) { 
  res.redirect('/index.html'); 
});

module.exports = app;

这是有角度的app.js

angular
  .module('punyioApp', [
    'ngAnimate',
    'ngAria',
    'ngCookies',
    'ngMessages',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .when('/howitworks', {
        templateUrl: 'views/howitworks.html',
        controller: 'HowItWorksCtrl',
        controllerAs: 'howitworks'
      })
      .otherwise({
        redirectTo: '/'
      });

      $locationProvider.html5Mode(true);
  });

现在，如果我转到http：// localhost：3000
/
，则会得到预期的主Angular视图。问题是当我转到http：// localhost：3000 /
howitworks时，它将我重定向到http：// localhost：3000
/ index.html，并且不显示“
howitworks”视图。如何修复快速路由器，以便可以转到http：// localhost：3000 /
howitworks？

Answer 1

您的代码只是将每个请求重定向到index.html，这不是您想要的。您确实需要该文件，但是由于Angular可以处理路由，因此您只希望Express发送文件，而不会出现任何问题。

基本上，您不应该使用redirect，但是sendFile：

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

另外，正如某人在评论中指出的那样，您应该使用get和而不是all。