Загрузка определенной страницы в браузере. SPA AngularJS

Question

Я создаю новый веб-API и угловое приложение. Я хочу знать, как мы можем обрабатывать маршруты на стороне сервера. Все работает нормально. Я использую ui-router для маршрутизации, когда я обновляю браузер, чтобы он дал мне.

Ошибка HTTP 404.0 - Not Found

Я хочу знать, как мы можем справиться с этим.

Код для Ui-маршрутизатор

$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

Это происходит потому, что вы используете HTML5Mode = true в своем угловом приложении. Угловое использование «хэш» (/#register) маршрутизирует его маршрутизацию по умолчанию, чтобы гарантировать, что браузер не выполняет перезагрузку страницы с сервера.

Используя HTML5Mode, вы можете подавить #, но по цене. Браузер должен соответствовать HTML5, потому что HTML5Mode использует HTML Push State (HistoryAPI).

Кроме того, ваш сервер должен быть настроен для обработки запросов на маршруты, которые могут существовать в Угловом, но не существуют на сервере. Когда вы напрямую загружаете страницу, либо набрав ее, либо используя обновление, на сервер отправляется запрос с URL-адресом, который сервер может не знать, как обращаться. Ваш сервер должен быть настроен для возврата на страницу Index.html для любых маршрутов, которые он явно не обрабатывает. Эта конфигурация varies per server.

Учитывая вы заявили, вы используете 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/, а угловое устройство никогда не получит маршрут /register. По сути, все маршруты, неизвестные IIS, вернут точку входа в приложение.

2. Вы можете настроить несколько точек входа в приложение, но любые ссылки в памяти на переменные, настройки и т. Д. Будут потеряны при перемещении из одной точки входа в другую.

Учитывая эти две точек, вы должны всегда рассмотреть любые внешние URL-адрес, чтобы быть свежей копией вашего углового приложения, и обрабатывать их соответствующим образом.

Answer 2

Вот еще один способ изменить маршрут 404 к вашей SPA:

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