Angular UI Routing und Komponenten

Angular UI Router hat langsam die Unterstützung für das Routing zu Angular-Komponenten integriert. In diesem Beitrag wird erörtert, warum das nützlich ist und wie man es mit den beiden Versionen Angular UI Router 0.x.x und 1.0.0-beta.x macht.

Hintergrund

Mit der Einführung von Angular-Komponenten in Version 1.5 wurde das Konzept eines eigenständigen, wiederverwendbaren Satzes von Verhaltensweisen und Ansichten einfacher zu definieren als zuvor in Direktiven. Diese Änderungen umfassen: Abstrahieren des Umfangs, explizite Bindung an Controller, Bereitstellung von Lifecycle-Hooks im Controller sowie einige andere Dinge.

Dies ermöglichte eine bessere Komponentisierung ganzer Ansichten und Anwendungen. Damit kam die Erkenntnis, dass eine Webseite eine Komponente ist, die aus Komponenten besteht.

Damit wurde das Routing zu einer Komponente zu einem gewünschten Verhalten.

Smart vs. Dumb Components

Bevor wir uns mit der Verwendung von UI Router für das Routing zu Komponenten beschäftigen, sollte das Konzept von intelligenten und dummen Komponenten diskutiert werden.

Eine intelligente Komponente ist eine, die sich der API und der Daten, die eine Ansicht steuern, sehr bewusst ist. Das bedeutet, dass ihr Controller bei der Initialisierung der Komponente typischerweise einen Service-Aufruf durchführt. Sie weiß, was für den Aufruf erforderlich ist und welche Antwort sie von der API erwarten sollte.

Auf der anderen Seite gibt es dumme Komponenten, die wissen, was mit einem übergebenen Objekt oder Wert zu tun ist und für welche Interaktionen sie verantwortlich sind. Sie interagieren in der Regel nicht mit Diensten. Die meisten Interaktionen führen zu einem Rückruf an eine übergeordnete Komponente, um Informationen zurück zu geben, die
von einer intelligenten Komponente verwendet werden sollen, oder sie beziehen sich nur auf Anzeigeänderungen.

Im Sinne der Wiederverwendbarkeit sind dumme Komponenten typischerweise die am meisten wiederverwendbaren (man denke an Container mit Kopfzeilen, Navigationsleisten, Auswahlboxen usw.). Intelligente Komponenten eignen sich hervorragend für die Erstellung kompletter Anwendungen auf hohem Niveau, sind aber nicht sehr anpassungsfähig.

Der beste Weg, eine Komponente dumm zu machen, besteht darin, die API-Aufrufe aus den Controllern zu entfernen und einen Weg zu finden, die Daten über eine Art von Bindung bereitzustellen. Dies ist hilfreich, wenn Sie bereits über die gleichen Daten verfügen, die eine intelligente Komponente benötigt, aber nicht zweimal zum Server gehen wollen, um sie zu erhalten.

Schreiben einer Anwendung als Komponente

Mit dem Übergang zu komponentenbasierten Anwendungen gab es einen Bewusstseinswandel in Bezug darauf, wie wir Anwendungen betrachten. Ganze Anwendungen können als eine Komponente betrachtet werden. Dies hat tatsächlich praktische Anwendungsfälle. Wenn wir beispielsweise unsere Anwendung als Komponente schreiben, können wir eine eigenständige Webanwendung in einen hybriden Webcontainer packen und daraus eine mobile Anwendung machen.

Der beste Weg, eine Anwendung als Komponente zu schreiben, ist die Nutzung von verschachtelten Ansichten im UI Router. Dies kann manchmal eine Herausforderung sein, aber es ermöglicht eine große Flexibilität beim Austausch von Komponenten basierend
auf dem Zustand der Anwendung.

Verwendung von Komponenten in der Zustandsdefinition unter Verwendung von Vorlagen

Die erste Integration mit routingfähigen Komponenten bestand darin, statt einer templateUrlEigenschaft in der Zustandsdefinition die templateEigenschaft zu verwenden. Ein Beispiel hierfür wäre wie folgt:

Das funktioniert natürlich, aber wenn jeder einzelne Zustand mit einem HTML-Element deklariert wird, das einfach ein einzelnes HTML-Element ohne Attribute ist, wird es mühsam.

Zugegeben, die gesamte Logik und Anzeige in Bezug auf diese Komponente ist isoliert und wiederverwendbar. Wenn Sie zum Beispiel beschließen, myComponent in eine Navigationsvorlage zu verpacken, können Sie das jetzt tun, ohne eine neue Komponente aus einer Vorlage generieren zu müssen, wenn Sie den gleichen Zustand wie folgt einrichten:

Bindung an Komponenten

Wie schreiben wir eine vollständige Anwendung als eine stumme Komponente, wenn viele unserer Routen Serviceaufrufe tätigen müssen, um Informationen anzuzeigen, die ein Benutzer sehen möchte?

Eine mögliche Antwort darauf ist, die Daten, die für das Funktionieren der Komponente erforderlich sind, aus der Route aufzulösen und sie dann über die Bindungen der Komponente in die Komponente zu binden. Hierfür gibt es zwei Ansätze:

1. Erstellen Sie eine intelligente Komponente, die eine dumme Komponente umhüllt. Der einzige Zweck der intelligenten Komponente besteht darin, einen Dienstaufruf zu tätigen und eine ordnungsgemäße Bindung an die unintelligente Komponente herzustellen.
2. Verwenden Sie die im UI-Router bereitgestellte Auflösungsfunktionalität, um Daten direkt in die unintelligente Komponente aufzulösen.

Bei beiden Optionen gibt es einige offensichtliche Kompromisse. Mit einem Smart Component Wrapper haben Sie eine zusätzliche Komponente zu pflegen. Bei der Auflösung der Komponente mit UI Router sind Sie an die Fähigkeit des Routers gebunden, und es ist auch schwieriger, die Ausnahmebehandlung zu verwalten.

Abgesehen davon ist das Erstellen von routingfähigen Komponenten über die Bindungen von UI Router extrem einfach, und UI Router ist leistungsfähig genug und bietet großartige Funktionen bis zu dem Punkt, an dem es, wenn es in Ihrem Projekt ist, wahrscheinlich dort bleiben wird, bis eine Anwendung komplett neu geschrieben wird.

Um in der stabilen Version von UI Router (0.x.x) an eine Komponente zu binden, erstellt UI Router ein $resolve-Objekt in dem Kontext, der zum Kompilieren des Inhalts der ui-view verwendet wurde.

Dies kann verwendet werden, um an eine Komponentendeklaration in der template-Eigenschaft der Zustandsdefinition zu binden.

Damit können wir die UserService-Abhängigkeit von der user-Komponente entfernen. Für die intelligenten Komponenten, die einfach einen Dienst aufrufen und dann die Informationen anzeigen, können wir auch einen ganzen Controller eliminieren.

Binden an Komponenten – 1.0.0-beta.x

Mit der Veröffentlichung von [email protected] wurde die component-Eigenschaft zum Zustandsdefinitionsobjekt hinzugefügt. Dies ermöglicht es dem Entwickler, direkt an eine Komponente zu binden, wie sie im Angular-Modul definiert ist. Damit entfällt die Notwendigkeit, eine Vorlage mit einem einzelnen Element zu erstellen, wie dies in der Vergangenheit der Fall war.