Zwei Probleme haben mich beunruhigt, da ich eckig gelernt habe:
Wie stelle ich den Status wieder her, wenn der Benutzer die Seite aktualisiert oder die Zurück-Taste drückt?
Wie teile ich Daten zwischen Bereichen, die zu verschiedenen Controllern gehören?
Im Folgenden zeige ich eine einfache Lösung, die den clientseitigen Sitzungsspeicher nutzt. Es ermöglicht die gemeinsame Nutzung gemeinsamer Daten und die automatische Wiederherstellung des Status, nachdem ein Benutzer die Seite aktualisiert oder die Zurück-Schaltfläche gedrückt hat.
Hinweis: Die folgende Lösung erwies sich als unerlässlich, um die folgende Frage zu beantworten:
Wie bekomme ich die Zurück-Taste, um mit einem AngularJS-Router zu arbeiten?
Die Lösung hängt von der unten angegebenen Klasse SessionService ab. Die Syntax ist Kaffeescript.
SessionService-Klasse
%Vor% Die Klasse SessionService definiert die Eigenschaft isAuthenticated (simple bool) und die Eigenschaft user (ein komplexes Objekt). Die Werte dieser Eigenschaften werden automatisch mit dem crois-seitigen lokalen Objekt sessionStorage , das von javascript bereitgestellt wird, angegeben / gelesen.
Sie fügen weitere Eigenschaften nach Bedarf hinzu . Wie $rootScope fügen Sie Eigenschaften sparsam hinzu. Im Gegensatz zu $rootScope sind die Eigenschaftswerte auch nach einer Seitenaktualisierung oder einem Zurück-Klick verfügbar.
Der Dienst ermöglicht die Registrierung einer beliebigen Anzahl von Bereichen. Wenn ein Bereich registriert wird, werden alle gespeicherten Werte in sessionStorage automatisch diesem Bereich zugewiesen. Auf diese Weise haben alle registrierten Bereiche immer Zugriff auf alle Sitzungseigenschaften.
Wenn ein Eigenschaftswert aktualisiert wird, werden für alle registrierten Bereiche die entsprechenden Werte aktualisiert.
Wenn eckig einen Bereich zerstört, wird er automatisch aus der Liste der registrierten Bereiche entfernt, um Ressourcen zu sparen.
Wenn ein Benutzer die Seite aktualisiert oder die Zurück-Taste drückt, wird die Winkelanwendung gezwungen, neu zu starten. Normalerweise würde das bedeuten, dass Sie Ihren aktuellen Zustand rekonstruieren müssten. Das SessionService erledigt dies automatisch für Sie, da für jeden Bereich die Werte aus dem lokalen Speicher wiederhergestellt werden, wenn sie während der App-Initialisierung registriert werden.
Nun ist es also leicht, das Problem zu lösen, Daten sowohl zwischen Bereichen zu teilen als auch Werte wiederherzustellen, wenn der Benutzer die Schaltfläche "Zurück" aktualisiert oder drückt.
Hier ist ein Beispielcode, der zeigt, wie die Klasse SessionService verwendet wird.
Registrieren Sie einen Bereich mit SessionService in einem Controller
%Vor%Festlegen von Sitzungswerten in einem Service
%Vor%Verwenden Sie Sitzungswerte in der Benutzeroberfläche (Jade-Vorlage)
%Vor%Ich war mit dem gleichen Problem konfrontiert und entschied mich für eckige Cookies, da die Nur der Status, der nicht von der Vorlage über ng-init gezogen wird, ist der angemeldete Benutzer Zustand.
Ich speichere die Benutzer-ID bei der Anmeldung in einem Cookie, nachdem ich den Benutzer erhalten habe
Modell von unserem Server und ich lösche den User-ID-Cookie beim Abmelden. Dann um sich zu erholen
der eingeloggte Benutzerstatus bei einem Seitenaktualisierungs - oder Zurücktastenereignis, hake ich den
$location service $locationChangeStart event. Aus meinen Experimenten
Das Ereignis wird an dem Punkt ausgelöst, an dem sich der Standort ändert, aber vor dem Ereignis
Partial / Template wurde geladen. Dadurch kann der benötigte Status nur geladen werden
rechtzeitig.
Ich bin nicht überzeugt, dass ich hier keine Race Condition habe
$scope.loadLoggedInUser(...) verwendet asynch $ http um den benötigten Zustand zu laden, aber bisher
es hat zuverlässig für mich gearbeitet.
Es gibt eine einfache Lösung, wenn Sie Node.js verwenden, um Ihren Server zu konfigurieren. Sie müssen Ihr Routing auf der Client-Seite so organisieren, dass Ihre Route als eindeutige reguläre Ausdrücke verknüpft wird. In app.js hast du:
%Vor% In diesem Beispiel können alle Routen, außer '/' , in einem regulären Ausdrucksschema [A-Za-z] geschrieben werden. Damit wäre die Datei server.js wie folgt:
Nun wird jede GET -Anfrage, die mit der Regex [A-Za-z] übereinstimmt, eine Antwort mit index.html geben (das sind unsere Routen, die beim Aktualisieren einer Seite aufgerufen werden, z. B. /about ). Jede andere GET -Anforderung antwortet mit einer Datei aus dem /public -Verzeichnis (hier jede Datei mit der Erweiterung *.html ). Dies ermöglicht eine korrekte Aktualisierung des AngularJS SPA.
Tags und Links angularjs coffeescript