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

Explique la diferencia entre $routeProvider y $stateProvider en AngularJS.

¿Cuál es la mejor práctica?

Ambos hacen el mismo trabajo que para fines de enrutamiento en SPA (aplicación de página única).

1. Enrutamiento angular: por $ routeProvider docs

URL a controladores y vistas (parciales HTML). Mira $ location.url () e intenta mapear la ruta a una definición de ruta existente.

HTML

 

La etiqueta anterior representará la plantilla de la $routeProvider.when() que ha mencionado en .config (fase de configuración) de

Limitaciones:

  • La página solo puede contener una ng-view única en la página
  • Si su SPA tiene múltiples componentes pequeños en la página que desea representar según algunas condiciones, $routeProvider falla. (para lograr eso, necesitamos usar directivas como ng-include , ng-switch , ng-if , ng-show , que parece malo tenerlas en SPA)
  • No puede relacionarse entre dos rutas, como la relación padre-hijo.
  • No puede mostrar y ocultar una parte de la vista según el patrón de url.

2. ui-router – por $ stateProvider docs

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

Vistas múltiples y con nombre

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

Si bien las vistas paralelas múltiples son una característica poderosa, a menudo podrá administrar sus interfaces de manera más efectiva anidando sus view y emparejando esas vistas con estados nesteds.

HTML

 

La mayor parte de la potencia del ui-router es que puede administrar vistas y estado nesteds.

Pros

  • Puede 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.
  • Aquí podemos tener una relación de hijo y padre, simplemente como herencia en estado, también podría definir estados hermanos.
  • Puede cambiar ui-view="some" of state simplemente usando routing absoluto usando @ con nombre de estado.
  • Otra forma en que podría hacer el enrutamiento relativo es usar solo @ para cambiar ui-view="some" . Esto reemplazará a la ui-view lugar de verificar si está anidada o no.
  • Aquí podría usar ui-sref para crear una URL href forma dinámica sobre la base de la URL mencionada en un estado, también podría dar un params de estado en el formato json .

Para obtener más información Ui-enrutador angular

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

El ng-Router propio de Angular toma en cuenta las URLs mientras enruta, UI-Router toma los states además de las URL.

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

Mientras esté en ng-router, debe tener mucho cuidado con las URL al proporcionar enlaces a través de la etiqueta , en UI-Router solo debe tener en cuenta el state . Proporciona enlaces como . Tenga en cuenta que incluso si usa en UI-Router, al igual que lo haría en ng-router, aún así funcionará.

Por lo tanto, incluso si decide cambiar su URL algún día, su state seguirá siendo el mismo y deberá cambiar la URL solo en .config .

Mientras que ngRouter se puede usar para hacer aplicaciones simples, UI-Router hace que el desarrollo sea mucho más fácil para aplicaciones complejas. Aquí es su wiki.