Jak skonfigurować zagnieżdżone widoki w AngularJS?

Question

Mam aplikację z różnymi ekranami . Każdy ekran ma przypisany adres URL, taki jak #, mails, contacts i tak dalej.

W moim głównym pliku HTML mam element ng-view, który aktualizuje się zgodnie z trasą wybraną przez użytkownika. Jak na razie dobrze.

Niektóre z tych ekranów mają podrzędną nawigację. Np., #mails ma skrzynkę odbiorczą i folder wysłany. Przedstawiają się oni w dwóch kolumnach: pod-nawigacji po lewej stronie, w korespondencji z odpowiedniego folderu po prawej stronie.

Po przejściu do #mails, powinien skierować cię do #mails/inbox, tak, że w zasadzie Skrzynka to domyślny widok dla sub-maili.

Jak mogę to ustawić?

Jedyne podejście, jakie mogę obecnie myśleć (jestem całkiem nowy w AngularJS, a 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 widoki te są ładowane. Po wybraniu #mails po prostu przekierowuje cię do #mails/inbox.

Oznacza to jednak, że oba widoki muszą korzystać z pod-nawigacji w postaci ng-include. Jakoś to wydaje mi się złe.

Najbardziej chciałbym mieć widoki zagnieżdżone: górna z nich przełącza się między ekranami, takimi jak e-maile, kontakty itd., A dolna zmienia się między podprzeglądami, takimi jak skrzynka odbiorcza, wysłana itd. .

Jak rozwiązać ten problem?

Answer 1

AngularJS ui-router rozwiązać moje problemy :-)

Answer 2

innej biblioteki, aby sprawdzić: http://angular-route-segment.com

Można go używać zamiast wbudowanej ng-view i $route.

trasa Przykładowy config wygląda jak ten:

$routeSegmentProvider. 

when('/section1',   's1.home'). 
when('/section1/prefs', 's1.prefs'). 
when('/section1/:id',  's1.itemInfo.overview'). 
when('/section1/:id/edit', 's1.itemInfo.edit'). 
when('/section2',   's2'). 

segment('s1', { 
    templateUrl: 'templates/section1.html', 
    controller: MainCtrl}). 

within(). 

    segment('home', { 
     templateUrl: 'templates/section1/home.html'}). 

    segment('itemInfo', { 
     templateUrl: 'templates/section1/item.html', 
     controller: Section1ItemCtrl, 
     dependencies: ['id']}). 

    within(). 

     segment('overview', { 
      templateUrl: 'templates/section1/item/overview.html'}). 

     segment('edit', { 
      templateUrl: 'templates/section1/item/edit.html'}). 

     up(). 

    segment('prefs', { 
     templateUrl: 'templates/section1/prefs.html'}). 

    up(). 

segment('s2', { 
    templateUrl: 'templates/section2.html', 
    controller: MainCtrl});