Pourquoi donner un "résumé: vrai" une url?

Question

Je bricole avec ui-router aujourd'hui pour essayer de mieux comprendre l'échafaudage dans Ionic et une chose que j'ai remarquée, c'est qu'ils donnent à l'état abstrait des "onglets" une url.

Les seules fois où j'ai utilisé des états abstraits, j'ai utilisé une chaîne vide en tant qu'URL et je me suis rendu compte que si j'essayais accidentellement de naviguer vers un état abstrait (par opposition à l'état enfant), j'obtenais l'erreur suivante:

Impossible de passer à l'état abstrait '[insertAbstractStateHere]'

modifier:

"De plus, lors de l'expérimentation, lorsque j'essaie d'attribuer une URL à mon état abstrait (en dehors de Ionic) tout en restituant les vues de l'état imbriqué, j'obtiens un gros oeuf d'oie. Rien ne s'affiche du tout."

la déclaration citée ci-dessus est fausse! Je l'ai réessayé dans 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 vraiment 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 pour employer des états abstraits, ou s'agit-il simplement d'un choix de style?

Answer 1

La raison pour laquelle vous utiliseriez un état abstrait est de conserver votre définition sec lorsque vous avez une partie de votre URL non navigable. Par exemple, supposons que vous utilisiez un schéma d'URL semblable à celui-ci:

/home/index
/home/contact

Cependant, quelle que soit la raison dans votre conception, cette URL était invalide (c'est-à-dire sans objet pour une page):

/home

Maintenant, vous pouvez simplement créer deux états pour cette situation, avec les URL complètes, mais vous écririez alors /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 à la maison dont les deux autres états sont des enfants (pour les documents 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'
    })

Remarquez qu'à l'intérieur de l'état parent, nous affectons un modèle dont le seul enfant est un ui-view. Cela garantit que les enfants sont rendus (et peut-être la raison pour laquelle le vôtre apparaît 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 certaines données de serveur 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 url vide avec la résolution souhaitée. Cela peut également être utile si vous voulez des contrôleurs hiérarchiques, où le parent n'a aucune utilité pour une vue (vous ne savez pas pourquoi vous voulez cela, mais c'est plausible).