Búsqueda de sitios web

javascript - ¿Cuál es la diferencia entre $routeProvider y $stateProvider?

Por favor explique la diferencia entre $routeProvider y $stateProvider en AngularJS.

¿Cuál es la mejor práctica?

Respuesta #1

Ambos realizan el mismo trabajo ya que se utilizan con fines de enrutamiento en SPA (Aplicación de Página Única).

1. Enrutamiento en Angular - según la documentación de $routeProvider

URLs a controladores y vistas (fragmentos HTML). Observa $location.url() e intenta mapear la ruta a una definición de ruta existente.

HTML

<div ng-view></div>

La etiqueta anterior renderizará la plantilla desde la condición $routeProvider.when() que mencionaste en .config (fase de configuración) de Angular

Limitaciones:-

  • La página solo puede contener un único ng-view en la página
  • Si tu SPA tiene múltiples componentes pequeños en la página que deseas renderizar según algunas condiciones, $routeProvider falla. (para lograr eso, necesitamos usar directivas como ng-include, ng-switch, ng-if, ng-show, lo cual se ve mal tenerlas en una SPA)
  • No se puede relacionar entre dos rutas como una relación de padre e hijo.
  • No se puede mostrar y ocultar una parte de la vista en función del patrón de URL.

2. ui-router - según la documentación de $stateProvider

AngularUI Router es un marco de enrutamiento para AngularJS, que te permite organizar las partes de tu interfaz en una máquina de estados. UI-Router está organizado en torno a estados, que opcionalmente pueden tener rutas, así como otros comportamientos, adjuntos.

Vistas múltiples y nombradas

Otra gran característica es la capacidad de tener múltiples vistas de interfaz de usuario en una plantilla.

Aunque múltiples vistas en paralelo son una característica poderosa, a menudo podrás gestionar tus interfaces de manera más efectiva al anidar tus views y emparejar esas vistas con estados anidados.

HTML

<div ui-view>
    <div ui-view='header'></div>
    <div ui-view='content'></div>
    <div ui-view='footer'></div>
</div>

La mayor parte del poder de ui-router es que puede gestionar estados y vistas anidadas.

Ventajas

  • Puedes tener múltiples ui-view en una sola página
  • Varias vistas pueden anidarse entre sí y mantenerse definiendo el estado en la fase de enrutamiento.
  • Podemos tener una relación de hijo y padre aquí, simplemente como la herencia en el estado, también podrías definir estados hermanos.
  • Podrías cambiar el ui-view="some" del estado simplemente usando enrutamiento absoluto usando @ con el nombre del estado.
  • Otra forma en que podrías hacer el enrutamiento relativo es usando solo @ para cambiar ui-view="some". Esto reemplazará el ui-view en lugar de verificar si está anidado o no.
  • Aquí podrías usar ui-sref para crear un URL href dinámicamente en función del URL mencionado en un estado, también podrías dar parámetros de estado en el formato json.

Para más información sobre Angular ui-router

Para una mejor flexibilidad con varias vistas anidadas con estados, preferiría que eligieras ui-router

Respuesta #2

El propio ng-Router de Angular toma en consideración las URLs al enrutar, UI-Router toma estados además de las URLs.

Los estados están vinculados a vistas nombradas, anidadas y paralelas, lo que te permite gestionar de manera potente la interfaz de tu aplicación.

Mientras que en ng-router, tienes que tener mucho cuidado con las URL al proporcionar enlaces mediante la etiqueta <a href="">, en UI-Router solo tienes que tener en mente el state. Proporcionas enlaces como <a ui-sref="">. Ten en cuenta que incluso si usas <a href=""> en UI-Router, tal como lo harías en ng-router, todavía funcionará.

Entonces, incluso si algún día decides cambiar tu URL, tu state permanecerá igual y solo necesitarás cambiar la URL en .config.

Aunque ngRouter se puede usar para crear aplicaciones simples, UI-Router facilita mucho el desarrollo de aplicaciones complejas. Aquí está su wiki.

Artículos relacionados