Routing URL per stati nidificati in ui-router

Question

Così sto usando l'UI-Router per costruire la mia app AngularJS. Tuttavia sono confuso su come funziona il routing dell'URL in caso di stati nidificati principalmente a causa delle idee contrastanti (come da mia comprensione) fornite nel wiki per UI-Router.

La prima idea

Quindi forse stato astratto è utilizzato sotto

La seconda idea

Come indicato nella documentazione (prima idea), l'url dello stato genitore è preposto a quello dei suoi figli solo in caso di 'astratto': la proprietà vera definita sullo stato genitore.

Tuttavia, la documentazione (seconda idea) indica anche quanto sopra è una funzione predefinita.

Le due idee sopra non sono in conflitto per lo stesso concetto? O li ho completamente fraintesi?

Answer 1

Bene, le dichiarazioni della documentazione sono corrette. Forse non chiaro per qualcuno - ma corretto. Dice semplicemente:

1) Nessuna ereditarietà di url: "..url..."impostazione. Significa che lo stato figlio non ha il url impostato con lo stesso valore del genitore. Entrambi i valori sono indipendenti.

2) Esiste una concatenazione url implicita. Stato figlio url(nella barra degli indirizzi, non nell'impostazione) è costruito da tutti i suoi antenati url.

Quindi, la documentazione è corretta. Questa riproduzione example is just for ... mostra ciò che sappiamo. Bambino ha diverso urlimpostazione quindi padre. Stato Bambino url nella barra degli indirizzi è costruire da suo urlimpostazione - prefisso con i genitori (s) URL

// NON abstract 
    .state('parent1', { 
     abstract: false, 
     url: "/parent1", 
     templateUrl: 'tpl.html', 
    }) 
    .state('parent1.child1', { 
     url: "/child1", 
     templateUrl: 'tpl.html', 
    }) 
// abstract 
    .state('parent2', { 
     abstract: true, 
     url: "/parent2", 
     templateUrl: 'tpl.html', 
    }) 
    .state('parent2.child2', { 
     url: "/child2", 
     templateUrl: 'tpl.html', 
    }) 

url in href:

non abstract 
<a href="#/parent1"> 
<a href="#/parent1/child1"> 
abstract 
<a href="#/parent2"> - cannot navigate there - is abstract 
<a href="#/parent2/child2"> 

Answer 2

Stanno cercando di mostrare il concetto solo in questo documento, quindi non aspettatevi un vero esempio qui.

Questo è un concetto comune per il router ui.

Comportamento dello stato astratto.

1) Non è possibile chiamare astratto stato direttamente, per cui qui non possiamo chiamare stato di contatti direttamente

/contsacts questo reindirizzamento al nostro stato di default

2) Estratto lo stato dovrebbe avere sempre almeno uno stato figlio. Così possiamo chiamare qui

/contatto/lista come stato contacts.list modello

3) dello stato genitore deve avere

<div ui-view></div> 

direttiva in cui lo stato del bambino si propaga.