javascript - AngularJs 路由和刷新

Question

路由是我在 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 中设置的内容

Now the problem that I am having.

当您点击仪表板的链接时，内容可以通过 ng-view 正常加载，并且路由效果很好，但是如果用户重新加载或刷新页面如果你在 localhost/dashboard 上，它实际上会尝试转到该链接并找到一个以/后面的任何内容命名的文件，在本例中是名为仪表板的目录。

那么我怎样才能做到这一点，以便当用户刷新或重新加载页面时，他实际上不会重新加载/dashboard 页面，因此不会出现未找到服务器错误页面。

Answer 1

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

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

您还可以添加一个 .htaccess 文件，其中包含 index.html 的重写规则，如下所示:

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

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