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

 

Schulung und Beratung

Modern Web mit Angular 2

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

Details

Migration auf Angular 2

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

Details

Progressive Web-Apps mit Angular 2

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

Details

Architektur-Workshop

Interaktiver Prototyp-Workshop für Ihre Anwendung

Details

Entity Framework (EF)

Datenzugriff mit Entity Framework, Mapping-Szenarien, CRUD, Transaktionen, Migrations, Stored Procedures, Vererbung, Neuerungen in Version 7

Details

Angular 2: Deep Dive

Erweiterte Aspekte von Angular 2

Details

ASP.NET WebAPI

Web APIs mit ASP.NET, HTTP, REST, Security, Formatter, Tracing, OData, Streaming

Details

Web APIs mit ASP.NET MVC 6

Web APIs mit ASP.NET, HTTP, REST, Security, Formatter, Tracing, OData, Streaming

Details

Moderne Security-Szenarien für Web APIs

OAuth 2, OpenId Connect, JWT, Spielarten und Flows, ...

Details

Weitere Schulungen ...