Das www.IT-Visions.de-Blog
Nachrichten von Dr. Holger Schwichtenberg und Kollegen

Um UI-Router zu nutzen, bindet der Entwickler die JavaScript-Datei angular-ui-router.min.js ein und importiert das Modul ui.router. Um UI-Router zu konfigurieren, lässt der Entwickler die Services $stateProvider und $urlRouterProvider in die Funktion config injizieren. Das nachfolgende Listing definiert mit der Funktion otherwise des Services $urlRouterProvider, welche Route zu verwenden ist, wenn der Benutzer eine Route aufruft, die nicht definiert wurde. Anschließend definiert es mit der Funktion state des Services $stateProvider verschiedene Zustände, die die Anwendung einnehmen kann. Jeder Zustand wird mit einer logischen Seite assoziiert, die sich aus einer oder mehrerer Views zusammensetzen kann.

Der erste an state übergebene Parameter ist der Name des jeweiligen Zustands. Der zweite Parameter stellt ein Objekt dar, welches den Zustand beschreibt. Dessen Eigenschaft url spiegelt die Route des Zustands wieder, templateUrl verweist auf die Datei, welche die View des Zustands beinhaltet und controller beinhaltet den Namen des für den jeweiligen Zustand verantwortlichen Controllers. Alternativ zur einer templateUrl kann auch mit der Eigenschaft template direkt das Markup der gewünschten View als String angegeben werden.

Wird ein Zustand mit der booleschen Eigenschaft abstract als abstrakter Zustand ausgewiesen, geht UI-Router davon aus, dass die damit assoziierte View Platzhalter für weitere Views beinhaltet. Ein Beispiel dafür ist der Zustand flugbuchung im nachfolgenden Listing. Welche View in diesen Platzhalter eingefügt wird, bestimmt der Benutzer, indem er den URL eines untergeordneten Zustands ansteuert. Untergeordnete Zustände (auch verschachtelte Zustände) erkennt man daran, dass Ihr Name dem des übergeordneten Zustands gefolgt von einem Punkt und einem eigenen Namen entspricht. Demnach handelt es sich im betrachteten Beispiel bei flugbuchung.passagier, flugbuchung.flug, flugbuchung.buchen und flugbuchung.meineBuchungen um Zustände, die dem Zustand flugbuchung untergeordnet sind. Der URL, der zu diesen untergeordneten Zuständen führt, entspricht der Kombination aus dem URL des übergeordneten Zustands und dem des eigenen Zustands. Beispielsweise würde im betrachteten Fall die Verwendung des URLs /flugbuchung/passagier innerhalb des Hash-Fragments zur Aktivierung des Zustands flugbuchung.passagier führen.

Bei Betrachtung der Konfiguration im nachfolgenden Listing fällt darüber hinaus auf, dass nur die abstrakte View flugbuchung einen Controller zugewiesen bekommen hat. Dieser Controller kommt somit auch für sämtliche untergeordnete Zustände zum Einsatz.

var app = angular.module("Flug", [ui.router]);

app.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/flugbuchung/passagier");

    $stateProvider.state(flugbuchung, {
        abstract: true,
        url: /flugbuchung,
        templateUrl: /partials/flugbuchung.html,
        controller: "FlugBuchenCtrl"
    }).state(flugbuchung.passagier, {
        url: /passagier,
        templateUrl: /partials/flugbuchung.passagier.html
    }).state(flugbuchung.flug, {
        url: /flug,
        templateUrl: /partials/flugbuchung.flug.html
    }).state(flugbuchung.buchen, {
        url: /buchen,
        templateUrl: /partials/flugbuchung.buchen.html
    }).state(flugbuchung.meineBuchungen, {
        url: /meineBuchungen,
        templateUrl: /partials/flugbuchung.meineBuchungen.html
    });
});

Das nachfolgende Listing zeigt das Markup der hier beschriebenen AngularJS-Anwendung. Im Element, das mit der Direktive ui-view versehen wurde, platziert UI-Router die View des jeweiligen Zustands.

<div>
    <div ui-view></div>
</div>

Die View des Zustandes flugbuchung findet sich im nachfolgenden Listing. Er weist zur Navigation zwischen den untergeordneten Zuständen Links auf, wobei jeder Link über die Direktive ui-sref auf den Namen jenes Zustands verweist, zu dem er führen soll. Die Stelle, an der die View des jeweils gewählten untergeordneten Zustandes eingesetzt wird, ist mit der Direktive ui-view markiert.

<div>
    
    <div class="step">
        <a ui-sref="flugbuchung.passagier">Passagier</a> |
        <a ui-sref="flugbuchung.flug">Flug</a> |
        <a ui-sref="flugbuchung.buchen">Buchen</a> |
        <a ui-sref="flugbuchung.meineBuchungen">Meine Buchungen</a>
    </div>

    <div ng-show="vm.message" 
         style="color:red; padding-left: 20px; font-weight: bold">
        {{ vm.message }}
    </div>

    <div ui-view></div>

</div>