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

Veuillez expliquer la différence entre $routeProvideret $stateProviderdans AngularJS.

Quelle est la meilleure pratique?

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 documentation $ routeProvider

URL vers les contrôleurs et les vues (partiels HTML). Il regarde $ location.url () et essaie de mapper le chemin vers une définition d'itinéraire existante.

HTML

<div ng-view></div>

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

Limites:-

• La page ne peut contenir qu'une seule ng-viewpage
• Si votre SPA a plusieurs petits composants sur la page que vous vouliez rendre en fonction de certaines conditions, $routeProvideréchoue. (pour y parvenir, nous avons besoin d'utiliser des directives comme ng-include, ng-switch, ng-if, ng-show, ce qui semble mal à les avoir en SPA)
• Vous ne pouvez pas établir de relation entre deux itinéraires comme la relation parent et enfant.
• Vous ne pouvez pas afficher et masquer une partie de la vue en fonction du modèle d'URL.

2. ui-router - par documentation $ stateProvider

AngularUI Router est un framework de routage pour AngularJS, qui vous permet d'organiser les parties de votre interface dans une machine à états. UI-Router est organisé autour d'états, qui peuvent éventuellement avoir des routes, ainsi que d'autres comportements, attachés.

Vues multiples et nommées

Une autre fonctionnalité intéressante est la possibilité d'avoir plusieurs vues d'interface utilisateur dans un modèle.

Bien que plusieurs vues parallèles soient une fonctionnalité puissante, vous pourrez souvent gérer vos interfaces plus efficacement en imbriquant vos 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é de son ui-routerpouvoir est de gérer des états et des vues imbriqués.

Avantages

• Vous pouvez en avoir plusieurs ui-viewsur une seule page
• Différentes vues peuvent être imbriquées les unes dans les autres et conservées en définissant l'état dans la phase de routage.
• Nous pouvons avoir une relation enfant et parent ici, tout comme l'héritage dans l'état, vous pouvez également définir des états frères.
• Vous pouvez changer l' ui-view="some"état de simplement en utilisant le routage absolu en utilisant @with state name.
• Une autre façon d'effectuer un routage relatif consiste à n'utiliser que @pour changer ui-view="some". Cela remplacera le ui-viewplutôt que de vérifier s'il est imbriqué ou non.
• Ici, vous pouvez utiliser ui-srefpour créer une hrefURL dynamiquement sur la base de URLmentionné dans un état, vous pouvez également donner des paramètres d'état dans le jsonformat.

Pour plus d'informations ui-router angulaire

Pour une meilleure flexibilité avec diverses vues imbriquées avec des états, je préférerais que vous optiez pour ui-router

Le propre ng-Router d'Angular prend URLsen compte lors du routage, UI-Router prend statesen plus les URL.

Les états sont liés à des vues nommées, imbriquées et parallèles, ce qui vous permet de gérer puissamment l'interface de votre application.

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

Ainsi, même si vous décidez de changer votre URL un jour, votre staterestera le même et vous n'aurez besoin de changer d'URL qu'à partir de .config.

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

$ route: Ceci est utilisé pour les URL de liens profonds vers les contrôleurs et les vues (partiels HTML) et regarde $ 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, la route 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'
        });