如何处理在AngularJS SPA应用程序刷新浏览器？ [英] How can I handle a browser refresh in an AngularJS SPA application?

问题描述

我的AngularJS应用程序使用

My AngularJS application uses

• UI路由器


• index.html文件


• 的登录和数据的所有呼叫转到一个ASP.NET Web控制器与带/ API / XXX开头的URL。

当用户进入myapp.com那么服务器的index.html这是我想要的。当用户选择现在该网页上的链接，然后UI路由器显示的index.html内部的相应模板，并在浏览器地址栏显示正确的地址这样的：

When a user enters myapp.com then the server index.html which is what I want. When the user now selects links on that page then ui-router shows the appropriate templates inside the index.html and the browser URL bar correctly displays addresses like these:

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

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

Note that my configuration is set up like this:

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

如果用户现在点击刷新，然后在浏览器忘记，这是在index.html，然后试图找到网页：myapp.com/city/london等，这当然是不存在的。然后，它显示了一个错误页面话说，页面不存在。

If a user now clicks on refresh then the browser forgets that it was on index.html and tries to find the web page: myapp.com/city/london etc which of course does not exist. It then shows an error page saying the page does not exist.

我该如何处理这种情况？我想就myapp.com/city用户点击刷新，最好回去myapp.com/city

How can I handle this situation? I would like a user clicking on myapp.com/city to refresh and ideally go back to myapp.com/city

推荐答案

修改

当您使用HTML5 MODLE具有角你必须告诉你的服务器如何如果你得出的途径之一，例如处理请求，如果你试图去myapp.com/city你会得到，因为一个错误ruting服务器将寻找一个city.html页，该不会是有服务器的根目录。如果您从您的应用程序内浏览到这条路线它会正常工作，但如果您复制并粘贴到浏览器地址栏，你会得到一个404，因为服务器不知道怎么去city.html。一个简单的办法是避免使用HTML5路由模式。根据你需要做一些URL重写，使角文档服务器了解如何路由到这些页面：

When you use HTML5 modle ruting with angular you must tell your server how to handle the request If you arrive at one of those routes, for example if you try to go to myapp.com/city you will get an error because the server is going to look for a city.html page at the root of the server which won't be there. If you navigate to that route from within your app it will work fine, but if you copy and paste that into your browser address bar you'll get a 404 because the server does not understand how to get to city.html. An easy fix would be to avoid using HTML5 routing mode. According to the angular docs you need to do some URL rewriting to make your server understand how to route to those pages:

从文档：

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

Using HTML5 mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html)

您还可以看看这里，这个答案将讨论如何让HTML5路由与您的服务器的工作。

You can also have a look here, this answer discusses how to get HTML5 routing working with your server.

这篇关于如何处理在AngularJS SPA应用程序刷新浏览器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！