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

HOME

Introducció

En Angular, la injecció de dependències és una característica fonamental que permet als desenvolupadors injectar serveis en components, directives, pipes i altres serveis. Les injeccions jeràrquiques són una extensió d'aquest concepte, permetent una gestió més flexible i escalable dels serveis dins d'una aplicació Angular.

Objectius

Comprendre què són les injeccions jeràrquiques.
Aprendre a configurar i utilitzar injeccions jeràrquiques en una aplicació Angular.
Veure exemples pràctics de com les injeccions jeràrquiques poden millorar la modularitat i la reutilització del codi.

Què són les injeccions jeràrquiques?

Les injeccions jeràrquiques permeten definir diferents nivells d'injectors en una aplicació Angular. Això significa que es poden tenir serveis que només són accessibles dins d'un mòdul, component o directiva específica, en lloc de ser globals per a tota l'aplicació.

Avantatges de les injeccions jeràrquiques

Modularitat: Permet encapsular serveis dins de mòduls o components específics.
Reutilització: Facilita la reutilització de serveis en diferents parts de l'aplicació.
Optimització de recursos: Redueix la càrrega de memòria en limitar l'abast dels serveis.

Configuració d'injeccions jeràrquiques

Exemple bàsic

Suposem que tenim un servei LoggingService que volem utilitzar només dins d'un component específic.

Crear el servei:

// logging.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Aquest servei és global per defecte
})
export class LoggingService {
  log(message: string) {
    console.log(message);
  }
}

Configurar el servei en un component:

// app.component.ts
import { Component } from '@angular/core';
import { LoggingService } from './logging.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [LoggingService] // El servei només és accessible dins d'aquest component
})
export class AppComponent {
  constructor(private loggingService: LoggingService) {
    this.loggingService.log('AppComponent initialized');
  }
}

Injeccions jeràrquiques en mòduls

També es poden definir serveis a nivell de mòdul, fent-los accessibles només dins d'aquest mòdul.

Crear un mòdul:

// feature.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureComponent } from './feature.component';
import { LoggingService } from './logging.service';

@NgModule({
  declarations: [FeatureComponent],
  imports: [CommonModule],
  providers: [LoggingService] // El servei és accessible només dins d'aquest mòdul
})
export class FeatureModule { }

Utilitzar el servei en un component del mòdul:

// feature.component.ts
import { Component } from '@angular/core';
import { LoggingService } from './logging.service';

@Component({
  selector: 'app-feature',
  templateUrl: './feature.component.html',
  styleUrls: ['./feature.component.css']
})
export class FeatureComponent {
  constructor(private loggingService: LoggingService) {
    this.loggingService.log('FeatureComponent initialized');
  }
}

Exercici pràctic

Objectiu

Crear un servei UserService que només sigui accessible dins d'un mòdul UserModule i utilitzar-lo en un component UserComponent.

Passos

Crear el servei UserService:

// user.service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class UserService {
  getUser() {
    return { name: 'John Doe', age: 30 };
  }
}

Crear el mòdul UserModule:

// user.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserComponent } from './user.component';
import { UserService } from './user.service';

@NgModule({
  declarations: [UserComponent],
  imports: [CommonModule],
  providers: [UserService] // El servei és accessible només dins d'aquest mòdul
})
export class UserModule { }

Crear el component UserComponent:

// user.component.ts
import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent {
  user: any;

  constructor(private userService: UserService) {
    this.user = this.userService.getUser();
  }
}

Utilitzar el component UserComponent en l'aplicació:

<!-- app.component.html -->
<app-user></app-user>

Solució

Si has seguit els passos correctament, hauries de veure la informació de l'usuari renderitzada en el component UserComponent.

Resum

Les injeccions jeràrquiques en Angular permeten una gestió més flexible i escalable dels serveis dins d'una aplicació. En encapsular serveis dins de mòduls o components específics, es millora la modularitat, la reutilització del codi i l'optimització de recursos. Aquesta tècnica és especialment útil en aplicacions grans i complexes on la gestió eficient dels serveis és crucial.

Injeccions jeràrquiques

Introducció

Objectius

Què són les injeccions jeràrquiques?

Avantatges de les injeccions jeràrquiques

Configuració d'injeccions jeràrquiques

Exemple bàsic

Injeccions jeràrquiques en mòduls

Exercici pràctic

Objectiu

Passos

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