Perché dare un “astratto: vero” stato un url?

Oggi mi sto cullando con l’ui-router per cercare di capire meglio l’impalcatura di Ionic e una cosa che ho notato è che danno l’abstract di “tabs” come 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:

Imansible passare allo stato astratto ‘[insertAbstractStateHere]’

modificare:

“Inoltre, nello sperimentare, quando provo ad assegnare un URL al mio stato astratto (al di fuori di Ionic) e continuo a visualizzare lo stato nidificato, ottengo un grosso uovo d’oca.

la dichiarazione sopra citata è falsa! L’ho provato di nuovo in Plunker e gli stati nidificati si sono presentati.

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

Apparentemente stavo davvero sbagliando. Quindi la mia nuova domanda è:

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

Il motivo per cui utilizzi uno stato astratto è di mantenere la tua definizione a secco quando hai una parte del tuo URL non navigabile. Ad esempio, supponi di avere uno schema di URL come il seguente:

 /home/index /home/contact 

Tuttavia, per qualsiasi motivo nel tuo progetto, questo URL non è valido (vale a dire senza scopo per una pagina):

 /home 

Ora potresti semplicemente creare due stati per questa situazione, con gli url completi, ma poi scrivere /home/ due volte e la descrizione è un po ‘più complicata. L’idea migliore è invece quella di creare un genitore astratto di casa di cui gli altri due stati siano figli (per i documenti del router-uu):

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

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


A volte potresti notare l’uso di uno stato astratto con un URL vuoto. L’uso migliore di questa configurazione è quando hai bisogno di una resolve genitoriale. 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).

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

Usa lo stato astratto, abilita anche il router ui per fare la navigazione senza ricaricare il controller / pagina.