126
Ich baue eine dynamische Web-App mit AngularJS. Ist es möglich, mehrere ng-view auf einer einzigen Vorlage zu haben?AngularJS - Mehrere ng-view in einer Vorlage
A
Antwort
92
Sie können nur eine ng-view haben.
Sie können den Inhalt auf verschiedene Arten ändern: ng-include, ng-switch oder verschiedene Controller und Vorlagen über routeProvider zuordnen.
+1
Zuordnung Controller und Vorlagen wird das ganze ng-view-Element ersetzen, richtig? – zx1986
+9
Wie wäre es, den Inhalt eines Widgets dynamisch zu ändern? Möchten Sie nicht eine Ansicht für das Widget und einen Controller für das Widget und ein Modell für das Widget erstellen? –
+0
Wird die Verwendung von Ansichten empfohlen? Ist es nicht besser divs mit 'ng-show' und' ng-hide' zu definieren und ihre Sichtbarkeit mit Variablen zu kontrollieren? Weil ich manchmal gerne mehrere Komponenten verstecken/anzeigen würde – SomethingSomething
13
Mit dem normalen Modul ng-view können Sie nicht mehr als eine dynamische Vorlage verwenden.
this project ermöglicht Ihnen jedoch (suchen Sie nach ui-router).
+3
angular-ui scheint eine gute Wahl in der (nahen) Zukunft, aber es scheint immer noch sehr instabil für die Produktionsnutzung –
38
UI-Router ist ein Projekt, das helfen kann: https://github.com/angular-ui/ui-router Eines davon Features ist, ist Multiple Benannte Ansichten
UI-Router verfügt über viele Funktionen, und ich empfehlen, es zu verwenden, wenn Sie gerade arbeiten eine erweiterte App.
Überprüfen Sie die Dokumentation von mehreren benannten Ansichten here.
+6
Leider wie ui-Router Readme sagt: Hinweis: UI-Router ist in aktiver Entwicklung. Während diese Bibliothek gut getestet ist, kann sich die API daher ändern. Erwägen Sie die Verwendung in Produktionsanwendungen nur dann, wenn Sie einem Änderungsprotokoll folgen und Ihre Verwendung entsprechend aktualisieren. – trainoasis
+1
@trainoasis Benutzte es für mehrere Projekte, scheint "sehr" stabil und bis jetzt hatte ich kein Problem über die Änderung der API, in der Tat erinnere ich mich nicht an einer größeren Änderung der API. –
15
Ich glaube, Sie können es erreichen, indem Sie einfach ng-view haben. In der Hauptvorlage können Sie ng-include Abschnitte für Unteransichten haben, dann im Hauptcontroller Modelleigenschaften für jede Untervorlage definieren. Damit werden sie automatisch an ng-include Abschnitte gebunden. Dies ist das gleiche wie mehrere mit ng-view
Sie das Beispiel in ng-includedocumentation gegeben überprüfen
im Beispiel, wenn Sie die Vorlage aus Drop-Down-Liste zu ändern den Inhalt ändert. Hier wird angenommen, dass Sie einen Haupt-ng-view haben und anstatt den Sub-Inhalt manuell auszuwählen, indem Sie das Dropdown-Menü auswählen, tun Sie es wie beim Laden der Hauptansicht.
+2
In Ermangelung einer Lösung wie UI-Router ist ng-include in der Tat eine brauchbare Alternative, wie Sie erklärt haben. Was ng-include nicht erreichen kann, sind URL (state) -gesteuerte Multi-Views, $ route kann verschiedene Views basierend auf der aktuellen URL nicht dynamisch darstellen. Wir könnten die Arme von Angular verdrehen und es durch die Verwendung benutzerdefinierter Logik im Controller möglich machen, wie das Beispiel in 'ng-include' [Dokumentation] (https://docs.angularjs.org/api/ng/directive/ngInclude) , aber es ist nicht wünschenswert, Anwendungsarchitektur Muster, UI-Router ist die richtige Art von Lösung. – Yiling
+0
Ein Plus für @Yiling Kommentar. Die Verwendung von ng-include ist eine Problemumgehung. –
7
Es ist möglich, mehrere oder verschachtelte Ansichten zu haben. Aber nicht durch ng-view.
Das primäre Routing-Modul in eckigen unterstützt nicht mehrere Ansichten. Aber Sie können Ui-Router verwenden. Dies ist ein Modul von Drittanbietern, das Sie über Github, angular-ui/ui-router, https://github.com/angular-ui/ui-router erhalten können. Derzeit wird auch eine neue Version von ngRouter (ngNewRouter) entwickelt. Es ist momentan nicht stabil. So stelle ich Ihnen ein einfaches Startbeispiel mit ui-router zur Verfügung. Mit diesem können Sie Ansichten benennen und angeben, welche Vorlagen und Controller zum Rendern verwendet werden sollen. Mit $ stateProvider sollten Sie angeben, wie die Ansichtsplatzhalter für einen bestimmten Status gerendert werden sollen.
<body ng-app="main">
<script type="text/javascript">
angular.module('main', ['ui.router'])
.config(['$locationProvider', '$stateProvider', function ($locationProvider, $stateProvider) {
$stateProvider
.state('home', {
url: '/',
views: {
'header': {
templateUrl: '/app/header.html'
},
'content': {
templateUrl: '/app/content.html'
}
}
});
}]);
</script>
<a ui-sref="home">home</a>
<div ui-view="header">header</div>
<div ui-view="content">content</div>
<div ui-view="bottom">footer</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js">
</body>
Sie müssen angularjs und angular-ui.router für dieses Beispiel referenzieren.
$ bower install angular-ui-router
+0
Danke Farshid das ist großartig! Es sollte im angular-ui/ui-Router Github-Repository https://github.com/angular-ui/ui-router erwähnt werden, wo ich das Modul – totallytotallyamazing
+0
bekam. Ich bin mir nicht sicher, warum du das tun musst. Warum nicht ng-include die Kopf-/Fußzeile und die ng-Ansicht des Inhalts? – user441521
scheint es eine Pull-Anforderung zu sein, immer noch mit einigen Bugs: https://github.com/angular/angular.js/pull/1198 – Alp
Jan Varwig über die Rolle der Richtlinien in Angular schreibt. Es ist keine Antwort auf Ihre Frage, aber in einigen Fällen könnten seine Ideen eine gute Alternative sein: http: //jan.varwig.org/archive/angularjs-views-vs-Direktiven/comment-page-1 –
ging durch das eckige Tutorial und hatte genau diese Frage, sie machen dies nicht sehr klar, scheint aber ein ziemlich tiefes Konzept .. – qwwqwwq