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

HOME

En aquest tema, aprendrem com configurar i utilitzar rutes fills en una aplicació Angular. Les rutes fills permeten crear una estructura de navegació jeràrquica, on una ruta principal pot tenir subrutes associades. Això és especialment útil per a aplicacions complexes amb múltiples nivells de navegació.

Objectius

Entendre què són les rutes fills i per què són útils.
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 subrutes que es defineixen dins d'una ruta principal. Això permet crear una estructura de navegació jeràrquica. Per exemple, si tens una aplicació amb una secció d'usuari, pots tenir una ruta principal per a l'usuari i subrutes per a les diferents pàgines dins d'aquesta secció, com ara el perfil, les configuracions, etc.

Configuració de rutes fills

Pas 1: Definir les rutes fills

Primer, definirem les rutes fills en el fitxer de configuració de rutes. Suposem que tenim una aplicació amb una secció d'usuari que té dues subrutes: perfil i configuracions.

// 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/user-profile/user-profile.component';
import { UserSettingsComponent } from './user/user-settings/user-settings.component';

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

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

Pas 2: Crear els components

Assegura't de tenir els components necessaris creats. En aquest exemple, necessitem UserComponent, UserProfileComponent i UserSettingsComponent.

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

Pas 3: Configurar les plantilles

Configura les plantilles dels components per mostrar el contingut adequat. Per exemple, en el component UserComponent, afegeix un <router-outlet> per carregar les subrutes.

<!-- user.component.html -->
<h2>User Section</h2>
<nav>
  <a routerLink="profile">Profile</a>
  <a routerLink="settings">Settings</a>
</nav>
<router-outlet></router-outlet>

Exemple pràctic

Suposem que volem navegar a la pàgina de perfil de l'usuari. La URL serà http://localhost:4200/user/profile. Quan l'usuari navega a aquesta URL, el component UserComponent es carrega primer, i després el component UserProfileComponent es carrega dins del <router-outlet> del UserComponent.

Exercici pràctic

Exercici 1: Afegir una nova subruta

Afegeix una nova subruta anomenada orders dins de la secció d'usuari.
Crea un nou component UserOrdersComponent.
Configura la ruta i la plantilla per mostrar una llista d'ordres de l'usuari.

Solució

// app-routing.module.ts
import { UserOrdersComponent } from './user/user-orders/user-orders.component';

const routes: Routes = [
  {
    path: 'user',
    component: UserComponent,
    children: [
      { path: 'profile', component: UserProfileComponent },
      { path: 'settings', component: UserSettingsComponent },
      { path: 'orders', component: UserOrdersComponent }
    ]
  },
  { path: '', redirectTo: '/user', pathMatch: 'full' }
];

ng generate component user/user-orders

<!-- user.component.html -->
<h2>User Section</h2>
<nav>
  <a routerLink="profile">Profile</a>
  <a routerLink="settings">Settings</a>
  <a routerLink="orders">Orders</a>
</nav>
<router-outlet></router-outlet>

<!-- user-orders.component.html -->
<h3>User Orders</h3>
<ul>
  <li>Order 1</li>
  <li>Order 2</li>
  <li>Order 3</li>
</ul>

Errors comuns i consells

Error: No matching route: Assegura't que les rutes estan correctament definides i que els components existeixen.
Error: Cannot find module: Verifica que els camins d'importació dels components són correctes.
Consell: Utilitza el mòdul RouterModule per a la configuració de rutes i assegura't d'importar-lo correctament en el mòdul principal de l'aplicació.

Resum

En aquesta secció, hem après què són les rutes fills i com configurar-les en una aplicació Angular. Hem vist un exemple pràctic de com definir rutes fills i com utilitzar el component <router-outlet> per carregar subrutes. També hem realitzat un exercici pràctic per reforçar els conceptes apresos. Ara estàs preparat per utilitzar rutes fills en les teves aplicacions Angular per crear una navegació jeràrquica i organitzada.

Rutes fills

Objectius

Què són les rutes fills?

Configuració de rutes fills

Pas 1: Definir les rutes fills

Pas 2: Crear els components

Pas 3: Configurar les plantilles

Exemple pràctic

Exercici pràctic

Exercici 1: Afegir una nova subruta

Solució

Errors comuns i consells

Resum

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