web-dev-qa-db-fra.com

Quelle est la différence entre $ routeProvider et $ stateProvider?

Veuillez expliquer la différence entre $routeProvider et $stateProvider dans AngularJS.

Quelle est la meilleure pratique?

javascriptangularjsangular-ui-routerangularjs-routing
168
YYY

Les deux font le même travail car ils sont utilisés à des fins de routage dans SPA (Single Page Application).

1. Routage angulaire - par $ routeProvider docs

URL vers les contrôleurs et les vues (HTML partiels). Il regarde $ location.url () et tente de mapper le chemin vers un itinéraire existant définition.

HTML 

<div ng-view></div>

L'étiquette ci-dessus rendra le modèle à partir de la condition $routeProvider.when() que vous aviez mentionnée dans .config (phase de configuration) de angular

Limitations: - 

  • La page ne peut contenir qu'un seul ng-view sur la page.
  • Si votre SPA contient plusieurs petits composants sur la page que vous souhaitez restituer en fonction de certaines conditions, $routeProvider échoue. (pour y parvenir, nous devons utiliser des directives telles que ng-include, ng-switch, ng-if, ng-show, ce qui est mal à propos de les avoir dans SPA)
  • Vous ne pouvez pas établir de relation entre deux itinéraires, comme une relation parent-enfant.
  • Vous ne pouvez pas afficher ou masquer une partie de la vue en fonction du modèle d'URL.

2. ui-router - par $ StateProvider Docs

AngularUI Router est un framework de routage pour AngularJS, qui autorise vous organisez les parties de votre interface dans une machine d'état . UI-Router est organisé autour d'états, qui peuvent éventuellement avoir itinéraires, ainsi que d'autres comportements, attachés.

Vues multiples et nommées

Une autre fonctionnalité intéressante est la possibilité d’avoir plusieurs vues ui dans un modèle.

Bien que plusieurs vues parallèles constituent une fonctionnalité puissante, vous serez souvent en mesure de gérer vos interfaces plus efficacement en imbriquant votre views et en associant ces vues à des états imbriqués.

HTML 

<div ui-view>
    <div ui-view='header'></div>
    <div ui-view='content'></div>
    <div ui-view='footer'></div>
</div>

La majorité du pouvoir de ui-router est qu'il peut gérer les états et vues imbriqués.

Avantages

  • Vous pouvez avoir plusieurs ui-view sur une seule page
  • Différentes vues peuvent être imbriquées les unes dans les autres et conservées en définissant l'état en phase de routage.
  • Nous pouvons avoir ici une relation parent-enfant, simplement comme l'héritage en état, vous pouvez également définir des états frères.
  • Vous pouvez changer le ui-view="some" de l'état simplement en utilisant le routage absolu en utilisant @ avec le nom de l'état.
  • Une autre façon de faire un routage relatif consiste à utiliser uniquement @ pour modifier ui-view="some". Cela remplacera le ui-view plutôt que de vérifier s'il est imbriqué ou non.
  • Ici, vous pouvez utiliser ui-sref pour créer une URL href de manière dynamique sur la base de URL mentionnée dans un état. Vous pouvez également définir un paramètre d'état au format json.

Pour plus d'informations, angular ui-router

Pour une meilleure flexibilité avec différentes vues imbriquées avec des états, je préférerais que vous choisissiez ui-router

242
Pankaj Parkar

Le ng-Router d’Angular tient compte de URLs lors du routage, UI-Router prend states en plus des URL.

Les états sont liés à des vues nommées, imbriquées et parallèles, vous permettant de gérer de manière puissante l'interface de votre application.

Lorsque vous êtes dans ng-router, vous devez faire très attention aux URL lorsque vous fournissez des liens via la balise <a href="">. Dans UI-Router, vous ne devez garder à l'esprit que state. Vous fournissez des liens tels que <a ui-sref="">. Notez que même si vous utilisez <a href=""> dans UI-Router, comme vous le feriez dans ng-router, cela fonctionnera toujours. 

Ainsi, même si vous décidez de changer votre URL un jour ou l'autre, votre state restera la même et vous devrez changer d'URL uniquement à .config.

Alors que ngRouter peut être utilisé pour créer des applications simples, UI-Router facilite beaucoup le développement pour les applications complexes. Voici son wiki.

73
Aniket Sinha

$ route: Ceci est utilisé pour les liens profonds vers les contrôleurs et les vues (partiels HTML) et surveille $ location.url () afin de mapper le chemin à partir d'une définition existante de route. 

Lorsque nous utilisons ngRoute, la route est configurée avec $ routeProvider et lorsque nous utilisons ui-router, elle est configurée avec $ stateProvider et $ urlRouterProvider.

<div ng-view></div>
    $routeProvider
        .when('/contact/', {
            templateUrl: 'app/views/core/contact/contact.html',
            controller: 'ContactCtrl'
        });


<div ui-view>
    <div ui-view='abc'></div>
    <div ui-view='abc'></div>
   </div>
    $stateProvider
        .state("contact", {
            url: "/contact/",
            templateUrl: '/app/Aisel/Contact/views/contact.html',
            controller: 'ContactCtrl'
        });
0
mukesh mali