UI-Router stellt eine Alternative zu ngRoute dar. UI-Router wird vom AngularUI Team entwickelt und setzt auf einen anderen Ansatz als ngRoute. Die Views werden hierbei nicht nur anhand des Pfades verändert, sondern definieren einen „state“. Hierbei kann der Zustand der Seite verändert werden, ohne den Pfad zu verändern.

Ein Beispiel

Bootstrap wird hier zum gestalten der Seite genutzt. Ansonsten werden natürlich AngularJS und UI-Router eingebunden. UI-Router nutzt die Direktive ui-sref um das Ziel des Links zu definieren. Anstatt ng-view wird ui-view verwendet.

Als nächstes werden die Routen definiert:

Die Anwendung bindet das Modul ui.router ein und injiziert den $stateProvider in die config-Funktion. Mit der .state-Funktion wird ein state definiert. Diesem wird hier ein Name, eine URL und ein Template gegeben. Auf den Namen wird in der ui-sref Direktive verwiesen.

Die home.html zeigt eine kurze Information zur Seite:

Die Seite hat nun noch nicht allzu viel Inhalt und sieht nun wie folgt aus:
Homepage

Nested Views

Views können verschachtelt werden. Als Beispiel wird das user-Partial wie folgt definiert:

Die Punktnotation wird verwendet, um Substates anzusprechen. Beim Anzeigen dieser Seite, befindet sich die Anwendung im users-state. Der .admin-Link verweist auf den state users.admin.

Die Konfiguration hierzu sieht wie folgt aus:

Über diesen Mechanismus können die Routinginformationen gruppiert und auch Daten vererbt werden.

Die Seite sieht zu diesem Zeitpunkt so aus:
users

Named Views

Mit Named Views können verschiedene Views auf einer Seite einzeln angesteuert werden. Hierzu wird der ui-view-Direktive ein Name zugewiesen.

Als Beispiel wird der Navigation eine View hinzugefügt und mit info benannt:

Bei Auswahl der Links Admin und User soll hierzu eine Kurze Information in dieser View angezeigt werden. Hierzu werden die States angepasst:

Innerhalb von views werden nun die einzelnen Views angesteuert. Hierbei entspricht der Leerstring der Standardview und mit info@ wird die im Menu eingefügt info-View angesprochen.

Im Menu wird nun die Information angezeigt:
usersinfo

Relative und Absolute Namen

UI-Router weist jeder View einen absoluten Namen zu. Diese können nach dem Schema viewName@stateName angesprochen werden. Mit diesem Namensschema ist es problemlos möglich, mehrere Views innerhalb eines States zu definieren und einzeln anzusteuern. Mehr Informationen zu diesem Konzept können der UI-Router Dokumentation entnommen werden.

Beispiel und Code

Code | Beispiel