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

HOME

En aquest tema, aprendrem sobre les rutes fills a Angular. Les rutes fills permeten definir rutes dins d'altres rutes, creant una estructura jeràrquica que facilita la navegació en aplicacions complexes. Això és especialment útil quan es treballa amb components que tenen subcomponents o vistes anidades.

Objectius

Comprendre què són les rutes fills.
Aprendre a configurar rutes fills en una aplicació Angular.
Veure exemples pràctics de com utilitzar rutes fills.
Realitzar exercicis pràctics per reforçar els conceptes apresos.

Què són les rutes fills?

Les rutes fills són rutes que es defineixen dins d'altres rutes. Això permet crear una estructura de navegació jeràrquica. Per exemple, si tens una aplicació amb una secció d'usuari que té sub-seccions com "perfil" i "configuració", pots definir aquestes sub-seccions com a rutes fills de la ruta principal de l'usuari.

Configuració de rutes fills

Per configurar rutes fills, has de definir-les dins de la propietat children de la ruta principal. A continuació, es mostra un exemple de com configurar rutes fills en una aplicació Angular.

Exemple de configuració de rutes fills

Suposem que tenim una aplicació amb una secció d'usuari que té dues sub-seccions: "perfil" i "configuració". La configuració de les rutes seria la següent:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserComponent } from './user/user.component';
import { UserProfileComponent } from './user-profile/user-profile.component';
import { UserSettingsComponent } from './user-settings/user-settings.component';

const routes: Routes = [
  {
    path: 'user',
    component: UserComponent,
    children: [
      { path: 'profile', component: UserProfileComponent },
      { path: 'settings', component: UserSettingsComponent }
    ]
  }
];

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

En aquest exemple:

La ruta principal és user, que carrega el UserComponent.
Les rutes fills són profile i settings, que carreguen els components UserProfileComponent i UserSettingsComponent, respectivament.

Navegació entre rutes fills

Per navegar entre rutes fills, pots utilitzar el servei Router d'Angular o els enllaços de navegació (routerLink) en les plantilles.

Exemple d'enllaços de navegació

<!-- user.component.html -->
<nav>
  <a routerLink="profile">Perfil</a>
  <a routerLink="settings">Configuració</a>
</nav>
<router-outlet></router-outlet>

En aquest exemple, els enllaços de navegació permeten als usuaris navegar entre les sub-seccions "perfil" i "configuració".

Exercici pràctic

Objectiu

Crear una aplicació Angular amb una secció d'usuari que tingui dues sub-seccions: "perfil" i "configuració". Configurar les rutes fills i permetre la navegació entre aquestes sub-seccions.

Passos

Crear els components necessaris:
- UserComponent
- UserProfileComponent
- UserSettingsComponent
Configurar les rutes fills:
- Definir la ruta principal user i les rutes fills profile i settings.
Afegir enllaços de navegació:
- Afegir enllaços de navegació en la plantilla del UserComponent per permetre la navegació entre les sub-seccions.

Solució

1. Crear els components necessaris

ng generate component user
ng generate component user-profile
ng generate component user-settings

2. Configurar les rutes fills

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserComponent } from './user/user.component';
import { UserProfileComponent } from './user-profile/user-profile.component';
import { UserSettingsComponent } from './user-settings/user-settings.component';

const routes: Routes = [
  {
    path: 'user',
    component: UserComponent,
    children: [
      { path: 'profile', component: UserProfileComponent },
      { path: 'settings', component: UserSettingsComponent }
    ]
  }
];

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

3. Afegir enllaços de navegació

<!-- user.component.html -->
<nav>
  <a routerLink="profile">Perfil</a>
  <a routerLink="settings">Configuració</a>
</nav>
<router-outlet></router-outlet>

Resum

En aquest tema, hem après què són les rutes fills i com configurar-les en una aplicació Angular. Hem vist un exemple pràctic de configuració de rutes fills i hem realitzat un exercici per reforçar els conceptes apresos. Les rutes fills són una eina poderosa per organitzar la navegació en aplicacions Angular complexes, permetent una estructura jeràrquica clara i fàcil de gestionar.

Rutes fills

Objectius

Què són les rutes fills?

Configuració de rutes fills

Exemple de configuració de rutes fills

Navegació entre rutes fills

Exemple d'enllaços de navegació

Exercici pràctic

Objectiu

Passos

Solució

1. Crear els components necessaris

2. Configurar les rutes fills

3. Afegir enllaços de navegació

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