AngularJS – UI Router

13 Oktober 2015
Andreas Heizmann

Erstellt man anspruchsvolle Web-Anwendungen mit AngularJS, stößt man schnell an die Grenzen des eingebauten Routers „ngRoute“. Probleme entstehen hier beim Aufbau komplexer Ansichten mit mehreren Sub-Views.

Abhilfe schafft der UI-Router welcher das Angular Core Modul ersetzt. Entwickelt wird dieser vom AngularUI Team. Hauptvorteil des UI-Routers ist das Strukturieren der Ansichten mit Hilfe von States. Views werden hierbei nicht mehr nur einem Pfad zugeordnet sondern einem oder mehrerer States.


Integration

Der UI-Router liefert seine eigenen Directives. Zum Einbetten von Views wird die Directive der Kernkomponente ng-view durch ui-view ersetzt.

Ein Link-Ziel lässt sich durch das Attribut ui-sref mit Angabe des States info erzeugen:

<a ui-sref="info">Informationen</a>

Alternativ erhält man eine url auch im Controller direkt über: $state.href()


Konfiguration

angular.module('ui-router-test, ['ui.router'])
  .config(function ($stateProvider, $urlRouterProvider) {
 
      $stateProvider
        .state('home', {
          url: '/',
          templateUrl: 'shared/home.html'
        })

        .state(info, {
          url: '/infos',
          templateUrl: 'shared/info.html'
        })

        .state('kontakt', {
          url: '/kontakt',
          templateUrl: 'shared/kontakt.html'
        });
        
    $urlRouterProvider.otherwise('/info');

});

Das UI Router Modul muss zunächst eingebunden werden [‚ui.router‘]. Die Konfiguration der States geschieht über die $state Funktion. Man vergibt einen Namen, eine Url und ein Template. Über $urlRouterProvider.otherwise lässt sich eine default Route angeben, die verwendet wird, wenn die url keinem State zugeordnet werden kann.

Views lassen sich wie bei ngRoute auch, beliebig verschachteln. Der Vorteil vom UI Router ist jedoch die Möglichkeit beliebig viele Childviews auf einem View zu Platzieren. Dazu verwendet man sogenannte Named Views mit der Directive ui-view=“viewname“.

In der State Konfiguration lassen sich danach bequem Named Views mit States verbinden.