AngularJS mehrere Vorlagen auf einer Seite

Ich habe einen Index, der ein statisches Header-Menü und darunter eine ng-Ansicht bietet, die basierend auf der Route die richtige Vorlage auswählt. Wie dies zum Beispiel:AngularJS mehrere Vorlagen auf einer Seite

<navbar> 
    ... 
</navbar> 
<div ng-view> 
</div>

Alles ist so weit gut, wenn eine bestimmte Route getroffen wird, wird eine Vorlage geladen in diesem Behälter mit der zugehörigen Steuerung.

Jetzt habe ich eine andere Seite, die in ng-view geladen wird, und es wird gefeuert, wenn die URL "/ dashboard" getroffen wird. Das Problem ist, dass die Dashboard-Seite ein Sidebar-Menü hat, das auch Routing-Logik (mehr oder weniger) enthalten muss. Wenn ein Link aus dem Seitenleistenmenü geklickt wurde, muss ich nur die linke Seite der Seite laden (nicht den ganzen ng-view Container).

ich zwei Lösungen identifiziert:

1) eine Richtlinie erstellen, die dieses Sidebar-Menü speichert und injizieren sie in alle Seiten, die == durch die Sidebar-Menü behandelt werden> Routing noch von ng- behandelt wird Aussicht.

2) Verwendung ng-umfassen und eine Routing-Logik in der Dashboard-Seite wie dieses:

<a ng-click="templateType = 1">Template 1</a> 
<a ng-click="templateType = 2">Template 1</a> 

<div ng-if="templateType === 1" ng-include="template1" 
    ng-controller="Template1Controller"></div> 
<div ng-if="templateType === 2" ng-include="template2" 
    ng-controller="Template2Controller"></div>

Gibt es einen anderen Ansatz? Oder was ist die beste Vorgehensweise beim Umgang mit einer Seitenleiste, die bestimmte Routen verarbeitet, und einem statischen Menü, das andere Routen abdeckt, mit der Erwähnung, dass das Seitenleistenmenü nur auf einigen Routen verfügbar ist.

Ich habe eine Malzeichnung zur Verfügung gestellt, in der Hoffnung, dass ich mein Problem besser erklären kann.

enter image description here

Quelle

2015-06-11 Rus Paul

Warum nicht eckig-ui-Router verwenden? – nikhil

Sie können [angular-route-segment] (http://angular-route-segment.com/) auch überprüfen. –

@nikhil Ich dachte, dass es vielleicht eine eingebaute Lösung ohne eine weitere externe Abhängigkeit gibt –

Sie können UI-Router verwenden und einen Schuss auf verschachtelte Ansichten geben. Hier ist eine really good tutorial. Ich denke, was Sie erreichen wollen, wird am Ende des Tutorials erwähnt.

Quelle

2015-06-11 11:15:44 Freezystem

Es funktioniert nicht für mich, weil es viel Arbeit erfordert, die aktuelle App zu modifizieren, um ihre Implementierung von Routing zu verwenden. –

UI-Router unterscheidet sich nicht von ngRouter. Es behandelt Zustände gegen Routen, routeParams werden zu stateParams und ui-view ersetzt die ursprüngliche ng-view-Direktive. Dann können Sie mit ui-sref (wirklich nützlich) oder einfach mit href auf Ihre Routen verweisen. Aber ich verstehe deinen Standpunkt. Ich denke, dass Sie mithilfe von ngRoute-Parametern bestimmen können, welches Unterelement angezeigt werden soll, es kann jedoch etwas komplexer sein. :) – Freezystem

UI-Router scheint wirklich nett, aber die meine App hat ~ 150 verschiedene Routen verteilt über viele Module und es würde erfordern, jeden einzelnen von ihnen zu modifizieren, um UI-Router-Implementierung zu entsprechen. An diesem Punkt würde ich lieber eine Direktive für eine Sidebar machen, und ich injiziere sie überall dort, wo ich sie brauche. –

Wie alle anderen vorgeschlagen haben, müssen Sie für UI-Router und verschachtelte Ansichten gehen. Es ist eine großartige Möglichkeit, Ihr Seitenlayout einzurichten.

können Sie finden die Antwort in Angular UI-Router How to create a "layout" state?

Quelle

2015-08-11 02:18:48 Hacker

AngularJS mehrere Vorlagen auf einer Seite

Antwort

Verwandte Themen