AngularJs路线和清爽

AngularJs Routes and Refreshing

本文关键字：AngularJs      更新时间：2023-09-26

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);
}])

我还设置了一个迷你导航，这样当我点击链接时，它会通过templateUrl参数加载这些部分

   <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中设置的内容

现在是我遇到的问题。

当你点击let say dashboard的链接时，内容通过ng视图加载得很好，路由也很好，但如果用户重新加载或刷新页面，而你在let saylocalhost/ddashboard上，它实际上会尝试转到该链接，并找到一个以你的名字命名的文件，在这种情况下，该文件是一个目录称为dashboard。

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

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

要解决这个问题，你需要添加一个"服务器重写"规则，你可以在这里的ui路由器文档中找到它的解释以及不同的服务器版本。

您还可以添加一个具有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]
相关文章：