在浏览器刷新上加载特定页面.Spa Angularjs

Question

我正在创建一个新的Web API和Angular应用程序。我想知道如何处理服务器端的路由。一切正常。当我刷新浏览器时，我正在使用ui-router进行路由。

http错误404.0-找不到

我想知道我们如何处理。

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为 localhost:1235/register时，它是第一次加载良好，但是当我按刷新按钮时，我会遇到404错误。

Answer 1

这是因为您在Angular应用程序中使用了HTML5Mode = true。默认情况下，Angular使用" HASH"（/#register）路由来处理路由，以确保浏览器不会从服务器上执行页面重新加载。

使用HTML5Mode，您可以抑制#，但要付出代价。浏览器必须符合HTML5，因为HTML5MODE使用HTML PUSH State（historyapi）。

此外，您的服务器必须配置为处理可能存在于Angular但不存在服务器上的路由的请求。当您直接加载页面时，通过在或使用刷新中键入该页面时，请将请求发送到服务器，并使用服务器可能不知道如何处理的URL。应配置您的服务器以返回您未明确处理的任何路由的Index.html页面。此配置每个服务器各不相同。

鉴于您说您正在使用IIS托管您的网站，因此需要以下内容：

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以返回基本URL /。

这也可以在代码中完成，与此类似：

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

这里还有其他一些警告：

1. 每个平台都对重写有所不同。就IIS而言，将重写URL，其余路线丢失了。即，对于localhost:1235/register，您实际上将加载localhost:1235/，而Angular将永远不会接收/register路线。本质上，IIS不知道的所有路线都会返回您的应用程序入口点。

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

给定这两个点，您应该始终将任何外部URL视为您的角度应用程序的新副本，并相应地处理它们。

Answer 2

这是将404重新布鲁特重新安置到您的水疗中心的另一种方法：

 <system.webServer>
    <httpErrors errorMode="Custom">
      <remove statusCode="404" subStatusCode="-1"/>
      <error statusCode="404" prefixLanguageFilePath="" path="/spa-location.html" responseMode="ExecuteURL"/>
    </httpErrors>
 </system.webServer>