web-dev-qa-db-fra.com

Angular ui-router: Pouvez-vous changer d'état sans changer d'URL?

La fonctionnalité plusieurs vues imbriquées du ui-router est très agréable: vous pouvez facilement passer d'un state de votre application à un autre.

Parfois, vous voudrez peut-être changer l'URL, mais parfois pas. Je pense que le concept de state devrait être séparé/optionnel de routing.

Voici un plunker qui montre ce que je veux dire. Ceci est un fork de l'un des plunkers dans la documentation ui-router, avec 2 modifications mineures notées ci-dessous:

.state('route1', {
        url: "/route", // <---- URL IS SHARED WITH ROUTE2
        views: {
            "viewA": {
                template: "route1.viewA"
            },
            "viewB": {
                template: "route1.viewB"
            }
        }
    })
    .state('route2', {
        url: "/route", // <---- URL IS SHARED WITH ROUTE1
        views: {
            "viewA": {
                template: "route2.viewA"
            },
            "viewB": {
                template: "route2.viewB"
            }
        }
    })

Cela semble fonctionner - l'URL reste la même. Encore une fois, combien de travail redondant est fait ici? Est-ce une utilisation approuvée/testée?

Ce serait bien si vous pouviez omettre la url d'un état ..

UPDATE: Vous pouvez omettre une URL d'un état. plunker

Question de mise à jour: Est-ce une utilisation approuvée/testée?

javascriptangularjsangular-uiangular-ui-router
29
Michael Lewis

Vous pouvez absolument avoir un état sans URL. En fait, aucun de vos états n'a besoin d'URL. C'est une partie essentielle de la conception. Cela dit, je ne ferais pas ce que vous avez fait ci-dessus.

Si vous voulez que deux états aient la même URL, créez un abstract parent state , affectez-lui une URL et faites-en des enfants (sans URL pour l'un ou l'autre).

41
Nate Abele

Pour ajouter à l'autre réponse, plusieurs vues nommées n'utilisent pas d'URL. 

De la docs:

Si vous définissez un objet de vues, templateUrl, template et .__ de votre état. templateProvider sera ignoré. Donc, dans le cas où vous avez besoin d'un parent de ces vues, vous pouvez définir un état abstrait tel que contient un modèle et un état enfant sous la mise en forme que contient l'objet 'vues'.

La raison d'utiliser des vues nommées est que vous pouvez avoir plus d'une vue ui par modèle ou, en d'autres termes, plusieurs vues dans un même état. De cette façon, vous pouvez modifier les parties de votre site à l'aide de votre routage même si l'URL ne change pas et vous pouvez également réutiliser des données dans différents modèles car il s'agit d'un composant Avec ses propres contrôleur et vue. 

Voir Routage angulaire avec ui-router pour une explication détaillée avec des exemples.

0
James Drinkard