El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem com configurar rutes en una aplicació Angular per permetre la navegació entre diferents components. Les rutes són una part fonamental de qualsevol aplicació web moderna, ja que permeten als usuaris moure's entre diferents vistes o pàgines de l'aplicació.

Objectius

Comprendre la importància de les rutes en una aplicació Angular.
Aprendre a configurar rutes bàsiques.
Navegar entre diferents components utilitzant rutes.

Conceptes Clau

RouterModule: Mòdul d'Angular que proporciona serveis de navegació i manipulació de rutes.
Routes: Array de configuracions de rutes que defineixen les associacions entre les URL i els components.
RouterOutlet: Directiva que actua com a contenidor per als components que es carreguen en funció de la ruta actual.

Passos per Configurar Rutes

Instal·lar el RouterModule

Primer, assegura't que el RouterModule està importat en el mòdul principal de la teva aplicació (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ó de rutes
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Definir les Rutes

Les rutes es defineixen com un array d'objectes Routes. Cada objecte de ruta ha de tenir almenys dues propietats:

path: La URL de la ruta.
component: El component que es carregarà quan la ruta coincideixi.

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

Utilitzar el RouterOutlet

El RouterOutlet és una directiva que actua com a contenidor per als components que es carreguen en funció de la ruta actual. Afegeix el RouterOutlet al teu component principal (app.component.html).

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

Navegar entre Rutes

Utilitza la directiva routerLink per crear enllaços de navegació entre les rutes definides.

<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
</nav>

Exemple Complet

A continuació, es mostra un exemple complet de configuració de rutes en una aplicació Angular.

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</h1><p>Welcome to the home page!</p>`
})
export class HomeComponent { }

about.component.ts

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

@Component({
  selector: 'app-about',
  template: `<h1>About</h1><p>This is the about page.</p>`
})
export class AboutComponent { }

Exercicis Pràctics

Exercici 1: Afegir una Nova Ruta

Crea un nou component anomenat ContactComponent.
Afegeix una nova ruta per al component ContactComponent amb el camí /contact.
Actualitza la navegació per incloure un enllaç a la nova ruta.

Solució

Crear el component ContactComponent:

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

@Component({
  selector: 'app-contact',
  template: `<h1>Contact</h1><p>This is the contact page.</p>`
})
export class ContactComponent { }

Afegir la nova ruta:

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

Actualitzar la navegació:

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

Resum

En aquesta secció, hem après com configurar rutes en una aplicació Angular. Hem vist com definir rutes, utilitzar el RouterOutlet i navegar entre diferents components. Aquestes habilitats són essencials per crear aplicacions Angular complexes i ben estructurades. En el proper tema, explorarem com treballar amb paràmetres de ruta per passar dades entre components.

Configuració de rutes

Objectius

Conceptes Clau

Passos per Configurar Rutes

Instal·lar el RouterModule

Definir les Rutes

Utilitzar el RouterOutlet

Navegar entre Rutes

Exemple Complet

app.module.ts

app.component.html

home.component.ts

about.component.ts

Exercicis Pràctics

Exercici 1: Afegir una Nova Ruta

Solució

Resum

Curs d'Angular

Mòdul 1: Introducció a Angular

Mòdul 2: Components d'Angular

Mòdul 3: Enllaç de dades i directives

Mòdul 4: Serveis i injecció de dependències

Mòdul 5: Enrutament i navegació

Mòdul 6: Formularis a Angular

Mòdul 7: Client HTTP i observables

Mòdul 8: Gestió d'estat

Mòdul 9: Proves a Angular

Mòdul 10: Conceptes avançats d'Angular

Mòdul 11: Desplegament i millors pràctiques