Vamos a introducir el concepto de Angular Router y como realizar su configuración para que las cosas nos queden organizadas. Angular Router se encarga de decidir que componentes de Angular se muestran en cada momento.
Vamos a ver un ejemplo sencillo creando dos componentes c1 y c2 , para ello ejecutamos angular-cli:
ng generate component c1
ng generate component c2
Esto nos generará dos componentes en nuestra aplicación de angular:
Vamos a cambiar las plantillas para que cada uno tenga un mensaje en castellano:
este es el componente 1
este es el componente 2
Angular Router
Es momento de configurar Angular Router , para ello el primer paso es modificar el fichero app.module.ts y añadir la configuración propia del router.
import { RouterModule, Routes } from '@angular/router';
El siguiente paso es definir un conjunto de rutas válido:
const rutas: Routes = [ { path: 'c1', component: C1Component }, { path: 'c2', component: C2Component }, { path: '', redirectTo: '/c1', pathMatch: 'full' }, ];
Angular y Rutas
En este caso solamente hemos declarado dos rutas cada una de ellas carga un componente. Ademas hemos añadido una ruta vacía que realiza un redirect y nos carga el componente1 . Nos queda configurar el Router para que realice tareas de debugging cada vez que solicitemos una ruta eso se realiza a nivel de @NgModule
@NgModule({ declarations: [ AppComponent, C1Component, C2Component ], imports: [ BrowserModule, RouterModule.forRoot( rutas, { enableTracing: true } // <-- tareas de debug ) ], providers: [], bootstrap: [AppComponent] })
Hemos terminado de configurar el router y sus dos rutas más sencillas , nos queda modificar el fichero de app.component.html para que no cargue por defecto ningún componente y se apoye en el router en este caso hay que utilizar las etiquetas de “router-outlet” en la página.
<router-outlet></router-outlet>
Es momento de probar el router , utilizamos ng serve y arrancamos la aplicación:
El componente c1 carga sin problemas , vamos a ver el segundo:
Angular Router y Modulos
En muchas ocasiones es preferible definir el sistema de enrutado de forma independiente y no cargarlo todo en el app.module.ts.
Vamos a ver como hacerlo . El primer paso es crear un nuevo módulo en la aplicación
ng generate module rutas
Esto nos generará una nueva carpeta con el módulo:
Es en este módulo en el cual vamos a ubicar toda la funcionalidad del sistema de rutas:
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule, Routes } from '@angular/router'; import { C1Component } from '../c1/c1.component'; import { C2Component } from '../c2/c2.component'; const rutas: Routes = [ { path: 'c1', component: C1Component }, { path: 'c2', component: C2Component }, { path: '', redirectTo: '/c1', pathMatch: 'full' }, ]; @NgModule({ imports: [ CommonModule, RouterModule.forRoot( rutas, { enableTracing: true } ) ], declarations: [], exports :[ RouterModule ], }) export class RutasModule { }
En este caso hemos trasladado toda la funcionalidad del enrutado a nuestro nuevo módulo y hemos solicitado que se exporte el RouterModule.
exports :[ RouterModule ]
Ahora bien como queda el app.module. Vamos a verlo:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { C1Component } from './c1/c1.component'; import { C2Component } from './c2/c2.component'; import { RouterModule, Routes } from '@angular/router'; import {RutasModule} from "./rutas/rutas.module"; @NgModule({ declarations: [ AppComponent, C1Component, C2Component ], imports: [ BrowserModule, RutasModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Hemos exportado el sistema de rutas a un módulo independiente y ahora todo queda más ordenado:
Otros artículos relacionados