装上浏览器中刷新特定页面。 SPA AngularJS [英] Loading the specific page on Browser Refresh. SPA AngularJS

问题描述

我创建一个新的Web API和应用角度。我想知道我们如何可以处理在服务器端路线。一切工作正常。我使用 UI路由器路由，当我刷新浏览器，它给我。

I am creating a new Web API and Angular application. I want to know how we can handle routes on server side. Everything is working fine. I am using ui-router for routing, when i refresh browser that its giving me.

HTTP错误404.0 - 找不到

我想知道我们如何处理这个问题。

I want to know how we can handle this.

code的UI路由器

Code for ui-router

$stateProvider.state('login', {
    url: '/',
    templateUrl: templatesDirectores.wmAccount + 'login.html',
    controller: 'login-controller',
    controllerAs: 'vm'
})
    .state('register', {
    url: '/register',
    templateUrl: templatesDirectores.wmAccount + 'register.html',
    controller: 'register-controller',
    controllerAs: 'vm'
})
    .state('forgetPassword', {
    url: '/forgetpassword',
    templateUrl: templatesDirectores.wmAccount + 'forget-password.html',
    controller: 'forget-password-controller',
    controllerAs: 'vm'
})

该视图加载罚款按配置，但是当URL是本地主机：1235 /注册，它加载罚款第一次，但是当我打的刷新按钮我得到404错误。

The view is loading fine as per the configuration, but when the URL is localhost:1235/register, it's loading fine first time but when I hit the refresh button I get 404 error.

推荐答案

这是因为您正在使用 HTML5Mode = TRUE 在角应用程序中发生。角使用哈希（ /＃寄存器）的路线来处理它的默认路由，以保证浏览器不从服务器进行重新加载页面。

This is occurring because you are using HTML5Mode = true in your Angular Application. Angular uses "hash" (/#register) routes to handle it's routing by default, in order to ensure that the browser does not perform a page reload from the server.

使用 HTML5Mode ，可以燮preSS的＃，但有代价的。浏览器必须兼容HTML5，因为HTML5Mode使用HTML推国（ HistoryAPI ）。

Using HTML5Mode, you can suppress the #, but at a cost. The browser must be HTML5 compliant, because HTML5Mode uses HTML Push State (HistoryAPI).

此外，您的服务器必须配置来处理，可能会在角存在，但不存在于服务器上的路由请求。当直接下载一个页面，或者通过在或通过使用刷新键入它，一个请求被发送到服务器，与该服务器可能不知道如何处理的URL。您的服务器应配置来回报您的的index.html 页不前pressly处理任何路线。这种配置<一个href=\"https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode\"相对=nofollow>每个服务器变化。

Also, your server must be configured to handle requests for routes which may exist in Angular but do not exist on the server. When you directly load a page, either by typing it in or by using refresh, a request is sent to the server, with a URL that the server may not know how to handle. Your server should be configured to return your Index.html page for any routes it does not expressly handle. This configuration varies per server.

给你说你正在使用IIS来承载您的网站，类似下面的内容将是必要的：

Given you stated you are using IIS to host your site, something like the following would be necessary:

Web.config文件：

Web.config:

<system.webServer>
  <rewrite>
    <rules> 
      <rule name="Main Rule" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />                                 
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

从本质上讲，所有路由（。* ），如果请求不是一个文件或目录，重写URL返回基地网址 / 。

Essentially, for all routes (.*), if the request is not a file or a directory, rewrite the url to return the base URL /.

这也可以在code来完成，类似这样：

This can also be done in code, something similar to this:

Global.asax中：

Global.asax:

private const string ROOT_DOCUMENT = "/default.aspx";

protected void Application_BeginRequest( Object sender, EventArgs e )
{
    string url = Request.Url.LocalPath;
    if ( !System.IO.File.Exists( Context.Server.MapPath( url ) ) )
        Context.RewritePath( ROOT_DOCUMENT );
}

在这里还有一些其他注意事项：

There are a few other caveats here:

1. 每个平台处理重写不同。在IIS的情况下，该URL被重写时，与该路线的其余部分被丢失。即对本地主机：1235 /注册，你将实际加载本地主机：1235 / 和角度永远没有收到 /寄存器路线。本质上，而不是由IIS已知的所有路由将返回您的应用程序入口点。

1. Each platform handles rewrites differently. In the case of IIS, the URL is rewritten, and the remainder of the route is lost. i.e. for localhost:1235/register, you will actually load localhost:1235/, and Angular will never receive the /register route. Essentially, all routes not known by IIS will return your app entry point.

您可以从一个入口点移动到另一个时，设置多个入口点到你的应用程序，但是任何内存变量，设置等的引用将会丢失。

You can set up multiple entry points to your app, but any in-memory references to variables, settings, etc. will be lost when moving from one entry point to another.

鉴于这两点，你应该的总是考虑任何外部URL是你的应用角度的全新副本，并相应地处理它们。

Given these two points, you should always consider any external URLs to be a fresh copy of your Angular application, and handle them accordingly.

这篇关于装上浏览器中刷新特定页面。 SPA AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！