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模式真，所以现在的网址没有一个#在其中。

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

有办法解决这个问题吗？还是不使用html5模式？

Answer 1

对于在您的.htaccess中使用Apache：

RewriteEngine On

RewriteBase /

RewriteRule ^index.php - [L]

#your static data in the folder app
RewriteRule ^app - [L]

#everything else
RewriteRule ^(.*)$ index.php?para=$1 [QSA,L]

编辑：

整个请求的url作为段传递给php文件。如果需要，您可以在php中使用$_GET['para']进一步处理这一过程。

Apache重写请求并传递符合规则的文件。

即请求：

• http://somehost.com/blabla -> index.php?para=blabla
• http://somehost.com/app/mainapp.js ->应用程序/mainapp.js

Answer 2

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

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

例如，使用nodeJS快速服务器，它看起来如下所示：

// 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');
});

注意，这不是一个角度特定的问题。对于任何使用html5 pushState的客户端应用程序，都必须执行相同的步骤。

Answer 3

将此添加到模块目录.htacces或.conf中，AllowOverride通常为None