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

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?

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:

• Github: https://github.com/angular-ui/ui-router
• Documentación:
  • Referencia de API: http://angular-ui.github.io/ui-router/site/#/api
  • Guía: https://github.com/angular-ui/ui-router/wiki
• Preguntas frecuentes: https://github.com/angular-ui/ui-router/wiki/Frequency-Asked-Questions
• Aplicación de muestra: http://angular-ui.github.io/ui-router/sample/#/

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.

ngRoute es un módulo de núcleo angular que es bueno para escenarios básicos. Creo que agregarán características más potentes en los próximos lanzamientos.

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

Ui-router es un módulo contribuido que supera los problemas de ngRoute. Vistas principalmente anidadas / complejas.

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

Algunas de las diferencias entre ui-router y ngRoute

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

ngRoute es parte del marco central de AngularJS.

ui-router es una biblioteca comunitaria que se ha creado para intentar mejorar las capacidades de enrutamiento predeterminadas.

Aquí hay un buen artículo sobre cómo configurar / configurar el enrutador ui:

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

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.

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.

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

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.

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.

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

Descansa todas las características.

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

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

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.

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.

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.