Routing en Angular 2 (nuevo router rc5)

Publicado en Ago 20, 2016

Hoy vamos a ver como funcionan el routing en Angular 2 utilizando el nuevo Router de la versión RC5.

Este nuevo router es diferente al que utilizábamos en las versiones BETA de Angular y se postula a ser la forma de trabajar definitiva con las rutas en la versión final de Angular 2.

En realidad ganamos comodidad por una parte y la perdemos por otra, con el router-deprecated la forma de recoger los parámetros por la URL me parecía más fácil y rápida, sin embargo la directiva routerLink obligaba a indicar el nombre de la ruta y el nombre de los parámetros para generar un link, en este nuevo router esto se facilita y supuestamente a mejorado el rendimiento. También esta nueva versión RC5 incluye cambios en la forma de trabajar, así que lo vamos a revisar.

Veamos un ejemplo para trabajar realmente con las rutas y el routing en Angular 2.

Crearemos un par de componentes para hacer pruebas.

Este será el componente paises.component.ts, en el cual pues tendremos una plantilla con una lista html:

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

@Component({
  selector: 'paises',
  template: `
    <h2>Paises</h2>
    <ul>
    	<li>España</li>
    	<li>Mexico</li>
    	<li>Colombia</li>
    </ul>
    `
})

export class PaisesComponent { }

Ahora crearemos el segundo componente ciudades.component.ts que tendrá una lista html en su template y también recogerá parámetros de la url y hará redirecciones con router.navigate:

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'ciudades',
  template: `
    <h2>Ciudades</h2>
    <ul>
    	<li>Murcia</li>
    	<li>Valencia</li>
    	<li>Barcelona</li>
    </ul>
    <p *ngIf="codigoPostal">CODIGO POSTAL: {{codigoPostal}} <button (click)="redirigir()">Ver los paises</button></p>
    `
})

export class CiudadesComponent {

    public codigoPostal: number;
    
    constructor(
     private route: ActivatedRoute,
     private router: Router
    ) {}
 

    ngOnInit() {
        // Recogemos los parametros de la URL
         this.route.params.subscribe(params => {
            if(params['id']!=null){
                this.codigoPostal = +params['id']; 
            }

         });
    }

    redirigir(){
        this.router.navigate(['/paises']);
    }

}

Nada de esto funcionará si no definimos nuestras rutas, cargamos el provider del router, el método que hace que la configuración de nuestras rutas se ejecute y funcione y si no creamos utilizamos la etiqueta router-outlet para cargar ahí los componentes asociados a nuestras rutas.

Antes de nada acuerdate de poner en esta etiqueta:

<base href="/">

Como primer etiqueta dentro del head de tu index.html de la raíz del proyecto de Angular2.

Veamos como hacer todo esto.
Primero vamos a crear el fichero app.routing.ts para configurar ahí nuestras rutas:

// Importar componentes y módulos para el routing 
import { Routes, RouterModule } from '@angular/router';

// Componentes
import { PaisesComponent }    from './components/paises.component';
import { CiudadesComponent }  from './components/ciudades.component';

// Configuración de las rutas
const appRoutes: Routes = [
  {
    path: '',
    redirectTo: '/paises',
    terminal: true
  },
  { path: 'paises', component: PaisesComponent },
  { path: 'ciudades', component: CiudadesComponent },
  { path: 'la-ciudad/:id', component: CiudadesComponent }
];

export const appRoutingProviders: any[] = [
];

export const routing = RouterModule.forRoot(appRoutes);

Lo que hemos hecho en este fichero es importar nuestros componentes y definir una configuración para las rutas, en la cual la ruta con el path vacío actuará como ruta por defecto, la ruta paises cargará el listado de los paises, y luego la ruta la-ciudad tendrá parámetros que podrá recibir.

Ahora tenemos el fichero app.module.ts, que se encarga de cargar módulos, componentes y configuraciones para el framework. Tenemos que pasarle al bootstrap del framework, que en este caso lo hacemos usando el atributo providers del decorador NgModule, los providers de las rutas para que se cargue al lanzar la aplicación Angular.

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';
import { AppComponent }       from './app.component';

// Importamos la configuración de rutas que hemos creado anteriormente
import { routing, appRoutingProviders } from './app.routing';

// Importamos los componentes
import { PaisesComponent }    from './components/paises.component';
import { CiudadesComponent }  from './components/ciudades.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    routing
  ],
  declarations: [
    AppComponent,
    PaisesComponent,
    CiudadesComponent
  ],
  providers: [
    appRoutingProviders
  ],
  bootstrap: [ AppComponent ]
})

export class AppModule {
}

El main.ts ahora no tenemos que modificarlo, porque cargamos todas las configuraciones en app.module.ts y se queda así:

    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    import { AppModule } from './app.module';
    platformBrowserDynamic().bootstrapModule(AppModule);

Por ultimo en el componente app.component.ts vamos a definir una plantilla con un pequeño menú de navegación y con la etiqueta router-outlet para cargar ahí los componentes que vaya cargando el router.

import {Component} from '@angular/core';
 
@Component({
    selector: 'my-app',
    template: `<h1>Rutas con Angular 2 rc5 !! victorroblesweb.es</h1>
		    <nav>
		      <a routerLink="/paises">Paises</a>
		      <a routerLink="/ciudades">Ciudades</a>
		    </nav>
		    <router-outlet></router-outlet>`
})
 
export class AppComponent { }

El resultado final en el navegador sería este (ruta por defecto):