Cómo configurar un sistema de rutas en Angular

Configuraremos un sistema de navegación dinámica e instantánea. Eso significa que cuando escojamos por ejemplo en el menú el apartado de contactos no se recargará la página, ya que Angular solo recarga componentes no toda la página.

Pasos previos:

Para poder crear proyectos en Angular primero hemos de tener instalado NodeJS y npm en nuestro ordenador, si no sabes como te dejo un tutorial aquí, además de Angular que también te dejaré un tutorial aquí.

Configuración de fichero app.routing:

Para que nos funcionen las rutas tenemos que tener en el fichero index.html ubicado en nombre_proyecto/src/index.html el siguiente código:

<base href="/">

Normalmente está puesto en el fichero, pero nunca viene mal revisar que está todo correcto.
A continuación, creamos en la carpeta app un fichero llamado app.routing.ts donde aquí escribiremos la configuración de rutas de nuestro proyecto, además también podremos crear nuevas rutas en el mismo fichero.
Lo primero que tenemos que hacer es importar los módulos necesarios para que funcionen las rutas:

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

Ahora toca importar los componentes que tengamos, en mi caso tengo 3 componentes:
-Inicio
-Sobre mi
-Contactos

Para crear nuevos componentes entramos en el cmd y luego en la carpeta del proyecto y escribimos en siguiente comando:

ng g component “nombre del componente”

Luego en el archivo de app.modules.ts copiamos los imports creados de los nuevos componentes y los pegamos debajo:

import { InicioComponent } from './componentes/inicio/inicio.component';
import { SobreMiComponent } from './componentes/sobre-mi/sobre-mi.component';
import { ContactosComponent } from './componentes/contactos/contactos.component';

Esto lo hacemos para ir más rápido, pero se pueden escribir a mano.
Seguidamente crearemos un array donde se darán de alta las nuevas rutas que queramos crear.
Creamos una constante con un nombre appRoutes de tipo Routes, el nombre de la constante puede ser otro pero para aclararnos utilizaré este.
Luego dentro del array por cada ruta crearemos un objeto JSON donde dentro estará el nombre de la ruta y el nombre del componente.

const appRoutes: Routes=[
		{path: ' ', component:InicioComponent},
		{path: 'inicio ', component:InicioComponent},
		{path: 'sobre-mi', component:SobreMiComponent},
		{path: 'contacto', component:ContactosComponent},

];

El path vacío para que se entienda mejor es como si en la ruta fuese “nombre_web/” . También sirve si escribes mal la ruta te redirigirá ahí.

Exportar el módulo del router:

export const appRoutingProviders: any[] = [];
export const routing: ModuleWithProviders<any> = RouterModule.forRoot(appRoutes);

La constante appRoutingProviders es el servicio del router para que funcione a nivel interno.

La otra constante es el routing que es el módulo ModuleWithProviders, y aquícargamos y damos de alta la configuración de las rutas.

Configuración de fichero app.modules:

Dentro del fichero app.module en el apartado de los imports de módulos importamos los del fichero app.routing gracias a que los tenemos importados:

import { routing, appRoutingProviders} from './app.routing';

Luego el routing al ser un módulo lo tenemos que cargar en el apartado de los imports.
Y el appRoutingProviders cómo es un servicio lo agregamos al apartado de providers.
Y ya tenemos configurado las rutas.

Para crearlas te dejo un artículo donde se explica paso a paso.

Esperemos que les haya sido útil.

Plenix Network

Artículos recientes

Artículos relacionados