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 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é?

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:

• Github: https://github.com/angular-ui/ui-router
• Documentation:
  • Référence API: http://angular-ui.github.io/ui-router/site/#/api
  • Guide: https://github.com/angular-ui/ui-router/wiki
• FAQ: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions
• Exemple d'application: http://angular-ui.github.io/ui-router/sample/#/

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.

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/

ngRoute fait partie du cadre principal d'AngularJS.

ui-router est une bibliothèque communautaire qui a été 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

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.

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.

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

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.

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.

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.

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 ....

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

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.

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.

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.