Mehrere ng-Ansichten für die Homepage in angularjs

Okay, ich bin neu zu eckig, begann gerade mit ngRoute und ngView-Direktiven zu arbeiten, ich bin auf etwas gestoßen, das ein Problem für mich ist, aber ich vermute, ist nur ein Problem aufgrund meines Mangels Erfahrung in Angluar.Mehrere ng-Ansichten für die Homepage in angularjs

Ich habe das folgende Markup (vereinfacht) auf meiner Seite index.html:

<html> 
    <head> 
    <title>Sample APP</title> 
    </head> 
    <body> 
    <div class="header"> 
     <nav class="pull-right">...</nav> 
    </div> 

    <div class="main" ng-view> 
    </div> 

    <div class="footer"> 
    </div> 
    </body> 
</html>

Die oben ist die Standard-Layout-Struktur, die meine Seite verwendet. Jetzt ist mein Problem nur für die Startseite, ein Schieberegler wird im div mit der Klasse "header" angezeigt. Gefällt mir:

<div class="header"> 
    <nav class="pull-right">...</nav> 
    <div class="slider">...</div> 
<div>

Jetzt ist dies nur für die Homepage, also bin ich total verwirrt darüber, wie dies zu implementieren ist. Benötige ich zwei ng-view-Direktiven auf meiner Indexseite? zB:

<html> 
    <head> 
    <title>Sample APP</title> 
    </head> 
    <body> 
    <div class="header"> 
     <nav class="pull-right">...</nav> 
     <div class="slider" ng-view>...</div> 
    </div> 

    <div class="main" ng-view> 
    </div> 

    <div class="footer"> 
    </div> 
    </body> 
</html>

Auch wenn Sie wissen müssen, warum ich es so mache, ist es einfach, weil ich ein HTML-Template online gekauft, jetzt versuche ich AngularJS in die Vorlage zu integrieren.

Quelle

2015-05-04 user3718908

Es würde nur einzelne ng-view auf einer einzigen Seite sein. Es wird nicht möglich sein, mehrere ng-view zu haben. Wenn Sie andere Teiltöne laden möchten, müssen Sie die Direktive ng-include verwenden.

Ui-router Die beste Option, die die verschiedenen Ansichten unterstützt hat, die in die andere verschachtelt werden können, könnten Sie den Vorteil verschachtelter Ansichten nutzen.

könnten Sie haben Abfrage hier in Angular UI Router params wie in Format url: '/test?oneParam&twoParam' während diese Funktion nicht in ng-route

unterstützt würde ich vorschlagen, dass Sie Schalter ng-route-ui-route, zu ergreifen, die große Kontrolle über url hat, templatesstates

Quelle

2015-05-04 19:42:21

Ich bin so verwirrt von all dem, wie überprüfe ich, ob die aktuelle Seite/Route/Status zu Hause ist und den Schieberegler in meine Sicht injizieren? – user3718908

können Sie auf den aktuellen Status zugreifen, indem Sie den '$ state' Service benutzen, der alle Informationen über' state', 'params', url hat, wenn Sie' $ state.current.name' angeben, geben Sie den Namen 'state' & '$ state.params' enthält eine Sammlung von Parametern, die in der Route mit ihren Werten vorhanden sind. –

Also lege ich diesen Code in meinen Controller, aber wie wird die Slider Vorlage automatisch auf meiner Homepage geladen? – user3718908

Sie können nur eine ng-view haben.

Es ist jedoch möglich, den Inhalt auf verschiedene Arten zu ändern: ng-include, ng-switch oder die Zuordnung verschiedener Controller und Vorlagen über den routeProvider.

Sie können auch mit ui-router suchen, die mehrere parallele Ansichten ermöglicht.

Hier ist ein example of multiple views using ui-router.

Quelle

2015-05-04 19:41:30

Dies mag zu viel verlangen, aber da ich neu bin, kann ich ein Beispiel dafür bekommen, was ich erreichen möchte? – user3718908

@ user3718908 nur ein Beispiel für Sie hinzugefügt. –

Mehrere ng-Ansichten für die Homepage in angularjs

Antwort

Verwandte Themen