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

HOME

La càrrega mandrosa (lazy loading) és una tècnica d'optimització que permet carregar mòduls només quan són necessaris, en lloc de carregar-los tots al començament. Això pot millorar significativament el rendiment de l'aplicació, especialment en aplicacions grans amb molts mòduls.

Conceptes Clau

Càrrega mandrosa: Carregar mòduls només quan es necessiten.
Rutes: Definir rutes per als mòduls que es carregaran mandrosament.
Mòduls: Dividir l'aplicació en mòduls més petits i independents.

Avantatges de la Càrrega Mandrosa

Millora del Rendiment: Redueix el temps de càrrega inicial de l'aplicació.
Optimització de Recursos: Només es carreguen els recursos necessaris en el moment adequat.
Escalabilitat: Facilita la gestió i manteniment de l'aplicació dividint-la en mòduls més petits.

Configuració de la Càrrega Mandrosa

Pas 1: Crear un Mòdul

Primer, crearem un mòdul que volem carregar mandrosament. Suposem que tenim un mòdul anomenat AdminModule.

ng generate module admin --route admin --module app.module

Aquest comandament crea un mòdul AdminModule i configura la ruta per carregar-lo mandrosament.

Pas 2: Configurar les Rutes

En el fitxer app-routing.module.ts, veurem una configuració similar a aquesta:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
  }
];

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

Pas 3: Definir les Rutes del Mòdul

En el fitxer admin-routing.module.ts, definirem les rutes específiques per al mòdul AdminModule.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AdminComponent } from './admin.component';

const routes: Routes = [
  { path: '', component: AdminComponent }
];

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

Pas 4: Crear el Component

Crearem un component per al mòdul AdminModule.

ng generate component admin/admin

Pas 5: Importar el Mòdul de Rutes

En el fitxer admin.module.ts, importarem el mòdul de rutes.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdminRoutingModule } from './admin-routing.module';
import { AdminComponent } from './admin.component';

@NgModule({
  declarations: [AdminComponent],
  imports: [
    CommonModule,
    AdminRoutingModule
  ]
})
export class AdminModule { }

Exemple Complet

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
  }
];

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

admin-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AdminComponent } from './admin.component';

const routes: Routes = [
  { path: '', component: AdminComponent }
];

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

admin.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdminRoutingModule } from './admin-routing.module';
import { AdminComponent } from './admin.component';

@NgModule({
  declarations: [AdminComponent],
  imports: [
    CommonModule,
    AdminRoutingModule
  ]
})
export class AdminModule { }

admin.component.ts

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

@Component({
  selector: 'app-admin',
  template: `<h1>Admin Works!</h1>`,
  styles: []
})
export class AdminComponent { }

Exercici Pràctic

Crea un nou mòdul anomenat UserModule que es carregui mandrosament.
Defineix una ruta per al mòdul UserModule.
Crea un component dins del UserModule anomenat UserComponent.
Configura les rutes per al UserModule per mostrar el UserComponent.

Solució

Comandaments per crear el mòdul i el component

ng generate module user --route user --module app.module
ng generate component user/user

user-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserComponent } from './user.component';

const routes: Routes = [
  { path: '', component: UserComponent }
];

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

user.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserRoutingModule } from './user-routing.module';
import { UserComponent } from './user.component';

@NgModule({
  declarations: [UserComponent],
  imports: [
    CommonModule,
    UserRoutingModule
  ]
})
export class UserModule { }

user.component.ts

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

@Component({
  selector: 'app-user',
  template: `<h1>User Works!</h1>`,
  styles: []
})
export class UserComponent { }

Conclusió

La càrrega mandrosa de mòduls és una tècnica poderosa per optimitzar el rendiment de les aplicacions Angular. Dividint l'aplicació en mòduls més petits i carregant-los només quan són necessaris, podem reduir el temps de càrrega inicial i millorar l'experiència de l'usuari. Amb la pràctica, aquesta tècnica esdevé una part essencial del desenvolupament d'aplicacions Angular escalables i eficients.

Càrrega mandrosa de mòduls

Conceptes Clau

Avantatges de la Càrrega Mandrosa

Configuració de la Càrrega Mandrosa

Pas 1: Crear un Mòdul

Pas 2: Configurar les Rutes

Pas 3: Definir les Rutes del Mòdul

Pas 4: Crear el Component

Pas 5: Importar el Mòdul de Rutes

Exemple Complet

app-routing.module.ts

admin-routing.module.ts

admin.module.ts

admin.component.ts

Exercici Pràctic

Solució

Comandaments per crear el mòdul i el component

user-routing.module.ts

user.module.ts

user.component.ts

Conclusió

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