Pourquoi donner un url à un état "abstrait: vrai"?


58

Je me débrouille aujourd'hui avec ui-router pour essayer de mieux comprendre l'échafaudage dans Ionic et une chose que j'ai remarquée, c'est qu'ils donnent une url à l'état abstrait des "tabs". Les seules fois où j'ai utilisé des états abstraits, j'ai utilisé une chaîne vide comme URL et j'ai remarqué que si jamais je tentais accidentellement de naviguer vers un état abstrait (par opposition à l'état enfant), j'obtiens l'erreur:

Cannot transition to abstract state '[insertAbstractStateHere]'

modifier:

« de plus, à expérimenter, lorsque je tente d'attribuer une URL à mon état abstrait (en dehors de ionique) et rendent encore les vues d'état imbriqués, je reçois un gros oie, rien du tout.

l'instruction citée ci-dessus est fausse! Je l'ai essayé à nouveau en Plunker et les états imbriqués sont apparus.

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

Apparemment, je le faisais mal. Donc, ma nouvelle question est:

Y a-t-il une raison pour laquelle on utiliserait un état nommé par opposition à une chaîne vide en employant des états abstraits, ou est-ce juste un choix de style?

86

La raison pour laquelle vous utiliseriez un état abstrait est de conserver votre définition lorsque vous avez une partie de votre URL non navigable. Par exemple, dire que vous aviez un schéma d'URL comme ce qui suit:

/home/index 
/home/contact 

Cependant, pour une raison quelconque dans votre conception, cette URL est invalide (pas de fin pour une page):

/home 

Maintenant, vous pouvez simplement créer deux états pour cette situation, avec les URL complètes, mais alors vous écrivez /home/ deux fois, et la description est un peu plus compliquée. La meilleure idée est plutôt de créer un parent abstrait maison dont les deux autres Etats sont des enfants (pour docs ui-routeur):

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

remarqué seulement que dans l'état parent, nous attribuons un modèle dont le seul enfant est un ui-view. Cela garantit que les enfants sont rendus (et peut-être pourquoi le vôtre semble vide). Parfois, vous remarquerez peut-être l'utilisation d'un état abstrait avec une URL vide. La meilleure utilisation de cette configuration est lorsque vous avez besoin d'un parent resolve. Par exemple, vous pouvez avoir besoin de données de serveur particulières pour un sous-ensemble de vos états. Ainsi, au lieu de mettre la même fonction de résolution dans chacun de vos états, vous pouvez créer un parent d'URL vide avec la résolution désirée. Cela peut aussi être utile si vous voulez des contrôleurs hiérarchiques, où le parent n'a aucune utilité pour une vue (je ne sais pas pourquoi vous voudriez cela, mais c'est plausible).

  0

Merci, Matt. Avez-vous déjà utilisé une chaîne vide où vous avez ''/home''? C'est plus la source de ma confusion, à ce stade.Pourquoi faire l'un par opposition à l'autre? Cela ne semble pas faire la différence. 17 oct.. 152015-10-17 01:36:54

  0

Ajouté info supplémentaire pour vous :) 17 oct.. 152015-10-17 02:12:05

+4

génial. * high five * 17 oct.. 152015-10-17 02:20:41

  0

@MattWay pouvez-vous également définir l'état .otherwise à l'état abstrait? Ou ce n'est pas recommandé. 06 mars. 162016-03-06 18:59:49

  0

Bonjour, merci pour l'explication! Dans un didacticiel, j'ai vu un champ 'parent: '<state name>'' dans les options d'état enfant, pourquoi est-il absent ici, est-ce que ui-router peut mapper la relation des noms d'état en utilisant le point comme séparateur? Désolé, je viens de commencer à apprendre/utiliser ui-routeur. 30 mai. 162016-05-30 15:17:52

  0

Silly moi, la réponse est à peine sur le [front] (https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views), oui il est capable d'utiliser séparateur de points pour établir la hiérarchie des états 30 mai. 162016-05-30 15:27:48


-5

Utilisez l'état abstrait, activez également le routeur ui pour effectuer la navigation sans recharger le contrôleur/la page.


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