wake-up-neo.com

Angular ui-router: Können Sie den Status ohne Änderung der URL ändern?

Die mehrere verschachtelte Ansichten-Funktionalität von ui-router ist sehr schön - Sie können problemlos von einem state Ihrer App zu einem anderen springen.

Manchmal möchten Sie möglicherweise die URL ändern, manchmal jedoch nicht. Ich denke, das Konzept von state sollte von routing getrennt/optional sein.

Hier ist ein Plunker, der zeigt, was ich meine. Dies ist eine Abzweigung eines der Plunker in der ui-router-Dokumentation, mit zwei kleineren Änderungen:

.state('route1', {
        url: "/route", // <---- URL IS SHARED WITH ROUTE2
        views: {
            "viewA": {
                template: "route1.viewA"
            },
            "viewB": {
                template: "route1.viewB"
            }
        }
    })
    .state('route2', {
        url: "/route", // <---- URL IS SHARED WITH ROUTE1
        views: {
            "viewA": {
                template: "route2.viewA"
            },
            "viewB": {
                template: "route2.viewB"
            }
        }
    })

Das scheint zu funktionieren - die URL bleibt gleich. Wie viel unnötige Arbeit wird hier geleistet? Ist dies eine genehmigte/getestete Verwendung?

Es wäre schön, wenn Sie die url von einem Bundesstaat weglassen könnten.

UPDATE: Sie can lassen eine URL aus einem Status aus. plunker

Update-Frage: Ist dies eine genehmigte/getestete Verwendung?

29
Michael Lewis

Sie können absolut einen Status ohne URL haben. Tatsächlich benötigt keiner Ihrer Staaten URLs. Das ist ein Kernbestandteil des Designs. Nachdem ich das gesagt habe, würde ich nicht das tun, was Sie oben gemacht haben.

Wenn zwei Zustände dieselbe URL haben sollen, erstellen Sie einen abstrakten übergeordneten Status , weisen Sie ihr eine URL zu, und machen Sie die beiden Zustände zu ihr (ohne eine der beiden URLs).

41
Nate Abele

Um der anderen Antwort hinzuzufügen, verwenden mehrere benannte Ansichten keine URL. 

Aus den Dokumenten:

Wenn Sie ein Sichtenobjekt definieren, werden templateUrl, template und .__ Ihres Staates angegeben. templateProvider wird ignoriert. Für den Fall, dass Sie eine .__ brauchen. Übergeordnetes Layout dieser Ansichten können Sie einen abstrakten Zustand definieren, der Enthält eine Vorlage und einen untergeordneten Status unter dem Layoutstatus. enthält das 'Views'-Objekt.

Der Grund für die Verwendung benannter Ansichten besteht darin, dass Sie mehr als eine Ui-Ansicht pro Vorlage oder mit anderen Worten mehrere Ansichten in einem einzigen Status haben können. Auf diese Weise können Sie können die Teile Ihrer Website mithilfe Ihres Routings ändern, selbst wenn sich die URL nicht ändert, und Sie können Daten auch in anderen Vorlagen wiederverwenden, da es sich um eine -Komponente mit einem eigenen Controller und einer eigenen Ansicht handelt. 

Unter Angular Routing mit UI-Router finden Sie eine ausführliche Erklärung mit Beispielen.

0
James Drinkard