Halten Sie die Browser-URL mit dem Anwendungsstatus synchron

8

Diese Frage bezieht sich auf diese Frage
Routing: Benachrichtigung über Parameteraktualisierungen, ohne die Ansicht neu zu laden

Ich habe eine Ansicht mit einer Gitteransicht (generiert mit ng-repeat ).
Der Routing-Parameter recId gibt an, welche Zeile anfänglich als aktuell definiert wird.

Die Ansicht verfügt über Navigationstasten (vorwärts rückwärts), um den aktuellen Datensatz auszuwählen. Ein Klick in einer Reihe macht diese Zeile zur aktuellen Zeile.

Diese Art der Navigation (Ansicht intern) verwendet die Routing-Funktionalität von AngularDarts nach dem erstmaligen Laden der Ansicht nicht.
Die Zurück / Vorwärts-Tasten spiegeln die Navigation innerhalb der Ansicht nicht wider.
Sobald ich den aktuellen Datensatz in der Ansicht ändere, ist die URL des Browsers nicht mehr synchron.

Wenn ich die Browser-URL jedes Mal ändere, wenn der Benutzer eine Navigationsaktion verwendet, wird die View-Funktion neu geladen. Dies macht die Entwicklung komplizierter und führt zu hässlichen Nachladungen der Ansicht (was WIP ist - siehe verbundene Frage).

Was ist der beste / richtige Weg, um den Anwendungsstatus und die Browser-URL (Verlauf) synchron zu halten?

Aktualisieren

Wie konfiguriere ich den Router, so dass ein Klick auf einen dieser generierten Links die URL im Browser aktualisiert, aber die Ansicht nicht neu lädt. (Es sollte möglich sein, ein Lesezeichen für den aktuell ausgewählten Datensatz zu erstellen.)

Der Code ist etwas veraltet, aber ich habe an diesem Projekt nicht gearbeitet, seit ich diese Frage gestellt habe.

Die Routerkonfiguration

%Vor%

index.html enthält neben Dart / AngularDart nur Boilerplate

%Vor%

Die View-Komponente enthält diesen Konstruktor

%Vor%

Ich habe heute eine Benachrichtigung über eine Pull-Anfrage erhalten, die zu diesem Thema gehört.

Günter Zöchbauer 17.02.2014, 07:38
quelle

1 Antwort

5

Nach einigen Recherchen und Tests lautet die kurze Antwort: Sie müssen verwenden Verlaufs-API

In der History-API finden Sie die Funktion pushState , die nützlich ist, um den URL-Speicherort zu ändern, ohne die Seite neu zu laden.

Information

In Ihrem Fall habe ich ein kleines Projekt erstellt, um zu versuchen, Ihr Problem zu reproduzieren: Karussell

In Ihrem Fall ist das Problem, den Router von eckigen Dart mit der URL des Browsers zu synchronisieren, aber:

1. Ich habe keine Möglichkeit gefunden, dies in Angular

zu tun

In angular ist es möglich, das Router-Objekt zu erhalten, aber:

  • .route(url) lädt die Seite neu
  • .url(url) lädt die Seite neu
  • .go(..) lädt die Seite neu

so ist es nicht möglich (mit meiner Forschung, vielleicht habe ich etwas vermisst) mit eckigen

2. es ist nicht möglich mit location

Ort wird auch die Seite neu laden

Lösung

Die einzigen Dinge, die ich gefunden habe, um das zu tun, was Sie wollen, ist der Verlauf API , so:

%Vor%

aber ein kleines Problem dabei ist, dass kein Ereignis ausgelöst wird, wenn Sie den Status ändern. Um dieses Verhalten zu beheben, habe ich einen kleinen Wrapper der Klasse erstellt, um ein Ereignis zu senden, wenn die pushState() -Funktion aufgerufen wird. p> %Vor%

Das erlaubt mir, in meiner Klasse einen Zuhörer für dieses Ereignis zu machen:

%Vor%

Damit können Sie in Ihrem Konstruktor Ihren Status, Ihr Attribut usw. richtig einstellen. Sie wissen, dass wenn Sie den Konstruktor aufrufen, eine Seite geladen oder neu geladen wird, und danach Ihre Synchronisation mit dem Verlauf und einer Funktion, die dies tut höre ein Ereignis.

Verknüpfung

Hinweis:

Ich bin mir nicht sicher, ob ich Ihre Frage richtig beantworte, wenn nicht, warne mich und ich lösche diese Antwort

    
Vink 28.07.2014, 12:32
quelle

Tags und Links