Kątowy interfejs użytkownika: widoki zagnieżdżone a widoki wielokrotne

Question

ui-router to świetna alternatywa dla standardowego routera kątowego; obsługuje nested states and views i multiple views.

Jestem trochę zdezorientowany przez różnicę między nimi. Wydaje mi się, że wiele widoków można prawie zawsze myśleć i implementować jako widoki zagnieżdżone komponentu "wyższego rzędu". Na przykład, jeśli weźmiemy pod uwagę aplikację z paskiem bocznym i polem zawartości, możemy modelować je jako dwa widoki "równoległe" lub jako pasek boczny widok nadrzędny, a okienko treści - zagnieżdżony widok podrzędny, który zależy od wybranego elementu paska bocznego .

Sam readme zdaje się sugerować podział nie jest to jednoznaczne:

Pro Tip: Podczas wielu równoległych widoki są potężnym narzędziem, często będzie w stanie bardziej efektywnie zarządzać poprzez interfejsy zagnieżdżanie widoków i parowanie tych widoków ze stanami zagnieżdżonymi.

Kiedy należy używać wielu widoków i widoków zagnieżdżonych? Czy istnieją pewne kryteria, które mogą pomóc w wyborze większości czasu, który jest prawidłowym sposobem modelowania stanów, zagnieżdżonych w stosunku do wielu?

Answer 1

W moim rozumieniu, wiele widoki są przede wszystkim dla układ celów, a widoki są zagnieżdżone dla matek-dzieci hierarchiczne widoki. Korzystanie sprawę pan wymienić jako przykład:

Pasek boczny i treść mogą być umieszczone w dwóch odmiennych poglądów:

$stateProvider.state('main', { 
     abstract: true, 
     url: '/main', //base url for the app 
     views: { 
     '': { 
       //this serves as a main frame for the multiple views 
       templateUrl: 'path/to/the/main/frame/template.html' 
     }, 
     'sideBar@main': { 
      templateUrl: 'path/to/the/sidebar/template.html' 
      }, 
     'content@main': { 
      templateUrl: 'path/to/the/content/template.html' 
     } 
     } 
}); 

Szablon path/to/the/main/frame/template.html może zawierać następujące ramy:

<div class="row"> Header section </div> 
<div class="row> 
    <div class="col-sm-4"><div ui-view="sideBar"></div></div> 
    <div class="col-sm-8"><div ui-view="content"></div></div> 
</div> 

Następnie w sideBar lub szablonach treści można zagnieżdżać swoje podzbiory/częściowe dzieci.

Answer 2

Stany zagnieżdżone mogą być używane z widokami zagnieżdżonymi i równoległymi.

Wystarczy zauważyć coś na temat zagnieżdżonych stanów.

Co sprawia, że ​​zagnieżdżone stwierdza świetnie, że można łatwo udostępniać/dziedziczyć dane z widoku rodzica na dziecko.

np.

Powiedzmy, że masz kilka stron, które wymagają użytkownik zalogowany

$stateProvider 
.state('admin', { 
    url: '/admin' 
    resolve: { authenticate: authenticate } 
}) 
.state('admin.users', { 
    url: '/users' 
}) 

function authenticate(Auth) { 
    if (Auth.isLoggedIn()) { 
     // Resolve the promise successfully 
     return $q.when(); 
    } else { 
     $timeout(function() { 
      // This code runs after the authentication promise has been rejected. 
      // Go to the log-in page 
      $state.go('login', {}, {reload:true}); 
     }); 
     // Reject the authentication promise to prevent the state from loading 

    return $q.reject(); 
}  

Teraz każdy stan, który jest stanem dziecko admin musi przejść authenticate usługę (nawet jeśli przejdź bezpośrednio do admin/users/).

Więc w zasadzie w rozwiązaniu można umieścić wszystko, a wszystkie stany potomne odziedziczą z tego.

Jeśli chodzi o widoki równoległe, masz pełną kontrolę nad swoimi układami.
@TonyGW „s przykładem jest wielki

Ty może z nich korzystać zarówno w aplikacji w tym samym czasie, Znaczy stany zagnieżdżone i równoległe widoki i można również mieć równoległych zagnieżdżonych widoki. To naprawdę zależy od struktury układu układu.

Jeśli chcesz, aby stany potomne pojawiały się w html stanu nadrzędnego, musisz użyć widoków zagnieżdżonych.