Question

我的AngularJS应用程序使用

UI-路由器
index.html文件
所有登录和数据调用都转到ASP.NET Web控制器，其URL以/ api / xxx开头。

当用户进入myapp.com然后服务器index.html这就是我想要的。当用户现在选择该页面上的链接时，ui-router会在index.html中显示相应的模板，浏览器URL栏会正确显示以下地址：

myapp.com/home
myapp.com/home/overview
myapp.com/city
myapp.com/city/london

请注意，我的配置设置如下：

.config([
    '$httpProvider', '$locationProvider', '$sceProvider', '$stateProvider',
    function (
        $httpProvider, $locationProvider, $sceProvider, $stateProvider) {
        $sceProvider.enabled(false);
        $locationProvider.html5Mode(true);

如果用户现在点击刷新，则浏览器会忘记它在index.html上并尝试查找网页：myapp.com/city/london等当然不存在。然后它会显示一个错误页面，说明该页面不存在。

我该如何处理这种情况？我希望用户点击myapp.com/city进行刷新，最好回到myapp.com/city

Answer 1

修改

当您使用带有角度的HTML5模型时，必须告诉服务器如何处理请求如果您到达其中一条路线，例如，如果您尝试访问myapp.com/city，则会收到错误，因为服务器将在服务器的根目录中寻找一个不会在那里的city.html页面。如果您从应用程序中导航到该路线它将正常工作，但如果您将其复制并粘贴到浏览器地址栏中，您将获得404，因为服务器不了解如何访问city.html。一个简单的解决方法是避免使用HTML5路由模式。根据角度文档，您需要进行一些URL重写，以使您的服务器了解如何路由到这些页面：

From the docs：

使用HTML5模式需要在服务器端重写URL，基本上就是你必须重写所有链接到您的应用程序的入口点（例如index.html）

您还可以查看here，此答案将讨论如何让HTML5路由与您的服务器配合使用。

Answer 2

当用户刷新应用程序时，您可以引导他们登录页面或默认页面。这可以通过以下代码完成。

app.run(['$location', function ($location) {
    $location.path('/login');
}]);

如何在AngularJS SPA应用程序中处理浏览器刷新？

2 个答案: