Pregunta ¿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 para encontrar los módulos correctos para usar.

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

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

¿Qué módulo debería usar para una mejor manejabilidad y extensibilidad?


1005
2018-01-09 15:03


origen


Respuestas:


ui-enrutador es un módulo de terceros y es muy poderoso. Es compatible con todo lo que el ngRoute normal puede hacer, así como muchas funciones adicionales.

Estas son algunas de las razones más comunes por las cuales se elige ui-router sobre ngRoute:

  • ui-router permite vistas anidadas y múltiples vistas nombradas. 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 vínculos de tipo fuerte entre los estados en función de los nombres de los estados. Cambiar la URL en un lugar actualizará cada enlace a ese estado cuando construya sus enlaces con ui-sref. Muy útil para proyectos más grandes donde las URL pueden cambiar.

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

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

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

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

Más información:


1080
2018-01-09 15:24



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

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

Desde el ui-enrutador documentación:

AngularUI Router es un marco de enrutamiento para AngularJS, que permite   usted para organizar las partes de su interfaz en una máquina de estado.   A diferencia del servicio $ route en el núcleo angular, que se organiza en torno a   Rutas de URL, UI-Router está organizado en torno a estados, que opcionalmente pueden   tienen rutas, así como otros comportamientos, adjuntos.

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

Ninguno de ellos es mejor, tendrá que elegir el más apropiado para su proyecto.

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


125
2018-01-09 15:30



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 próximos lanzamientos.

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

Ui-router es un módulo contribuido que supera los problemas de ngRoute. Principalmente anidado / Vistas 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/

enter image description here


64
2017-12-18 13:05



ngRoute es parte del núcleo del framework AngularJS.

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

Aquí hay un buen artículo sobre la configuración / configuración de ui-enrutador:

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


49
2018-01-09 15:28



Si desea utilizar la funcionalidad de vistas anidadas implementada dentro del paradigma ngRoute, intente segmento angular de ruta - pretende extender ngRoute en lugar de reemplazarlo.


34
2018-04-07 19:24



En general, ui-router funciona en un mecanismo de estado ... Se puede entender con un ejemplo fácil:

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, tienes un reproductor de música que se comparte en todo el estado de la página.

Ahora digamos que solo hace clic en algunas canciones para jugar. En este caso, solo ese estado del reproductor de música debería cambiar en lugar de volver a cargar la página completa. Eso puede ser manejado fácilmente por ui-enrutador.

Mientras estamos en ngRoute, solo adjuntamos la vista y el controlador.


17
2018-01-02 22:36



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 es desarrollado por un módulo de terceros.

Ui-enrutador: enrutamiento basado en estado

Ex:

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

-> ui-router permite vistas anidadas

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

ng-enrutador, ui-enrutador


16
2017-08-30 12:12



ngRoute es un módulo creado por el equipo 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 sólida funcionalidad de enrutamiento, como se ejemplifica en esta publicación en el blog (asegúrese de leer el recorrido de comentarios entre Ward Bell y Ben Nadel, el autor, son un par de profesionales angulares)

ui-router desplaza el foco de las rutas centradas en la url a los "estados" de la aplicación, que pueden o no estar reflejados en la url.

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

Los estados anidados le permiten separar la lógica del controlador para las diversas partes de la aplicación. Un ejemplo muy simple de esto sería una aplicación con navegación primaria 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 las vistas nombradas en el enrutador ui 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 super simple de esto sería tener el contenido principal de su aplicación como la vista principal, y luego tener una barra de pie de página que sería una vista de usuario separada. En este escenario, el controlador del pie de página ya no tiene que escuchar los cambios de estado / ruta.

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

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


13
2018-06-27 03:58



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) algún tipo de enrutamiento / vistas complejas, siga adelante con ui-router.

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


11
2017-08-28 10:06



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

Descanse todas las características.


10
2017-10-30 00:18