javascript - start - ui-router angular 6

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

Question

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

¿Cuál es la mejor práctica?

Answer 1

$ route: Esto se usa para enlazar URLs a controladores y vistas (parciales HTML) y observa $ location.url () para mapear la ruta desde una definición existente de ruta.

Cuando usamos ngRoute, la ruta se configura con $ routeProvider y cuando usamos ui-router, la ruta se configura con $ stateProvider y $ urlRouterProvider.

<div ng-view></div>
$routeProvider
.when(''/contact/'', {
templateUrl: ''app/views/core/contact/contact.html'',
controller: ''ContactCtrl''
});
<div ui-view>
<div ui-view=''abc''></div>
<div ui-view=''abc''></div>
</div>
$stateProvider
.state("contact", {
url: "/contact/",
templateUrl: ''/app/Aisel/Contact/views/contact.html'',
controller: ''ContactCtrl''
});

Answer 2

Ambos hacen el mismo trabajo que se utilizan 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). Observa $ location.url () e intenta asignar la ruta a una definición de ruta existente.

HTML

<div ng-view></div>

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

Limitaciones: -

• La página solo puede contener ng-view en la página
• Si su SPA tiene múltiples componentes pequeños en la página que desea representar en función de algunas condiciones, $routeProvider falla. (para lograr eso, necesitamos usar directivas como ng-include , ng-switch , ng-if , ng-show , que se ve mal tenerlas en el SPA)
• No puede relacionarse entre dos rutas como la relación principal y secundaria.
• 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 alrededor de 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 ui 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 anidados.

HTML

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

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

Pros

• Puede tener múltiples ui-view en una sola página
• Se pueden anidar varias vistas entre sí y mantenerlas definiendo el estado en la fase de enrutamiento.
• Podemos tener una relación entre padres e hijos aquí, simplemente como herencia en estado, también podría definir estados hermanos.
• Puede cambiar ui-view="some" de estado simplemente usando el enrutamiento absoluto usando @ con el nombre del estado.
• Otra forma de hacer un enrutamiento relativo es usar solo @ para cambiar ui-view="some" . Esto reemplazará la ui-view lugar de verificar si está anidada o no.
• Aquí puede usar ui-sref para crear una URL href dinámicamente sobre la base de la URL mencionada en un estado, también puede proporcionar parámetros de estado en el formato json .

Para más información Angular ui-router

Para una mejor flexibilidad con varias vistas anidadas con estados, prefiero que ui-router

Answer 3

El propio ng-Router de Angular toma en cuenta las URLs durante el enrutamiento, UI-Router toma states además de las URL.

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.

Mientras esté en ng-router, debe tener mucho cuidado con las URL al proporcionar enlaces a través de la etiqueta <a href=""> , en UI-Router solo debe tener en cuenta el state . Usted proporciona enlaces como <a ui-sref=""> . Tenga en cuenta que incluso si usa <a href=""> en UI-Router, tal como lo haría en ng-router, seguirá funcionando.

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 .

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