AngularJs 路由和刷新

Question

Routes 是我在 AngularJs 中使用的，通过 ajax 调用异步加载动态内容。我就是这样做的：

var $app = angular.module('app', ['ngRoute']);

$app.config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
  $routeProvider
    .when("/pop", {controller: "popCtrl", templateUrl: "partials/pop_test.html"})
    .when("/dashboard", {controller: "dashBoardCtrl", templateUrl: "partials/dashboard.html"})
    .otherwise({redirectTo: "/"})

    $locationProvider.html5Mode(true);
}])

我还设置了一个迷你导航，这样当我点击我的链接时，它会通过 templatrUrl 参数

加载这些部分

   <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/pop">Pop</a></li>
        <li><a href="/dashboard">Dashboard</a></li>
   </ul>

这一切都很好，当我点击我的链接时，它会加载我在 pop_test.html 和 dashboard.html

中设置的内容

现在我遇到的问题。

当你点击链接让我们说仪表板时，内容通过 ng-view 加载得很好，并且如果用户 重新加载或刷新页面，路由工作得很好并且您可以说 localhost/dashboard 它实际上会尝试转到该链接并找到一个以 / 之后的任何内容命名的文件，在这种情况下是名为仪表板的目录。

那么我该如何做到这一点，当用户刷新或重新加载页面时，他实际上并没有重新加载 /dashboard 页面，因此没有找到服务器错误页面。

Answer 1

正如 Alberto 所说，服务器需要知道该做什么。在 Angular 的情况下，使用 $locationProvider.html5Mode(true); 时，所有内容都需要通过 index.html 进行路由，否则您将遇到现在的情况。

要解决这个问题，您需要添加一个服务器重写规则，您可以在ui-router's docs here 中找到它的解释以及不同的服务器版本。

您还可以像这样添加带有index.html 重写规则的.htaccess 文件：

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]

RewriteRule ^(.*) /index.html [NC,L]