¿Cuál es la diferencia entre angular-route y angular-ui-router?


1080

Estoy planeando usar AngularJS en mis grandes aplicaciones. Así que estoy en el proceso de encontrar los módulos correctos para usar.

¿Cuál es la diferencia entre ngRoute (angular-route.js) y ui-router (angular-ui-router.js) ?

En muchos artículos cuando se usa ngRoute , la ruta se configura con $ routeProvider . Sin embargo, cuando se usa con ui-router , la ruta se configura con $ stateProvider y $ urlRouterProvider .

¿Qué módulo debo usar para una mejor capacidad de administración y extensibilidad?


11
sin mencionar el nuevo enrutador de angular en 1.4+ y 2.0
Zach Lysobey

Respuestas:


1112

ui-router es un módulo de terceros y es muy potente. Admite todo lo que el ngRoute normal puede hacer, así como muchas funciones adicionales.

Aquí hay algunas razones comunes por las que se elige ui-router sobre ngRoute:

  • ui-router permite vistas anidadas y múltiples vistas con nombre . Esto es muy útil con una aplicación más grande donde puede tener páginas que heredan de otras secciones.

  • ui-router le permite tener enlaces de tipo fuerte entre estados basados ​​en nombres de estado. Cambiar la URL en un lugar actualizará cada enlace a ese estado cuando construya sus enlaces ui-sref. Muy útil para proyectos más grandes donde las URL pueden cambiar.

  • También existe el concepto de decorador que podría usarse para permitir que sus rutas se creen dinámicamente en función de la URL a la que se está intentando acceder. Esto podría significar que no necesitará especificar todas sus rutas de antemano.

  • los estados le permiten mapear y acceder a información diferente sobre diferentes estados y puede pasar fácilmente información entre estados a través de $stateParams.

  • Se puede determinar fácilmente si se encuentra en un estado o el padre de un estado para ajustar el elemento de interfaz de usuario (destacando la navegación del estado actual) dentro de sus plantillas a través $stateproporcionada por ui-router que puede exponer a través de colocarlo en $rootScopeel run.

En esencia, ui-router es ngRouter con más funciones, bajo las hojas es bastante diferente. Estas características adicionales son muy útiles para aplicaciones más grandes.

Más información:


134
En general, esta es la mejor explicación, pero para un punto clave: "En general, ui-router es ngRouter con más funciones". Es mucho más fundamental que eso: ngRoutesimplemente le permite asignar controladores y plantillas a las rutas URL, mientras que la abstracción fundamental ui.routeres estados, que es un concepto más poderoso.
Nate Abele

23
Puede ser relevante para algunos señalar la diferencia en el tamaño del archivo en esta respuesta. A partir de ahora ngRoute: 35.9kB / 4.4kB / 2.5kB y ui-router: 162.9kB / 30.4kB / 11.6kB (no minificado / minificado / comprimido).
Alex Ross

35
¿Estamos seriamente preocupados por 162kb en 2015?
Catfish

27
¿Por qué no @Catfish? Hay muchos lugares en el mundo con malas conexiones a Internet, ¡preocúpese es muy importante!
Bruno Casali

44
@tfrascaroli No estoy de acuerdo: si un usuario está cargando su aplicación por primera vez, los tiempos de carga de la página se correlacionan fuertemente con las tasas de rebote . Definitivamente consideraría el costo / beneficio antes de agregar otros 130kB a la página.
Anthony Manning-Franklin

131

ngRoute es un módulo desarrollado por el equipo de AngularJS que anteriormente formaba parte del núcleo de AngularJS.

ui-router es un marco que se realizó fuera del proyecto AngularJS para mejorar y mejorar las capacidades de enrutamiento.

De la documentación del enrutador ui :

AngularUI Router es un marco de enrutamiento para AngularJS, que le permite organizar las partes de su interfaz en una máquina de estado. A diferencia del servicio $ route en Angular core, que está organizado alrededor de rutas URL, UI-Router está organizado alrededor de estados, que opcionalmente pueden tener rutas, así como otros comportamientos, adjuntos.

Los estados están vinculados a vistas con nombre, anidadas y paralelas, lo que le permite administrar de manera eficaz la interfaz de su aplicación.

Ninguno de los dos es mejor, tendrás que elegir el más apropiado para tu proyecto.

Sin embargo, si planea tener vistas complejas en su aplicación y le gustaría tratar con la noción "$ state". Le recomiendo que elija ui-router.


1
FWIW Acabo de pasar bastantes horas golpeándome la cabeza contra ui-router para angularjs. La documentación está en un estado MUY lamentable, claramente se ha dejado en desuso durante años. Enlaces rotos a guías importantes, paquetes nuget mal nombrados en el tutorial, lo que sea. Finalmente me di por vencido después de que no pude resolver este problema stackoverflow.com/questions/23585065/… (junto con muchas otras personas). Probando ngRoute ahora ...
UnionP



35

Si desea hacer uso de la funcionalidad de vistas anidadas implementada dentro del paradigma ngRoute, pruebe el segmento de ruta angular : tiene como objetivo extender ngRoute en lugar de reemplazarlo.


16
No veo la relevancia de su respuesta. El autor preguntó específicamente sobre las diferencias entre angular-route y angular-ui-router. Además, un descargo de responsabilidad de que usted es el creador sería útil al promocionar sus propias bibliotecas.
vially

23
La relevancia es simple: angular-ruta + angular-ruta-segmento = angular-ui-enrutador. Entonces, la diferencia es: angular-ui-router - angular-route = angular-route-segmento :)
artch

1
Creo que es una respuesta válida. angular-route-segment.com es definitivamente una buena opción para aquellos que no quieren la sobrecarga de usar ui-router. También @vialmente, las personas trabajan arduamente para crear estas bibliotecas, no es malo promocionarlas
phil

19

En general, el enrutador ui funciona en un mecanismo de estado ... Se puede entender con un ejemplo sencillo:

Digamos que tenemos una gran aplicación de una biblioteca de música (como ..gaana o saavan o cualquier otra). Y en la parte inferior de la página, tiene un reproductor de música que se comparte en todo el estado de la página.

Ahora digamos que simplemente haces clic en algunas canciones para reproducir. En este caso, solo el estado del reproductor de música debería cambiar en lugar de volver a cargar la página completa. Ui-router puede manejarlo fácilmente.

Mientras que en ngRoute simplemente adjuntamos la vista y el controlador.


2
Esto podría hacerse y debe hacerse utilizando servicios y fábricas. El uso de este paquete es la falta de comprensión de rutas angulares, estados y patrones. La url maneja los estados, lo cual es correcto si desea compartir la aplicación en un estado específico, además puede tener múltiples controladores en la misma vista que reaccionan en una actualización de datos de servicio o parámetro de url. El enrutador ui arruina las cosas y destruye el patrón angular por completo.
Pablo Ezequiel Leone

Estoy completamente de acuerdo. Todavía no puedo encontrar una explicación de dónde es necesario usar esta máquina de estado
kushalvm

18

Angular 1.x

ng-route :

ng-route es desarrollado por el equipo angularJS para el enrutamiento.

ng-route: enrutamiento basado en url (ubicación).

Ex:

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

ui-ruta :

ui-router está desarrollado por un módulo de terceros.

ui-router: enrutamiento basado en estado

Ex:

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

-> ui-router permite vistas anidadas

-> ui-router más potente que ng-route

ng-router , ui-router


13

ngRoute es un módulo creado por el equipo de Angular que proporciona una funcionalidad básica de enrutamiento del lado del cliente. Este módulo proporciona una base bastante poderosa para el enrutamiento, y se puede construir con bastante facilidad para proporcionar una funcionalidad de enrutamiento sólida, como se ejemplifica en esta publicación de blog (asegúrese de leer el rastro de comentarios entre Ward Bell y Ben Nadel, el autor: son un par de profesionales angulares)

ui-router cambia el foco de las rutas centradas en la URL a los "estados" de la aplicación, que pueden reflejarse o no en la URL.

Las características principales agregadas por ui-router son estados anidados y vistas con nombre.

Los estados anidados le permiten separar la lógica del controlador para las distintas partes de la aplicación. Un ejemplo muy simple de esto sería una aplicación con navegación principal en la parte superior, una lista de navegación secundaria a la izquierda y contenido a la derecha. Sin estados anidados, un solo controlador normalmente tendría que manejar la lógica de visualización para la navegación secundaria, así como el contenido. El enrutamiento anidado le permite separar estas preocupaciones.

Las vistas con nombre son otra característica adicional de ui-router. Con ngRoute, solo puede tener una sola directiva ngView en una página, mientras que con vistas con nombre en ui-router puede especificar múltiples directivas ui-view, y luego cada estado puede afectar la plantilla y el controlador de las vistas de nombres. Un ejemplo súper simple de esto sería tener el contenido principal de su aplicación como la vista principal, y luego también tener una barra de pie de página que sería una vista de interfaz de usuario separada. En este escenario, el controlador del pie de página ya no tiene que escuchar los cambios de estado / ruta.

Se puede encontrar una buena comparación de ngRoute y ui-router en este episodio de podcast .

Solo para hacer las cosas más confusas, esté atento al nuevo módulo de enrutamiento "oficial" que el equipo de Angular espera lanzar para las versiones 1.5 y 2.0 de Angular. Esto reemplazará el módulo ngRoute. Aquí está la documentación actual para el nuevo módulo de enrutador: es bastante escasa a partir de esta publicación ya que la implementación aún no se ha finalizado. Mire aquí para obtener más noticias sobre cuándo se lanzará este módulo.


11

ngRoute es una biblioteca de enrutamiento básica, donde puede especificar solo una vista y controlador para cualquier ruta.

Con ui-router, puede especificar múltiples vistas, tanto paralelas como anidadas. Entonces, si su aplicación requiere (o puede requerir en el futuro) cualquier tipo de enrutamiento / vistas complejas, continúe con ui-router.

Esta es la mejor guía de inicio para AngularUI Router.


10

Lo básico que debe saber: usos de ng-router $location.path()y usos de ui-router$state.go

Descansa todas las características.


8

¡el enrutador ui hace tu vida más fácil! Puede agregarlo a su aplicación AngularJS mediante la inyección en sus aplicaciones ...

ng-route viene como parte del núcleo AngularJS, por lo que es más simple y le ofrece menos opciones ...

Mire aquí para comprender mejor ng-route: https://docs.angularjs.org/api/ngRoute

Además, cuando lo use, no olvide usar: ngView ..

ng-ui-router es diferente pero:

https://github.com/angular-ui/ui-router pero te da más opciones ...


6

AngularUI Router es un marco de enrutamiento para AngularJS, que le permite organizar las partes de su interfaz en una máquina de estado. A diferencia del servicio $ route en el módulo Angular ngRoute, que está organizado alrededor de rutas URL, UI-Router está organizado alrededor de estados, que opcionalmente pueden tener rutas, así como otros comportamientos, adjuntos.

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


4

ngRoute es un módulo desarrollado por el equipo de Angular.js que anteriormente formaba parte del núcleo de Angular.

ui-router es un marco que se creó fuera del proyecto Angular.js para mejorar y mejorar las capacidades de enrutamiento.


3

1- ngRoute es desarrollado por un equipo angular, mientras que ui-router es un módulo de terceros. 2- ngRoute implementa el enrutamiento en función de la URL de la ruta, mientras que ui-router implementa el enrutamiento en función del estado de la aplicación. 3- ui-router proporciona todo lo que proporciona la ruta ng más algunas características adicionales como estados anidados y múltiples vistas con nombre.


0

ng-View(desarrollado por el equipo de AngularJS) se puede usar solo una vez por página, mientras que ui-View(módulo de terceros) se puede usar varias veces por página.

ui-View Por lo tanto, es la mejor opción.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.