Routing en Angular

Que son los routing

Como en Angular solo tenemos una página, un index.html y como generalmente tenemos un componente el selector del modulo principal el <app-root></app-root>, lo que vamos a hacer es intercambiar en el app.component.html los componentes que vallamos a visualizar en ese momento, para ello disponemos del sistema de routing que dispone de una serie de rutas virtuales previamente definidas en el app.module.ts.

Importamos el código del sistema de routing

import { Routes, RouterModule } from '@angular/router';

RouterModule es el módulo que contiene el código del sistema de rutas.
Routes es una declaración que corresponde con un array de objetos tipo Route

 

Creamos cuatro componentes:

ng generate component componente1
ng generate component componente2
ng generate component componente3

Declaramos las siguientes rutas en app.module:

const rutas: Routes = [

  { path: 'componente1', component: componente1 },

  { path: 'componente2', component: componente2 },

  { path: 'componente3', component: componente3 },  

  // Mediante el path: '**' le indico que ante cualquier ruta

  // no contemplada anteriormente se ejecute el comando redirectTo: 'not-found'

  /* { path: 'not-found', component: NotFoundComponent },

  { path: '**', redirectTo: 'not-found' } */

];

Ponemos en el imports de app.module.ts:

RouterModule.forRoot(rutas)

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { FormsModule } from '@angular/forms';

import { Componente1Component } from './componente1/componente1.component';

import { Componente2Component } from './componente2/componente2.component';

import { Componente3Component } from './componente3/componente3.component';

import { RouterModule, Routes} from '@angular/router';

const rutas: Routes = [

  { path: 'componente1', component: Componente1Component },

  { path: 'componente2', component: Componente2Component },

  { path: 'componente3', component: Componente3Component },

  // Mediante el path: '**' le indico que ante cualquier ruta

  // no contemplada anteriormente se ejecute el comando redirectTo: 'not-found'

  /* { path: 'not-found', component: NotFoundComponent },

  { path: '**', redirectTo: 'not-found' } */

];

@NgModule({

  declarations: [

    AppComponent,

    Componente1Component,

    Componente2Component,

    Componente3Component,

  ],

  imports: [

    BrowserModule, FormsModule,

    RouterModule.forRoot(rutas)

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

app.component.html:

<nav>

    <a routerLink="/">Home</a> |

    <a routerLink="/componente1"><p class="p">Componente1</p></a>    

    <a routerLink="/componente2"><p class="p">Componente2</p></a>    

    <a routerLink="/componente3"><p class="p">Componente3</p></a>       

</nav>

<router-outlet></router-outlet>