Wiele szablonów AngularJS na jednej stronie

Question

Mam indeks obsługujący statyczne menu nagłówków, a poniżej widok ng oparty na trasie wybiera odpowiedni szablon. Jak to na przykład:

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

Wszystko jest dobrze do tej pory, kiedy konkretna trasa jest trafiony, szablon jest ładowany w tym pojemniku z powiązanym z nim sterownika.

Teraz mam inną stronę, która jest ładowana wewnątrz ng-view, i jest uruchamiana, kiedy trafi się "/ dashboard" url. Problem polega na tym, że strona pulpitu ma menu paska bocznego, które musi również zawierać pewną logikę routingu (mniej więcej). Po kliknięciu łącza z menu paska bocznego muszę załadować tylko lewą stronę strony (nie cały kontener widoku ng).

ja zidentyfikowali dwa rozwiązania:

1) Utwórz dyrektywę, która sklepach menu paska bocznego i wstrzyknąć go we wszystkich stronach, które są obsługiwane przez menu bocznego ==> routingu jest nadal obsługiwane przez ng- widok.

2) Wykorzystanie ng obejmują i mieć trochę logiki routingu na stronie deski rozdzielczej tak:

<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> 

Czy istnieje inne podejście? Lub jaka jest najlepsza praktyka w obsłudze zarówno paska bocznego, który obsługuje niektóre trasy, jak i statycznego menu obsługującego inne trasy, z zaznaczeniem, że menu paska bocznego jest dostępne tylko na niektórych trasach.

Dostarczyłem rysunek farby, w nadziei, że mogę lepiej wyjaśnić mój problem.

Answer 1

można wykorzystywać UI-Router i dać szansę na zagnieżdżonych widoki. Oto really good tutorial. Myślę, że to, co próbujesz osiągnąć, jest wymienione na końcu samouczka.

Answer 2

Jak wszyscy inni sugerują, musisz przejść do interfejsu użytkownika i zagnieżdżonych widoków. To świetny sposób, aby skonfigurować układ strony.

można znaleźć odpowiedź w Angular UI-Router How to create a "layout" state?