Rutas en Angular

16/04/20180 comentarios

Hola a todos, hoy os explicaré como funcionan las rutas en Angular.

En Angular, al tratarse de un SPA (Single Page Application) hace que siempre estemos en la misma ruta, digamos que le indicamos que queremos mostrar.

Para ello lo primero que necesitamos es crear un fichero especial. Lo crearemos en la carpeta app. Lo llamaremos app.routes.ts.

El contenido base seria este (copiarlo tal cual):

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

const APP_ROUTES: Routes = [
{path: '**', redirectTo: ''}
];

export const APP_ROUTING = RouterModule.forRoot(APP_ROUTES);

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

const APP_ROUTES: Routes = [

{path: '**', redirectTo: ''}

];

export const APP_ROUTING = RouterModule.forRoot(APP_ROUTES);

Esto nos permite definir nuestro sistema de rutas, ahora crearemos un par de componentes de prueba.

Crear un componente en angular de forma rápida

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

import { Comp1 } from './component1/comp1.component';
import { Comp2 } from './component2/comp2.component';

const APP_ROUTES: Routes = [
    {path: 'comp1', component: Comp1 },
    {path: 'comp2', component: Comp2 },
    {path: '**', redirectTo: 'comp1'}
];

export const APP_ROUTING = RouterModule.forRoot(APP_ROUTES);

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

import { Comp1 } from './component1/comp1.component';

import { Comp2 } from './component2/comp2.component';

const APP_ROUTES: Routes = [

{path: 'comp1', component: Comp1 },

{path: 'comp2', component: Comp2 },

{path: '**', redirectTo: 'comp1'}

];

export const APP_ROUTING = RouterModule.forRoot(APP_ROUTES);

Creamos nuestras rutas creando literales, indicando la ruta y el componente asociado.

La ultima ruta es una ruta especial que nos permitirá redirigir al componente que queramos en caso de que no coincida con ninguno.

También os recomiendo hacer lo siguiente

export const APP_ROUTING = RouterModule.forRoot(APP_ROUTES, {useHash: true});

1	export const APP_ROUTING = RouterModule.forRoot(APP_ROUTES, {useHash: true});

Añadimos el literal {useHash: true} esto añadirá un # a la ruta, que es un viejo truco de los navegadores para evitar que el navegador recargue la pagina.

No olvidéis de importar APP_ROUTING en app.modules.ts en la parte de imports.

Por último, tenemos que usar una etiqueta importante, llamada la pondremos en app.component.html

Esta etiqueta lo que hace es llamar al componente y mostrarlo, digamos que es lo que se ocupa de manejar las rutas.