javascript - AngularJS html5Mode 刷新失败

Question

这是我的路由器:

var app = angular.module('tradePlace', ['ngRoute', 'tradeCntrls']);
app.config(['$routeProvider', '$locationProvider', function($route, $location) {
    $route.
    when('/', {
        redirectTo: '/index'
    }).
    when('/index', {
        templateUrl: './includes/templates/index.php',
        controller: 'indexCntrl'
    }).
    when('/register', {
        templateUrl: './includes/templates/register.php',
        controller: 'indexCntrl'
    }).
    otherwise({
        redirectTo: '/index'
    });

    $location.html5Mode(true);
}])

我的 html5 模式为 true，所以现在 URL 中没有 #。

如果我转到 mysite.com/，它会将我重定向到/index，但是当我重新加载页面 (f5) 或转到 mysite.com/index 时，我会收到 404 错误。

有办法解决这个问题吗？或者干脆不使用 html5 模式？

Answer 1

如果不从服务器运行您的项目并做一些特殊的工作来路由请求，就无法解决这个问题。它涉及以下步骤:

1. 捕获静态文件请求(例如图像文件)
2. 将其他请求发送到您的 index.html 以由您的路由器处理

例如使用 nodeJS express 服务器，它看起来像这样:

// Capture real static file requests
app.use(express.static(__dirname + '/public'));

// All get requests not captured above go to the client.
server.get('*', function (req, res) {
    res.sendfile(__dirname + '/public/index.html');
});

请注意，这不是 Angular 特有的问题。必须对使用 html5 pushState 的任何客户端应用执行相同的步骤。