Perché fornire un "abstract: true" indica un URL?

Question

Oggi sto girando intorno con l'interfaccia utente per cercare di capire meglio l'impalcatura in Ionic e una cosa che ho notato è che danno lo stato astratto di "schede" un url.

Le uniche volte in cui ho mai usato stati astratti, ho usato una stringa vuota come URL e ho notato che se ho mai tentato accidentalmente di navigare verso uno stato astratto (al contrario dello stato figlio), ottengo l'errore:

Cannot transition to abstract state '[insertAbstractStateHere]'

edit:

"Inoltre, nella sperimentazione, quando cerco di assegnare un URL al mio stato astratto (al di fuori di ionica) e ancora rendere la vista statali annidati, ottengo un grande uovo d'oca, niente si vede affatto. "

la dichiarazione sopra citata è falsa! Ho provato di nuovo in Plunker e gli stati nidificati si sono mostrati.

angular.module('routingExperiments', ['ui.router']) 
     .config(function($urlRouterProvider, $stateProvider) { 

    $stateProvider 

     .state('abstractExperiment', { 
     abstract: true, 
     url: '', //<--- seems as if any string can go here. 
     templateUrl: 'abstractExperiment.html' 
     }) 
     .state('abstractExperiment.test1', { 
     url: '/test1', 
     templateUrl: 'abstractTest1.html' 
     }); 
    }); 

A quanto pare stavo davvero sbagliando. Quindi la mia nuova domanda è:

C'è qualche ragione per cui si dovrebbe usare uno stato chiamato in contrapposizione a una stringa vuota nell'impiego di stati astratti, o è solo una scelta di stile?

Answer 1

La ragione per cui si utilizza uno stato astratto è mantenere la definizione asciutta quando si ha una parte del proprio URL non navigabile. Ad esempio, dire che hai avuto uno schema URL simile al seguente:

/home/index 
/home/contact 

Tuttavia, per qualsiasi motivo nel vostro disegno, questo URL non era valido (cioè senza scopo per una pagina):

/home 

Ora potresti semplicemente creare due stati per questa situazione, con gli url completi, ma poi scriverei /home/ due volte e la descrizione è un po 'più complicata. L'idea migliore, invece è quella di creare un genitore casa astratta di cui gli altri due stati sono i bambini (per i documenti ui-router):

$stateProvider 
    .state('parent', { 
     url: '/home', 
     abstract: true, 
     template: '<ui-view/>' 
    }) 
    .state('parent.index', { 
     url: '/index', 
     templateUrl: 'index.html' 
    }) 
    .state('parent.contact', { 
     url: '/contact', 
     templateUrl: 'contact.html' 
    }) 

Basta notare che all'interno dello Stato genitore, si assegna un modello il cui unico figlio è a ui-view. Questo assicura che i bambini siano resi (e potrebbe essere il motivo per cui il tuo appare in bianco).

---

A volte si potrebbe notare l'uso di uno stato astratto con un URL vuoto. Il miglior utilizzo di questa configurazione è quando hai bisogno di un genitore resolve. Ad esempio, potresti richiedere alcuni particolari dati del server per un sottoinsieme dei tuoi stati. Quindi, invece di mettere la stessa funzione di risoluzione in ciascuno dei tuoi stati, potresti creare un genitore url vuoto con la risoluzione desiderata. Potrebbe anche essere utile se si vogliono controllori gerarchici, in cui il genitore non ha alcuna utilità per una vista (non è sicuro del perché lo si vorrebbe, ma è plausibile).

Answer 2

Utilizzare lo stato astratto, inoltre abilitare il router ui per la navigazione senza ricaricare il controller/pagina.

Answer 3

.state('home', { 
     url: '/home', 
     abstract:true,       
     controller: "HomeController", 
     templateUrl:"path to your html"      
}) 
.state('home.list', { 
     url:"", 
     controller: "HomelistController", 
     templateUrl:"path to your html" 
})