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


1080

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 ui-router (angular-ui-router.js) ?

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

Quel module dois-je utiliser pour une meilleure gérabilité et extensibilité?


11
sans parler du nouveau routeur angular en 1.4+ et 2.0
Zach Lysobey

Réponses:


1112

ui-router est un module tiers et est très puissant. Il prend en charge tout ce que le ngRoute normal peut faire ainsi que de nombreuses fonctions supplémentaires.

Voici une raison courante pour laquelle ui-router est choisi sur ngRoute:

  • ui-router permet des 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 les états en fonction des noms d'état. Changer l'URL en un seul endroit mettra à jour chaque lien vers cet état lorsque vous créez vos liens avec ui-sref. Très utile pour les grands projets où les URL peuvent changer.

  • Il y a aussi le concept du décorateur qui pourrait être utilisé pour permettre à vos itinéraires d'être créés dynamiquement en fonction de l'URL qui tente d'accéder. Cela pourrait signifier que vous n'aurez pas besoin de spécifier tous vos itinéraires à l'avance.

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

  • Vous pouvez facilement déterminer si vous êtes dans un état ou d'un parent d'un état pour ajuster l' élément interface utilisateur (mettant en évidence la navigation de l'état actuel) dans vos modèles via $statefournies par ui-routeur que vous pouvez exposer via la mise en $rootScopesur run.

En substance, 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 applications plus importantes.

Plus d'information:


134
Dans l'ensemble, c'est la meilleure explication, mais pour un point clé: "Dans l'ensemble, ui-router est ngRouter avec plus de fonctionnalités". C'est beaucoup plus fondamental que cela: ngRoutevous permet simplement d'affecter des contrôleurs et des modèles aux routes URL, tandis que l'abstraction fondamentale dans les ui.routerétats is, qui est un concept plus puissant.
Nate Abele

23
Il pourrait être pertinent pour certains de souligner la différence de taille de fichier dans cette réponse. À l'heure actuelle ngRoute: 35,9 Ko / 4,4 Ko / 2,5 Ko et ui-router: 162,9 Ko / 30,4 Ko / 11,6 Ko (non minifié / minifié / compressé).
Alex Ross

35
Sommes-nous sérieusement inquiets pour 162 Ko en 2015?
Catfish

27
Pourquoi pas @Catfish? Il existe de nombreux endroits dans le monde avec de mauvaises connexions Internet, il est très important de s'en inquiéter!
Bruno Casali

4
@tfrascaroli Je ne suis pas d'accord - si un utilisateur charge votre application pour la première fois, les temps de chargement des pages sont fortement corrélés aux taux de rebond . Je considérerais certainement le rapport coût / avantage avant d'ajouter 130 Ko supplémentaires à la page.
Anthony Manning-Franklin

131

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

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

De la documentation ui-router :

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 dans le noyau angulaire, qui est organisé autour de routes URL, UI-Router est organisé autour d'états, qui peuvent éventuellement avoir des routes, ainsi que d'autres comportements, attachés.

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.

Aucun des deux n'est meilleur, vous devrez choisir le plus approprié pour votre projet.

Cependant, si vous prévoyez d'avoir des vues complexes dans votre application et que vous souhaitez traiter la notion "$ state". Je vous recommande de choisir ui-router.


1
FWIW Je viens de passer quelques heures à me cogner la tête contre ui-router pour angularjs. La documentation est dans une situation TRÈS désolée, elle est clairement laissée à l'abandon depuis des années maintenant. Des liens brisés vers des guides importants, des paquets de pépites mal nommés dans le tutoriel, vous l'appelez. Finalement, j'ai abandonné après que je n'ai pas pu comprendre ce problème stackoverflow.com/questions/23585065/… (avec apparemment beaucoup d'autres personnes). Essayer ngRoute maintenant ...
UnionP

71

ngRoute est un module de base angulaire qui convient aux scénarios de base. Je pense qu'ils ajouteront des fonctionnalités plus puissantes dans les prochaines versions.

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

Ui-router est un module contribué qui surmonte les problèmes de ngRoute. Vues principalement 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/

entrez la description de l'image ici



35

Si vous souhaitez utiliser la fonctionnalité de vues imbriquées implémentée dans le paradigme ngRoute, essayez le segment de route angulaire - il vise à étendre ngRoute plutôt qu'à le remplacer.


16
Je ne vois pas la pertinence de votre réponse. L'auteur a posé des questions spécifiques sur les différences entre angular-route et angular-ui-router. De plus, un avertissement que vous êtes le créateur serait utile lors de la promotion de vos propres bibliothèques.
vially

23
La pertinence est simple: angular-route + angular-route-segment = angular-ui-router. Donc, la différence est la suivante: angular-ui-router - angular-route = angular-route-segment :)
artch

1
je pense que c'est une réponse valable. angular-route-segment.com est définitivement un bon choix pour ceux qui ne veulent pas les frais d'utilisation de ui-router. Aussi @vially, les gens travaillent dur pour créer ces bibliothèques, ce n'est pas une mauvaise chose de les promouvoir
phil

19

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

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

Supposons maintenant que vous cliquiez sur certaines chansons pour les lire. Dans ce cas, seul l'état du lecteur de musique devrait changer au lieu de recharger la page entière. Cela peut être facilement géré par ui-router.

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


2
cela pourrait être fait et doit être fait en utilisant des services et des usines. L'utilisation de ce package est un manque de compréhension des routes angulaires, des états et des modèles. Les états sont gérés par l'URL, ce qui est correct si vous souhaitez partager l'application dans un état spécifique, de plus, vous pouvez avoir plusieurs contrôleurs dans la même vue qui réagissent à une mise à jour des données de service ou à un paramètre d'URL. routeur ui gâcher les choses et détruire complètement le modèle angulaire.
Pablo Ezequiel Leone

Je suis complètement d'accord. Je ne trouve toujours pas d'explication où il est nécessaire d'utiliser cette machine d'état
kushalvm

18

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"
    })

ui-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 , ui-router


13

ngRoute est un module construit par l'équipe Angular qui fournit une fonctionnalité de routage côté client de base. 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 - ils sont un couple de pros angulaires)

ui-router déplace le focus des routes centrées sur l'URL vers 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 les états imbriqués et les 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 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 de la navigation secondaire ainsi que le contenu. Le routage imbriqué vous permet de séparer ces problèmes.

Les vues nommées sont une autre fonctionnalité 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, puis chaque état peut 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 serait une vue d'interface utilisateur distincte. Dans ce scénario, le contrôleur du pied de page n'a plus à écouter les changements d'état / de route.

Une bonne comparaison de ngRoute et ui-router peut être trouvée sur cet épisode de podcast .

Juste pour rendre les choses plus confuses, gardez un œil sur le nouveau module de routage "officiel" que l'équipe Angular prévoit de publier pour les versions 1.5 et 2.0 d'Angular. Cela remplacera le module ngRoute. Voici la documentation actuelle du nouveau module Router - elle est assez rare à partir de cette publication car l'implémentation n'a pas encore été finalisée. Regardez ici pour plus d'informations sur la date de sortie de ce module.


11

ngRoute est une bibliothèque de routage de base, où vous pouvez spécifier une seule vue et un seul contrôleur pour n'importe quelle route.

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

C'est le meilleur guide de démarrage pour le routeur AngularUI.


10

Chose fondamentale que vous devez savoir: utilisations du routeur ng $location.path()et utilisations du routeur ui$state.go

Reposez-nous toutes les fonctionnalités.


8

le routeur ui vous facilite la vie! 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 vous donne moins d'options ...

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

Aussi, lors de son utilisation, 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 ....


6

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 dans le module Angular ngRoute, qui est organisé autour de routes 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


4

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

ui-router est un framework qui a été réalisé en dehors du projet Angular.js pour améliorer et améliorer les capacités de routage.


3

1- ngRoute est développé par l'équipe angulaire alors que ui-router est un module tiers. 2- ngRoute implémente le routage basé sur l'URL de l'itinéraire tandis que ui-router implémente le routage basé sur l'état de l'application. 3- ui-router fournit tout ce que le ng-route fournit ainsi que des fonctionnalités supplémentaires comme des états imbriqués et plusieurs vues nommées.


0

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

ui-View est donc la meilleure option.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.