javascript - start - ui-router angular 6
¿Cuál es la diferencia entre $ routeProvider y $ stateProvider? (3)
$ 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''
});
Explique la diferencia entre
$routeProvider
y
$stateProvider
en AngularJS.
¿Cuál es la mejor práctica?
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 comong-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 cambiarui-view="some"
. Esto reemplazará laui-view
lugar de verificar si está anidada o no. -
Aquí puede usar
ui-sref
para crear una URLhref
dinámicamente sobre la base de laURL
mencionada en un estado, también puede proporcionar parámetros de estado en el formatojson
.
Para más información Angular ui-router
Para una mejor flexibilidad con varias vistas anidadas con estados, prefiero que
ui-router
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.