Ui-router angolare: viste nidificate su più viste

Question

ui-router è un'ottima alternativa al router standard di angular; supporta nested states and views e multiple views.

Sono un po 'confuso, però, per la differenza tra i due. Mi sembra che più viste possano quasi sempre essere pensate e implementate come viste nidificate di un componente di "ordine superiore". Ad esempio, se consideriamo un'app con una barra laterale e una casella di contenuto, possiamo modellarli come due viste "parallele" o come rendere la barra laterale la vista principale e il riquadro del contenuto la sua vista secondaria nidificata che dipende dall'elemento della barra laterale selezionato .

Il readme stessa sembra suggerire la divisione non è davvero chiara:

Pro Suggerimento: Mentre più viste parallele sono una caratteristica potente, sarete spesso in grado di gestire le interfacce in modo più efficace nidificazione delle visualizzazioni e associazione di tali viste con stati nidificati.

Quando è necessario utilizzare più viste e le viste nidificate? Esistono alcuni criteri che possono aiutarti a scegliere la maggior parte del tempo che è il modo corretto di modellare gli stati, nidificati o multipli?

Answer 1

Nella mia comprensione, le visualizzazioni multiple sono in primo luogo per il layout scopo, mentre il punto di vista nested sono per genitori-figli viste gerarchiche. Utilizzando il caso citato come esempio:

La barra laterale e il contenuto potrebbe essere organizzato come due viste distinte:

$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' 
     } 
     } 
}); 

Il modello path/to/the/main/frame/template.html può contenere telaio seguente:

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

Poi nella sideBar o nei modelli di contenuto, è possibile nidificare i propri figli subview/partial.

Answer 2

Gli stati nidificati possono essere utilizzati con viste nidificate e parallele.

Solo per notare qualcosa sugli stati nidificati .

Ciò che rende nidificato lo stato è che è possibile condividere/ereditare facilmente i dati dalla visualizzazione padre a figlio.

es.

Diciamo che avere alcune pagine che richiedono un utente si è connesso

$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(); 
}  

Ora ogni Stato che è uno stato figlio di amministratore deve passare authenticate servizio (anche se si navigare direttamente a admin/users/).

Quindi sostanzialmente nella risoluzione è possibile inserire qualsiasi cosa e tutti gli stati figlio erediteranno da quello.

Come per le viste parallele si ha il controllo completo sui layout.
@TonyGW s' esempio è grande

È può usarli entrambi nella vostra applicazione, allo stesso tempo, voglio dire stati annidati e viste parallele e si può anche avere parallele viste nidificate. Dipende davvero dalla struttura del layout del tuo layout.

Se si desidera che gli stati figlio compaiano all'interno dello html dello stato padre, è necessario utilizzare viste nidificate.