Ediciones ENI Editorial | líder en informática
Angular y la gestión de las rutas internas
Principio general del enrutado
1. ¿Por qué establecer un enrutado?
Angular permite crear aplicaciones mono página. Estas aplicaciones están formadas por diferentes códigos JavaScript y completamente descargadas antes de que el internauta realice la más mínima acción (solo se solicita al servidor cuando es necesario intercambiar datos con la aplicación Angular). Por lo tanto, la vista global de la aplicación está formada por una composición de vistas (las plantillas de los componentes), y algunas de estas vistas solo deben aparecer temporalmente, durante la activación de algunos componentes. Estas activaciones se hacen generalmente en respuesta a una acción del internauta (por supuesto también es posible que una acción del internauta no active una vista, permaneciendo sin efecto en la interfaz, pero este caso es poco frecuente).
Por lo tanto, se implementa este esquema transaccional de manera más frecuente: una acción del internauta realizada a través de la plantilla de un primer componente, desencadena un procesamiento operado por un segundo componente y activa su vista (es decir, su plantilla).
En el marco de la aplicación El hilo rojo de e-commerce, el internauta puede realizar las siguientes acciones:
-
Definir los criterios (tipo, marca, precio, popularidad, etc.) de los productos de los que queremos información (a través de la vista del componente selectionbycriteriaComponent): los productos que responden a estos criterios, se buscan en la base MongoDB, y después se muestran en una vista activada para este momento (y gestionada por el componente productDisplayComponent).
-
Seleccionar un producto entre los que se muestran en la vista del componente productDisplayComponent, para añadirlo a su cesta de la compra: este producto se añade a la lista de los productos de la cesta de la compra de este internauta, almacenada en una colección MongoDB (componente cartManagementComponent) y aparece la vista de los productos de la cesta de la compra (componente cartDisplayComponent).
Para gestionar estas transacciones, hay dos posibilidades:
-
A partir de la vista de un primer componente, se llama a un método de otro componente, lo que constituye la creación de un enlace directo (y sin duda incómodo) entre...
La sintaxis de las rutas
Esta sección pinta un escenario más completo para las rutas. La directiva routerlink asociada a las anclas, se introducirá en primer lugar en los ejemplos de selección de rutas y después se introducirá el método navigate(), que también permite realizar selecciones.
Al más alto nivel, la selección de una ruta interna en Angular generalmente se especifica por dos datos, el segundo es opcional:
-
La ruta propiamente dicha (que se corresponde con el path de una URL), que llamaremos ruta. Esta ruta absoluta o relativa, incluye uno o varios segmentos (algunas pueden recibir argumentos).
-
Un objeto JavaScript que especifica los outlets con nombre (los auxiliary outlets), que definen las ubicaciones específicas (identificadas por un nombre), donde se activan las vistas de los componentes invocados por la ruta. Si este objeto no está presente, las vistas se redirigen hacia la ubicación por defecto: la primary outlet.
La sintaxis de la selección de las rutas queda de esta manera condicionada respecto a varios factores:
-
La ruta se define en JavaScript por una cadena o una lista.
-
La ruta puede ser absoluta o relativa.
-
La ruta puede tener argumentos en su ruta.
-
La ruta se puede asociar a un auxiliary outlet.
-
La ruta se puede tener en cuenta por varias tablas de enrutado, en el caso en el que la aplicación esté formada por varios módulos.
En adelante, vamos a introducir el conjunto de elementos que influyen sobre la sintaxis de las rutas.
1. Las dos sintaxis de una ruta: cadena o link parameters array
Si la ruta solo está formada por un único segmento y si el objeto que especifica los auxiliary outlets está ausente...
Selección de las rutas
Hay dos posibilidades para seleccionar una ruta (esta selección se hace generalmente directa o indirectamente a partir de una plantilla):
-
Usando la directiva routerLink, que esta asocia con elementos HTML en los que se puede hacer clic (por ejemplo, las anclas).
-
Usando el método Router.navigate(), este método se llamada normalmente directa o indirectamente a partir de un listener de eventos.
La directiva routerLink y el método navigate() de la clase Router, provienen del paquete @angular/router.
1. La directiva routerLink
La directiva routerLink, que permite seleccionar una ruta, se asocia a los elementos HTML pulsables, como las anclas.
Como hemos visto, si varios elementos forman la ruta (presencia de argumentos y/o del objeto que definen los outlets de salida), estos elementos se agrupan en una lista. En este caso, el valor de la directiva es código JavaScript, el nombre de la directiva se enmarca por corchetes: [routerLink].
A continuación se muestra el esquema de programación que se debe implementar:
<a [routerLink]="[...]"> ... </a> A continuación se muestra un ejemplo:
<a [routerLink]="['/research',
{outlets: {'display': ['display',
...Gestión de las rutas del controlador hacia el componente destino
En una aplicación Angular, es posible crear módulos específicos, dedicados en el enrutado que acompaña al root module y los feature modules (no es una obligación, ya que las configuraciones de enrutado también se pueden especificar directamente en el código de los módulos, pero esta externalización hace más fácil el mantenimiento del proyecto). El módulo AppRoutingModule que acompaña al root module, se crea con el comando ng new --routing (este módulo aparece en el archivo app-routing.module.ts). Este módulo utiliza (y por lo tanto, importa) el servicio RouterModule (del paquete nodes_modules/@angular/router).
1. Configuración de la tabla de enrutado
La aplicación El hilo rojo puede utilizar una o varias tablas de enrutado. En efecto, diferente a la tabla de enrutado asociada al root module, habrá sin duda una tabla de enrutado por feature module.
Una tabla de enrutado se define por la colección (una lista de objetos) de tipo rutas. A continuación se muestra el esquema de programación (básico), donde cada objeto de esta colección enlaza una ruta con el componente a invocar, durante la selección de este:
import { Routes, RouterModule } from '@angular/router';
... // importaciones de los componentes invocados por las rutas
const routesRoutes = [
{
path: <ruta>,
component: <componente a invocar>
},
{
path: <ruta>,
component: <componente a invocar>
},
...
]; La tabla de enrutado se proporciona en el router por el método forRoot() si afecta al root module, o por el método forChild() si afecta a una feature module.
A continuación se muestra el esquema de programación del módulo que especifica la tabla de enrutado:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
... // importaciones de los componentes invocados por las rutas
const routes Routes = [ ...Gestión de rutas en El hilo rojo
En el marco de la aplicación El hilo rojo de e-commerce, se han desarrollado dos funcionalidades en dos feature modules:
-
La selección y la visualización de los productos a partir de diferentes modos de búsqueda (módulo research).
-
La gestión de la cesta de la compra (módulo cart).
Como se ha mencionado, cada módulo debe tener su propia tabla de enrutado, lo que permite a los feature modules ser reutilizables. Para mejorar la legibilidad del código, las tablas de enrutado se gestionan en los módulos específicos que acompañan a estos dos módulos y el root module.
Por lo tanto, el router gestiona tres tablas de enrutado: una definida a nivel del root module, dos definidas a nivel de los feature modules.
A nivel del root module, la tabla de enrutado del módulo AppRoutingModule (archivo src/app/app-routing.module.ts) permite enrutar las rutas primarias:
-
research hacia los componentes del módulo research.
-
cart hacia los componentes del módulo cart.
A nivel de los feature modules, las tablas de enrutado administran las rutas secundarias:
-
La tabla de enrutado del módulo research se especifica en el módulo ResearchRoutingModule (archivo research-routing.module.ts).
-
La tabla de enrutado del módulo cart se especifica en el módulo CartRoutingModule (archivo cart-routing.module.ts).
El lazy loading permite cambiar los componentes del módulo designado por la ruta primaria, solo cuando el router tiene en cuenta esta ruta por primera vez.
A continuación se muestra la estructura del código de la aplicación de prueba que gestiona las tablas de enrutado:
-
ONLINESALES/src/app/app-routing.module.ts:...
Conocimientos adquiridos en este capítulo
El router de Angular permite activar un componente (y por lo tanto, hacer que aparezca su vista), después de que se haya seleccionado una ruta (como consecuencia de una acción, por ejemplo la selección de un elemento pulsable, en el que se puede hacer clic, de una plantilla). Esta visualización es temporal, al contrario de lo que sucede con la visualización de un componente, cuya etiqueta es inserta directamente en una plantilla (es posible, aunque incómodo, condicionar un visualización «permanente» como esta a través de la directiva estructural *ngIf).
Por otro lado, según la ruta seleccionada, la vista del componente activado en una ruta, puede aparecer en la ubicación por defecto (el primary outlet) o en una ubicación específica (en un outlet con nombre o auxiliary outlet). Además, el router también puede comprobar que las condiciones particulares se validan correctamente, antes de activar un componente.
De esta manera, vemos toda la flexibilidad que procura la implementación del router. Y por supuesto, el desacoplamiento fuerte que se establece entre la expresión de una acción y su realización facilita la evolución de las aplicaciones y confiere en parte al router el papel de controlador del paradigma modelo vista-controlador.
Este capítulo ha detallado la estructura...