web-dev-qa-db-fra.com

Quelle est la différence entre angular-route et angular-ui-router?

Je prévois d'utiliser AngularJS dans mes grandes applications. Je suis donc en train de trouver les bons modules à utiliser.

Quelle est la différence entre les modules ngRoute (angular-route.js) et i-router (angular-ui-router.js)?

Dans de nombreux articles, lorsque ngRoute est utilisé, route est configurée avec $ routeProvider . Cependant, lorsqu'il est utilisé avec ui-router , route est configuré avec $ stateProvider et $ urlRouterProvider .

Quel module devrais-je utiliser pour améliorer la facilité de gestion et l'extensibilité?

javascriptangularjsangularjs-routingangular-ui-routerangularjs-module
1059
Premchandra Singh

i-router est un module tiers très puissant. Il supporte tout ce que le ngRoute normal peut faire, ainsi que de nombreuses fonctions supplémentaires.

Voici quelques raisons courantes pour lesquelles ui-router est choisi sur ngRoute:

  • ui-router autorise vues imbriquées et plusieurs vues nommées . Ceci est très utile avec une application plus grande où vous pouvez avoir des pages qui héritent d'autres sections.

  • ui-router vous permet d'avoir une liaison de type fort entre états basée sur des noms d'états. Changer l'URL dans un endroit mettra à jour chaque lien vers cet état lorsque vous construirez vos liens avec ui-sref . Très utile pour les projets plus importants où les URL peuvent changer.

  • Il existe également le concept de décorateur qui pourrait être utilisé pour permettre à vos itinéraires d'être créés de manière dynamique en fonction de l'URL à laquelle vous souhaitez accéder. Cela pourrait signifier que vous n'aurez pas besoin de spécifier tous vos itinéraires à l'avance.

  • states vous permet de mapper et d'accéder à différentes informations sur différents états et vous pouvez facilement transmettre des informations entre états via $stateParams .

  • Vous pouvez facilement déterminer si vous êtes dans un état ou parent d'un état pour ajuster l'élément d'interface utilisateur (mettant en surbrillance la navigation de l'état actuel) dans vos modèles via $state fourni par le routeur ui qui vous pouvez exposer en le configurant dans _$rootScope_ sur run.

En gros, ui-router est ngRouter avec plus de fonctionnalités, sous les feuilles, il est assez différent. Ces fonctionnalités supplémentaires sont très utiles pour les grandes applications.

Plus d'information:

1100
TheSharpieOne

ngRoute est un module développé par l'équipe AngularJS qui faisait auparavant partie du noyau AngularJS.

ui-router est un framework créé en dehors du projet AngularJS pour améliorer les capacités de routage.

Depuis le routeur ui documentation :

AngularUI Router est un framework de routage pour AngularJS, qui vous permet d’organiser les parties de votre interface dans une machine à états. Contrairement au service $ route de Angular core, organisé autour des routes d'URL, UI-Router est organisé en états, qui peuvent éventuellement avoir des routes, ainsi que d'autres comportements, liés.

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

Ni l'un ni l'autre n'est meilleur, vous devrez choisir le plus approprié à votre projet.

Toutefois, si vous envisagez d’avoir des vues complexes dans votre application et que vous souhaitez traiter de la notion de "$ état". Je vous recommande de choisir ui-router.

128
gab

ngRoute est un module de base angular qui convient aux scénarios de base. Je crois qu'ils vont ajouter des fonctionnalités plus puissantes dans les prochaines versions.

URL: https://docs.angularjs.org/api/ngRoute

Ui-router est un module contribuant à résoudre les problèmes de ngRoute. Principalement vues imbriquées/complexes.

URL: https://github.com/angular-ui/ui-router

Une partie de la différence entre ui-router et ngRoute

http://www.amasik.com/angularjs-ngroute-vs-ui-router/

enter image description here

69
Asik

ngRoute fait partie du cadre principal d’AngularJS.

ui-router est une bibliothèque communautaire créée pour tenter d'améliorer les capacités de routage par défaut.

Voici un bon article sur la configuration/configuration de ui-router:

http://www.ng-newsletter.com/posts/angular-ui-router.html

50
Jake Johnson

Si vous souhaitez utiliser les fonctionnalités de vues imbriquées implémentées dans le paradigme ngRoute, essayez angular-route-segment - il s'agit d'étendre ngRoute plutôt que de le remplacer.

34
artch

angulaire 1.x

ng-route :

ng-route est développé par l’équipe angularJS pour le routage.

ng-route: routage basé sur url (emplacement).

Ex:

$routeProvider
    .when("/home", {
        templateUrl : "home.html"
    })

i-route :

ui-router est développé par un module tiers.

ui-router: routage basé sur l'état

Ex:

 $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'home.html'
        })

-> ui-router permet des vues imbriquées

-> ui-router plus puissant que ng-route

ng-router , i-router

18
Mahesh K

Généralement, ui-router fonctionne sur un mécanisme d'état ... Il peut être compris avec un exemple simple:

Disons que nous avons une grande application d'une bibliothèque de musique (comme ..gaana ou saavan ou tout autre). Et au bas de la page, vous avez un lecteur de musique partagé entre tous les états de la page.

Maintenant, disons que vous cliquez simplement sur certaines chansons à jouer. Dans ce cas, seul cet état du lecteur de musique doit changer au lieu de recharger la page complète. Cela peut être facilement géré par ui-router.

Dans ngRoute, nous attachons simplement la vue et le contrôleur.

18
UniCoder

ngRoute est un module construit par l'équipe Angular qui fournit une fonctionnalité de base de routage côté client. Ce module fournit une base assez puissante pour le routage, et peut être construit assez facilement pour donner une fonctionnalité de routage solide, comme illustré dans cet article de blog (assurez-vous de lire la piste de commentaires entre Ward Bell et Ben Nadel , l’auteur - c’est un couple de Angular pros)

ui-router déplace l'attention des routes centrées sur l'URL sur les "états" d'application, qui peuvent ou non être reflétés dans l'URL.

Les principales fonctionnalités ajoutées par ui-router sont des états imbriqués et des vues nommées.

Les états imbriqués vous permettent de séparer la logique du contrôleur pour les différentes parties de l'application. Un exemple très simple de ceci serait une application avec une navigation principale en haut, une liste de navigation secondaire à gauche et un contenu à droite. Sans états imbriqués, un seul contrôleur devrait généralement gérer la logique d'affichage pour la navigation secondaire ainsi que le contenu. Le routage imbriqué vous permet de séparer ces préoccupations.

Les vues nommées sont une autre caractéristique supplémentaire de ui-router. Avec ngRoute, vous ne pouvez avoir qu'une seule directive ngView sur une page, tandis qu'avec les vues nommées dans ui-router, vous pouvez spécifier plusieurs directives ui-view, chaque état pouvant ensuite affecter le modèle et le contrôleur des vues de noms. Un exemple très simple de cela serait d'avoir le contenu principal de votre application comme vue principale, puis d'avoir également une barre de pied de page qui constituerait une vue ui distincte. Dans ce scénario, le contrôleur du pied de page n'a plus besoin d'écouter les changements d'état/de route.

Une bonne comparaison de ngRoute et ui-router est disponible sur ce podcast épisode.

Juste pour rendre les choses plus confuses, gardez un œil sur le nouveau module de routage "officiel" que l'équipe Angular attend pour les versions 1.5 et 2.0 d'Angular. Cela remplacera le module ngRoute. Ici est la documentation actuelle du nouveau module Routeur. Elle est assez rare au moment de cette publication car la mise en œuvre n’a pas encore été finalisée. Regardez ici pour plus d’informations sur la date de publication de ce module.

13
Sean

ngRoute est une bibliothèque de routage de base, dans laquelle vous pouvez spécifier une vue et un contrôleur pour chaque route.

Avec ui-router, vous pouvez spécifier plusieurs vues, à la fois parallèles et imbriquées. Donc, si votre application nécessite (ou pourrait nécessiter à l'avenir) tout type de routage/vues complexes, poursuivez avec ui-router.

This est le meilleur guide de démarrage pour AngularUI Router.

11
Kunal Kapadia

Ce que vous devez savoir de base: ng-router utilise $location.path() et ui-router utilise $state.go

Reste nous toutes les fonctionnalités.

10
digish a d

routeur ui vous rendre la vie plus facile! Vous pouvez l'ajouter à votre application AngularJS en l'injectant dans vos applications ...

ng-route fait partie du noyau AngularJS, donc c'est plus simple et moins d'options ...

Regardez ici pour mieux comprendre ng-route: https://docs.angularjs.org/api/ngRoute

Aussi, lorsque vous l'utilisez, n'oubliez pas d'utiliser: ngView ..

ng-ui-router est différent mais:

https://github.com/angular-ui/ui-router mais vous donne plus d'options ....

8
Alireza

AngularUI Router est un framework de routage pour AngularJS, qui vous permet d’organiser les parties de votre interface dans une machine à états. Contrairement au service $ route du module Angular ngRoute, organisé autour des routes d'URL, UI-Router est organisé autour d'états, qui peuvent éventuellement avoir des routes, ainsi que d'autres comportements, attachés.

https://github.com/angular-ui/ui-router

6
vaheeds

ngRoute est un module développé par l'équipe Angular.js qui faisait auparavant partie du noyau Angular.

ui-router est un framework créé en dehors du projet Angular.js pour améliorer les capacités de routage.

4
Rajat-Systematix

1- ngRoute est développé par angular team alors que ui-router est un module tiers. 2- ngRoute implémente le routage en fonction de l'URL de la route tandis que ui-router implémente le routage en fonction de l'état de l'application. 3- ui-router fournit tout ce que la route ng fournit, ainsi que des fonctionnalités supplémentaires telles que les états imbriqués et les vues nommées multiples.

3
user2136053

ng-View (développé par l'équipe AngularJS) ne peut être utilisé qu'une fois par page, alors que ui-View (module tiers) peut être utilisé plusieurs fois par page.

ui-View est donc la meilleure option.

0
Ragupathy