El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este tema, aprenderemos cómo configurar rutas en una aplicación Angular para permitir la navegación entre diferentes vistas o componentes. Angular Router es una herramienta poderosa que nos permite definir rutas y gestionar la navegación de manera eficiente.

Objetivos de Aprendizaje

Comprender la importancia del enrutamiento en aplicaciones de una sola página (SPA).
Configurar rutas básicas en una aplicación Angular.
Navegar entre diferentes componentes utilizando el enrutador de Angular.
Utilizar el módulo RouterModule para definir y gestionar rutas.

Conceptos Clave

¿Qué es el Enrutamiento?

El enrutamiento en Angular permite a los usuarios navegar entre diferentes vistas o componentes sin recargar la página. Esto es esencial para aplicaciones de una sola página (SPA), donde la experiencia del usuario debe ser fluida y rápida.

RouterModule

El RouterModule es un módulo de Angular que proporciona las herramientas necesarias para configurar y gestionar rutas en una aplicación Angular.

Configuración Básica de Rutas

Paso 1: 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)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Paso 2: Definir Rutas

En el ejemplo anterior, hemos definido dos rutas:

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

Paso 3: Configurar el Router Outlet

El RouterOutlet es un marcador de posición en el HTML donde se renderizarán los componentes correspondientes a las rutas definidas.

<!-- app.component.html -->
<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>

Paso 4: Navegar entre Rutas

Utilizamos la directiva routerLink para definir enlaces de navegación en nuestra aplicación.

<!-- app.component.html -->
<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>

Ejemplo Completo

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

Crea un nuevo componente llamado ContactComponent.
Define una nueva ruta /contact que cargue el ContactComponent.
Añade un enlace de navegación al ContactComponent en el app.component.html.

Solución

Paso 1: Crear el ContactComponent

ng generate component contact

Paso 2: Definir la Ruta

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

Paso 3: Añadir el Enlace de Navegación

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

Resumen

En esta sección, hemos aprendido cómo configurar rutas básicas en una aplicación Angular utilizando el RouterModule. Hemos visto cómo definir rutas, configurar el RouterOutlet y navegar entre diferentes componentes. Con estos conocimientos, estamos listos para explorar conceptos más avanzados de enrutamiento en Angular.

Configuración de Rutas

Objetivos de Aprendizaje

Conceptos Clave

¿Qué es el Enrutamiento?

RouterModule

Configuración Básica de Rutas

Paso 1: Importar RouterModule y Routes

Paso 2: Definir Rutas

Paso 3: Configurar el Router Outlet

Paso 4: Navegar entre Rutas

Ejemplo Completo

app.module.ts

app.component.html

home.component.ts

about.component.ts

Ejercicio Práctico

Ejercicio

Solución

Paso 1: Crear el ContactComponent

Paso 2: Definir la Ruta

Paso 3: Añadir el Enlace de Navegación

Resumen

Curso de Angular

Módulo 1: Introducción a Angular

Módulo 2: Componentes de Angular

Módulo 3: Enlace de Datos y Directivas

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

Módulo 5: Enrutamiento y Navegación

Módulo 6: Formularios en Angular

Módulo 7: Cliente HTTP y Observables

Módulo 8: Gestión de Estado

Módulo 9: Pruebas en Angular

Módulo 10: Conceptos Avanzados de Angular

Módulo 11: Despliegue y Mejores Prácticas