El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Configuració de rutes

Següent ►
►

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

  • Entendre el concepte de rutes en Angular.
  • Configurar rutes bàsiques en una aplicació Angular.
  • Utilitzar el mòdul RouterModule per gestionar la navegació.
  • Crear enllaços de navegació utilitzant la directiva routerLink.

Conceptes Clau

Què és una ruta?

Una ruta en Angular és una associació entre una URL i un component. Quan l'usuari navega a una URL específica, Angular carrega el component associat a aquesta URL.

Mòdul RouterModule

El mòdul RouterModule proporciona les eines necessàries per configurar i gestionar les rutes en una aplicació Angular. Aquest mòdul s'importa des del paquet @angular/router.

Configuració de rutes bàsiques

Pas 1: Instal·lació del mòdul de rutes

Primer, assegura't que el mòdul de rutes està instal·lat en el teu projecte Angular. Normalment, aquest mòdul ja està inclòs en les noves aplicacions Angular creades amb Angular CLI.

Pas 2: Definició de les rutes

Defineix les rutes en el fitxer de mòdul principal (normalment app.module.ts o un mòdul de rutes dedicat).

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

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

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Pas 3: Importació del mòdul de rutes

Importa el mòdul de rutes en el mòdul principal de l'aplicació (app.module.ts).

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

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

Pas 4: Creació de components

Crea els components que es mostraran quan l'usuari navegui a les rutes definides.

// 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>Learn more about us on this page.</p>`
})
export class AboutComponent { }

Pas 5: Utilització de routerLink per a la navegació

Utilitza la directiva routerLink en les plantilles per crear enllaços de navegació.

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

Explicació del codi

  • Definició de rutes: Hem definit dues rutes: una per a la pàgina d'inici (HomeComponent) i una altra per a la pàgina "About" (AboutComponent).
  • Importació del mòdul de rutes: Hem importat RouterModule i Routes des de @angular/router i hem configurat les rutes utilitzant RouterModule.forRoot(routes).
  • Creació de components: Hem creat dos components senzills (HomeComponent i AboutComponent) que es mostraran quan l'usuari navegui a les rutes corresponents.
  • Navegació: Hem utilitzat la directiva routerLink per crear enllaços de navegació en la plantilla principal (app.component.html). El component router-outlet actua com a contenidor per als components que es carreguen en funció de la ruta actual.

Exercici Pràctic

Exercici

  1. Afegeix una nova ruta per a un component "Contact" que mostri un missatge de contacte.
  2. Crea el component "Contact".
  3. Afegeix un enllaç de navegació per a la pàgina de contacte en la plantilla principal.

Solució

Pas 1: Definició de la nova ruta

// app-routing.module.ts
import { ContactComponent } from './contact/contact.component';

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

Pas 2: Creació del component "Contact"

// contact.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-contact',
  template: `<h1>Contact</h1><p>Contact us at [email protected]</p>`
})
export class ContactComponent { }

Pas 3: Afegeix l'enllaç de navegació

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

Resum

En aquesta secció, hem après com configurar rutes bàsiques en una aplicació Angular. Hem vist com definir rutes, crear components associats a aquestes rutes i utilitzar la directiva routerLink per a la navegació. Aquestes habilitats són fonamentals per crear aplicacions Angular amb múltiples vistes i una navegació fluida.

◄ Anterior
◄
Següent ►
►

Curs d'Angular 2+

Mòdul 1: Introducció a Angular

Mòdul 2: Conceptes bàsics de TypeScript

Mòdul 3: Components i plantilles

Mòdul 4: Directives i pipes

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

Mòdul 6: Enrutament i navegació

Mòdul 7: Formularis en Angular

Mòdul 8: Client HTTP i observables

Mòdul 9: Gestió d'estat

Mòdul 10: Proves en Angular

Mòdul 11: Temes avançats

Mòdul 12: Desplegament i millors pràctiques

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats