Come posso gestire un aggiornamento del browser in un'applicazione AngularJS SPA?

Question

La mia applicazione utilizza AngularJS

• ui-router
• un file index.html
• tutte le chiamate per il login e dei dati andare a un Web ASP.NET controller con un URL che inizia con/api/xxx .

Quando un utente immette myapp.com, quindi il server index.html che è quello che voglio. Quando l'utente seleziona ora collegamenti a quella pagina, quindi ui-router mostra i modelli appropriati all'interno della index.html e la barra degli indirizzi del browser viene visualizzato correttamente gli indirizzi come questi:

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

Si noti che la mia configurazione è impostato in questo modo:

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

Se un utente fa clic sul ora di aggiornamento quindi il browser dimentica che era su index.html e cerca di trovare la pagina web: myapp.com/city/london etc che ovviamente non esiste. Quindi mostra una pagina di errore che dice che la pagina non esiste.

Come posso gestire questa situazione? Vorrei un clic utente su myapp.com/city per aggiornare e idealmente tornare a myapp.com/city

Answer 1

EDIT

Quando si utilizza HTML5 modle Ruting con angolare è necessario indicare il server come gestire la richiesta Se si arriva a uno di questi percorsi, ad esempio se si tenta di andare su myapp.com/city, si verificherà un errore perché il server cercherà una pagina city.html nella root del server che non ci sarà Se navighi su quella rotta all'interno della tua app funzionerà bene, ma se la copi e la incolli nella barra degli indirizzi del browser riceverai un 404 perché il server non capisce come arrivare a city.html. Una soluzione semplice sarebbe evitare di utilizzare la modalità di routing HTML5. Secondo la documentazione angolari è necessario fare un po 'la riscrittura degli URL per rendere il vostro server di capire come instradare a quelle pagine:

From the docs:

Utilizzando la modalità HTML5 richiede la riscrittura degli URL sul lato server, in pratica si hanno per riscrivere tutti i link a punto di ingresso dell'applicazione (ad esempio index.html)

È possibile anche avere uno sguardo here, questa risposta discute come ottenere HTML5 instradamento lavorare con il server.

Answer 2

quando l'utente aggiorna l'applicazione, è possibile portarli alla pagina di accesso o alla pagina predefinita. che può essere fatto con il seguente codice

app.run(['$location', function ($location) { 
    $location.path('/login'); 
}]);