Jak mogę obsługiwać odświeżanie przeglądarki w aplikacji AngularJS SPA?

Question

Moja angularjs aplikacja używa

• ui-Router
• plik index.html
• wszystkie połączenia dla danych logowania i udać się do kontrolera sieci Web ASP.NET z adresem URL, który rozpoczyna się/api/xxx .

Kiedy użytkownik wchodzi na myapp.com, a następnie serwer index.html, który jest tym, czego chcę. Gdy użytkownik wybierze teraz linki na tej stronie, to Ui-Router pokazuje odpowiednie szablony wewnątrz index.html i pasek URL przeglądarka poprawnie wyświetla adresy takie jak:

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

Zauważ, że moja konfiguracja jest tworzona tak:

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

Jeśli użytkownik kliknie teraz na odświeżeniu wówczas przeglądarka zapomina, że ​​to było na index.html i próbuje znaleźć na stronie internetowej: myapp.com/city/london etc co oczywiście nie istnieje. Następnie pokazuje stronę błędu mówiącą, że strona nie istnieje.

Jak mogę sobie z tym poradzić? Chciałbym kliknięcie przez użytkownika na myapp.com/city odświeżyć i idealnie wrócić do myapp.com/city

Answer 1

EDIT

Podczas korzystania z HTML5 modle Ruting kątowe należy poinformować serwer jak obsłużyć żądanie Jeśli dojdziesz do jednej z tych tras, na przykład, jeśli spróbujesz wejść na stronę myapp.com/city, pojawi się błąd, ponieważ serwer będzie szukał strony city.html w katalogu głównym serwera, który nie będzie tam. Jeśli przejdziesz do tej trasy z poziomu swojej aplikacji, będzie działać dobrze, ale jeśli ją skopiujesz i wkleisz w pasku adresu przeglądarki, otrzymasz 404, ponieważ serwer nie wie, jak dostać się do city.html. Prostą poprawką byłoby unikanie używania trybu kierowania HTML5. Według kątowych docs trzeba zrobić URL przebudowywanie aby serwer zrozumieć, jak droga do tych stron:

From the docs:

Korzystanie z trybu HTML5 wymaga przepisywania URL po stronie serwera, w zasadzie mieć przepisać wszystkie łącza do punktu wejścia swojej aplikacji (np index.html)

można również zapoznać here, odpowiedź ta omawia jak dostać HTML5 routing pracy z serwerem.

Answer 2

kiedy użytkownik odświeży aplikację, możesz poprowadzić ją do strony logowania lub domyślnej strony. można to zrobić za pomocą poniższego kodu.