Mehrere Views pro Template in AngularJS mit UI-Router

Nachdem ich unter [1] gezeigt habe, wie man in AngularJS mit dem externen Modul UI-Router verschachtelte Views realisieren kann, gehe ich in diesem Beitrag darauf ein, wie man damit Templates, die sich aus mehreren Views zusammensetzen, implementieren kann. In diesem Fall erhält jede View einen Namen. Das nachfolgende Listing veranschaulicht dies, indem es für jeden konkreten Zustand eine View main sowie eine weitere View info definiert.

 

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',

        views: {

            "main": { templateUrl: '/partials/flugbuchung.passagier.html' },

            "info": { templateUrl: '/partials/flugbuchung.passagier.info.html' }

        }

    }).state('flugbuchung.flug', {

        url: '/flug',

        views: {

            "main": { templateUrl: '/partials/flugbuchung.flug.html' },

            "info": { templateUrl: '/partials/flugbuchung.flug.info.html' }

        }

    }).state('flugbuchung.buchen', {

        url: '/buchen',

        views: {

            "main": { templateUrl: '/partials/flugbuchung.buchen.html' },

            "info": { templateUrl: '/partials/flugbuchung.empty.html' }

        }

    }).state('flugbuchung.meineBuchungen', {

        url: '/meineBuchungen',

        views: {

            "main": { templateUrl: '/partials/flugbuchung.meineBuchungen.html' },

            "info": { templateUrl: '/partials/flugbuchung.empty.html' }

        }

    });

});

 

Um innerhalb einer View auf mehrerer definierte benannte Views zuzugreifen, übergibt der Entwickler den Namen der jeweiligen View an die Direktive ui-view, die Bereiche der Seite als Platzhalter ausweist (siehe nachfolgendes Listing).

 

<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="main"></div>

    <div class="step">
        <input ng-click="vm.goToNextState()" value="Weiter" type="button" />
    </div>

    <hr />

    <div ui-view="info"></div>

</div>

 

[1] http://www.softwarearchitekt.at/post/2014/03/10/Verschachtelte-Views-mit-AngularJS-und-UI-Router.aspx

 

 
Sie wollen mehr zum Thema Mehrere Views pro Template in AngularJS mit UI-Router wissen? Hier können Sie eine Anfrage für eine unverbindliche Schulung ode Beratung bzw. einen Workshop erstellen.
 
Unverbindliche Anfrage
 
 

Schulung und Beratung

Angular 2

Datenbindung, Formulare, Validierung, Routing, HTTP, Komponenten, ...

Details

Migration auf Angular 2

Bestehende Projekte auf Angular 2 migrieren, ngUpgrade, ...

Details

Angular 2: Deep Dive

Erweiterte Aspekte von Angular 2

Details

Progressive Web-Apps mit Angular 2

InHouse-Schulung und/oder Beratung maßgeschneidert für Ihre Lernziele

Details

Angular 2 Review

Feedback und klärung offener Fragen, weiterführende Themen

Details

Angular 2 Workshop

Start ohne Umwege

Details

Weitere Schulungen ...