javascript - sref - ¿Cuál es la diferencia entre enrutador angular y enrutador ui angular?

ui router angular 2 example

Question

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

¿Cuál es la diferencia entre los módulos 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?

Answer 1

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 las próximas versiones.

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

Ui-router es un módulo contribuido que soluciona los problemas de ngRoute. Principalmente vistas anidadas / complejas.

URL: ui-router

Algunas de las diferencias entre ui-router y ngRoute

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

Answer 2

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

Answer 3

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 se organiza en torno a las rutas URL, UI-Router se organiza en torno a los estados, que pueden tener rutas y otros comportamientos adjuntos.

ui-router

Answer 4

En general, ui-router 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 debe cambiar en lugar de volver a cargar la página completa. Eso puede ser manejado fácilmente por ui-router.

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

Answer 5

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

Descansa todas las características.

Answer 6

Si desea utilizar la funcionalidad de vistas anidadas implementada en el paradigma ngRoute, pruebe el angular-route-segment.com : su objetivo es extender ngRoute en lugar de reemplazarlo.

Answer 7

enrutador ui hacer su vida más fácil! Puede agregarlo a su aplicación AngularJS inyectándolo en sus aplicaciones ...

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

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

También cuando lo uses, no olvides usar: ngView ..

ng-ui-router es diferente pero:

ui-router pero te da más opciones ...

Answer 8

ngRoute es parte del marco principal 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 la configuración / configuración de ui-router:

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

Answer 9

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 puede construirse con bastante facilidad para brindar una sólida funcionalidad de enrutamiento, como se ilustra en esta publicación del blog (asegúrese de leer el rastro de comentarios entre Ward Bell y Ben Nadel, el autor: son un pareja de profesionales angulares)

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

Las características principales agregadas por ui-router son los estados anidados y las 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 primaria en la parte superior, una lista de navegación secundaria en la parte izquierda y contenido a la derecha. Sin estados anidados, un único 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 única directiva ngView en una página, mientras que con vistas con nombre en ui-router puede especificar múltiples directivas de vista de ui, y luego cada estado puede afectar la plantilla y el controlador de las vistas de nombres. Un ejemplo muy 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 interfaz de usuario separada. En este escenario, el controlador de 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, vigile el 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. Here 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 here para ver más noticias sobre cuándo se lanzará este módulo.

Answer 10

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

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

Answer 11

ngRoute es una biblioteca de enrutamiento básica, donde puede especificar solo una vista y un 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, entonces siga adelante con ui-router.

http://www.ng-newsletter.com/posts/angular-ui-router.html es la mejor guía de inicio para AngularUI Router.

Answer 12

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 a través de ngRoute:

• ui-router permite vistas anidadas y múltiples vistas con nombre . Esto es muy útil con aplicaciones más grandes 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 estados. Cambiar la url en un solo lugar actualizará todos los enlaces a ese estado cuando construyas tus enlaces con ui-sref . Muy útil para proyectos más grandes donde las URL pueden cambiar.

• También existe el concepto de decorator que se podría utilizar 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 tendrá que especificar todas sus rutas de antemano.

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

• Puede determinar fácilmente si está en un estado o padre de un estado para ajustar el elemento UI (resaltando la navegación del estado actual) dentro de sus plantillas a través de $state provisto por el enrutador ui que puede exponer al establecerlo en $rootScope en run

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

Más información:

• Github: 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/Frequently-Asked-Questions
• Aplicación de ejemplo: http://angular-ui.github.io/ui-router/sample/#/

Answer 13

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 es por lo tanto la mejor opción.

Answer 14

Angular 1.x

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

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

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

Ex:

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

ui-router :

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

https://docs.angularjs.org/api/ngRoute , ui-router

Answer 15

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

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 se organiza en torno a las rutas URL, UI-Router se organiza en torno a estados, que pueden tener rutas y otros comportamientos adjuntos.

Los estados están vinculados a vistas con nombre, anidadas y paralelas, lo que le permite administrar de manera potente 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 "$ estado". Te recomiendo que elijas ui-router.