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
