![Foto ,]()
14.03.2014 20:56:00
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
|