Jak skonfigurować zagnieżdżone widoki w AngularJS?
Mam aplikację z różnymiekrany. Każdy ekran ma przypisany adres URL, na przykład#
, mails
, contacts
, i tak dalej.
W moim głównym pliku HTML mamng-view
element, który aktualizuje się zgodnie z trasą wybraną przez użytkownika. Jak na razie dobrze.
Teraz niektóre z tych ekranów mają pod-nawigację. Na przykład.,#mails
ma skrzynkę odbiorczą i folder wysłany. Prezentują się w dwóch kolumnach: Pod-nawigacja po lewej stronie, maile odpowiedniego folderu po prawej stronie.
Kiedy nawigujesz do#mails
, przekieruje cię do#mails/inbox
, więc w zasadziew pudełku to domyślny pod-widok wiadomości e-mail.
Jak mogłem to ustawić?
Jedyne podejście, o którym mogę obecnie pomyśleć (jestem całkiem nowy w AngularJS, więc wybacz mi, jeśli to pytanie jest trochę naiwne), to mieć dwa widoki, jeden dla#mails/inbox
, a drugi dla#mails/sent
.
Po wybraniu trasy te widoki są ładowane. Po wybraniu#mails
po prostu przekierowuje cię do#mails/inbox
.
Ale to oznacza, że oba widoki muszą używaćng-include
dla pod-nawigacji. Jakoś mi się to nie podoba.
To, czego chciałbym więcej, to zagnieżdżone widoki: Górny przełącza między ekranami takimi jak maile, kontakty itd., A dolny zmienia między widokami podrzędnymi, takimi jak skrzynka odbiorcza, wysłana i tak dalej.
Jak mam to rozwiązać?