2016-07-25 9 views
0

Ich habe eine kleine Web-App erstellt, in der ich den UI-Router benutze, um auf den Seiten zu navigieren. Alles funktioniert einwandfrei, abgesehen von der Aktualisierung des Browsers oder dem Zugriff auf die bestimmte Seite über den Statuslink. Ich habe verschiedene Lösungen ausprobiert, die hier zum selben Thema veröffentlicht wurden, aber keiner von ihnen half vielleicht aufgrund fehlender zusätzlicher Informationen.Wie kann ich den Browser neu laden und den aktuellen Status im AngularJS UI-Router beibehalten?

Wenn ich unten auf den ui-sref-Link klicke, erhalte ich 'mysite/content' und Seite wird normal angezeigt, aber sobald ich ihn aktualisiere oder versuche, durch einfaches Einfügen des Links darauf zuzugreifen, findet er die Seite nicht.

Könnten Sie bitte helfen, damit es wie erwartet funktioniert. Danke im Voraus.

HTML

<p ui-sref="content">Link To Content</p> 

AngularJS

var app = angular.module('myApp',['ui.router']); 

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouteProvider, $locationProvider){ 


    $urlRouteProvider.otherwise('/'); 


    $stateProvider 

     .state('home', { 
      url: '/', 
      views: { 
       '': { templateUrl: '/app/templates/wrapper.html'}, 
       '[email protected]': { templateUrl: '/app/templates/nav.html'}, 
       '[email protected]': { templateUrl: '/app/templates/header.html'}, 
       '[email protected]': { templateUrl: '/app/templates/footer.html'} 
      } 
     }) 

     .state('content', { 
      url: '/content', 
      views: { 
       '': { templateUrl: '/app/templates/content.html'}, 
       '[email protected]': { templateUrl: '/app/templates/nav.html'}, 
       '[email protected]': { templateUrl: '/app/templates/header.html'}, 
       '[email protected]': { templateUrl: '/app/templates/footer.html'} 

      } 
     }); 

    $locationProvider.html5Mode(true); 


}]) 
+0

Haben Sie irgendwelche Daten, die gelöst werden müssen, bevor die Seite geladen wird? Vielleicht sind deine App-Daten nicht geladen ... –

+0

Derzeit ist die App komplett leer. Jetzt habe ich festgestellt, dass, wenn ich den $ locationProvider.html5Mode (true) auf false gesetzt habe, er wie erwartet funktioniert, aber mit dem Bindestrich in der Verbindung. versuchen, es zu lösen –

Antwort

0

Mit html5Mode auf true gesetzt, wenn die Seite zu aktualisieren, wird Ihr Browser eine Anfrage an 'mysite/content' machen. In klassischen Ein-Seiten-Anwendungen hat Ihr Back-End eine Reihe von Routen, die einige Daten beantworten, und es ist normalerweise so konfiguriert, dass es die Anwendung index.html für alle anderen Routen zurückgibt (zum Beispiel 'mysite/content').

Es funktioniert, wenn Sie HTML5Mode deaktivieren, da der Browser eine Anfrage an die URL ohne den Teil nach dem '#', für die Ihr Back-End sicherlich die erwartete index.html zurückgibt.

Verwandte Themen