El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este tema, aprenderemos cómo configurar rutas en una aplicación Angular. El enrutamiento es una característica esencial en aplicaciones de una sola página (SPA) que permite la navegación entre diferentes vistas o componentes sin recargar la página completa.

Objetivos

Comprender la importancia del enrutamiento en Angular.
Configurar rutas básicas en una aplicación Angular.
Navegar entre diferentes componentes utilizando el enrutador de Angular.

Conceptos Clave

RouterModule: Módulo que proporciona las funcionalidades de enrutamiento.
Routes: Arreglo de objetos de ruta que define las rutas de la aplicación.
RouterOutlet: Directiva que actúa como un marcador de posición donde se renderizan los componentes en función de la ruta actual.
RouterLink: Directiva que se utiliza para enlazar a diferentes rutas.

Paso a Paso

Importar RouterModule y Routes

Primero, necesitamos importar RouterModule y Routes desde @angular/router en nuestro módulo principal (generalmente app.module.ts).

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes) // Configuración de rutas
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Definir las Rutas

En el ejemplo anterior, hemos definido dos rutas:

La ruta raíz ('') que carga el HomeComponent.
La ruta about que carga el AboutComponent.

Configurar RouterOutlet

En el archivo de plantilla principal (generalmente app.component.html), necesitamos agregar la directiva RouterOutlet para indicar dónde se deben renderizar los componentes en función de la ruta actual.

<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>

Navegar entre Rutas

Utilizamos la directiva RouterLink para crear enlaces de navegación. En el ejemplo anterior, hemos creado enlaces para las rutas Home y About.

Ejemplo Completo

A continuación, se muestra un ejemplo completo de una aplicación Angular con enrutamiento básico.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>

home.component.ts

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

@Component({
  selector: 'app-home',
  template: `<h1>Home Component</h1>`
})
export class HomeComponent { }

about.component.ts

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

@Component({
  selector: 'app-about',
  template: `<h1>About Component</h1>`
})
export class AboutComponent { }

Ejercicio Práctico

Ejercicio 1: Añadir una Nueva Ruta

Crea un nuevo componente llamado ContactComponent.
Añade una nueva ruta para el ContactComponent con el path contact.
Actualiza la navegación en app.component.html para incluir un enlace a la nueva ruta.

Solución

Crear el componente ContactComponent:

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

@Component({
  selector: 'app-contact',
  template: `<h1>Contact Component</h1>`
})
export class ContactComponent { }

Añadir la nueva ruta en app.module.ts:

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent } // Nueva ruta
];

Actualizar la navegación en app.component.html:

<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
  <a routerLink="/contact">Contact</a> <!-- Nuevo enlace -->
</nav>
<router-outlet></router-outlet>

Resumen

En esta lección, hemos aprendido cómo configurar rutas en una aplicación Angular. Hemos cubierto los conceptos básicos del enrutamiento, incluyendo la configuración de RouterModule, la definición de rutas, el uso de RouterOutlet y RouterLink para la navegación. Además, hemos realizado un ejercicio práctico para reforzar los conceptos aprendidos. En la próxima lección, exploraremos los parámetros de ruta y cómo utilizarlos para pasar datos entre componentes.

Configuración de Rutas

Objetivos

Conceptos Clave

Paso a Paso

Importar RouterModule y Routes

Definir las Rutas

Configurar RouterOutlet

Navegar entre Rutas

Ejemplo Completo

app.module.ts

app.component.html

home.component.ts

about.component.ts

Ejercicio Práctico

Ejercicio 1: Añadir una Nueva Ruta

Solución

Resumen

Curso de Angular 2+

Módulo 1: Introducción a Angular

Módulo 2: Conceptos Básicos de TypeScript

Módulo 3: Componentes y Plantillas

Módulo 4: Directivas y Pipes

Módulo 5: Servicios e Inyección de Dependencias

Módulo 6: Enrutamiento y Navegación

Módulo 7: Formularios en Angular

Módulo 8: Cliente HTTP y Observables

Módulo 9: Gestión de Estado

Módulo 10: Pruebas en Angular

Módulo 11: Temas Avanzados

Módulo 12: Despliegue y Mejores Prácticas