Introducció

En Angular, la injecció de dependències és un concepte fonamental que permet als desenvolupadors injectar serveis en components, directives, pipes i altres serveis. Les injeccions jeràrquiques són una característica avançada que permet definir diferents nivells de proveïdors de serveis, oferint una gran flexibilitat en la manera com es gestionen les dependències.

Conceptes clau

Jerarquia de proveïdors

Proveïdors a nivell de mòdul: Els serveis declarats en el proveïdor d'un mòdul són accessibles per a tots els components, directives i serveis dins d'aquest mòdul.
Proveïdors a nivell de component: Els serveis declarats en el proveïdor d'un component són accessibles només per a aquest component i els seus fills.

Beneficis de les injeccions jeràrquiques

Escalabilitat: Permet gestionar serveis de manera més eficient en aplicacions grans.
Encapsulació: Els serveis poden ser encapsulats dins de components específics, evitant conflictes amb altres parts de l'aplicació.
Optimització de recursos: Els serveis només es creen quan són necessaris, reduint l'ús de memòria.

Exemples pràctics

Proveïdors a nivell de mòdul

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyService } from './my.service';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [MyService], // Proveïdor a nivell de mòdul
  bootstrap: [AppComponent]
})
export class AppModule { }

Proveïdors a nivell de component

// my.component.ts
import { Component } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'app-my',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css'],
  providers: [MyService] // Proveïdor a nivell de component
})
export class MyComponent {
  constructor(private myService: MyService) { }
}

Jerarquia de proveïdors

// parent.component.ts
import { Component } from '@angular/core';
import { ParentService } from './parent.service';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css'],
  providers: [ParentService] // Proveïdor a nivell de component
})
export class ParentComponent {
  constructor(private parentService: ParentService) { }
}

// child.component.ts
import { Component } from '@angular/core';
import { ChildService } from './child.service';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css'],
  providers: [ChildService] // Proveïdor a nivell de component
})
export class ChildComponent {
  constructor(private childService: ChildService) { }
}

En aquest exemple, ParentComponent i ChildComponent tenen els seus propis serveis, encapsulant les seves dependències i evitant conflictes.

Exercicis pràctics

Exercici 1: Crear un servei a nivell de mòdul

Crea un nou servei anomenat LoggingService.
Declara LoggingService com a proveïdor a nivell de mòdul en AppModule.
Utilitza LoggingService en un component per registrar missatges a la consola.

Solució

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

@Injectable({
  providedIn: 'root'
})
export class LoggingService {
  log(message: string) {
    console.log(message);
  }
}

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LoggingService } from './logging.service';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [LoggingService], // Proveïdor a nivell de mòdul
  bootstrap: [AppComponent]
})
export class AppModule { }

// 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']
})
export class AppComponent {
  constructor(private loggingService: LoggingService) {
    this.loggingService.log('AppComponent initialized');
  }
}

Exercici 2: Crear un servei a nivell de component

Crea un nou servei anomenat UserService.
Declara UserService com a proveïdor a nivell de component en un component anomenat UserComponent.
Utilitza UserService en UserComponent per gestionar informació d'usuari.

Solució

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

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

// 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'],
  providers: [UserService] // Proveïdor a nivell de component
})
export class UserComponent {
  user: any;

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

Resum

Les injeccions jeràrquiques en Angular permeten una gestió més flexible i eficient dels serveis dins d'una aplicació. Comprendre com funcionen els proveïdors a diferents nivells (mòdul i component) és essencial per construir aplicacions escalables i ben organitzades. Amb la pràctica, podràs aprofitar al màxim aquesta característica per optimitzar el rendiment i la mantenibilitat del teu codi.

Injeccions jeràrquiques

Introducció

Conceptes clau

Jerarquia de proveïdors

Beneficis de les injeccions jeràrquiques

Exemples pràctics

Proveïdors a nivell de mòdul

Proveïdors a nivell de component

Jerarquia de proveïdors

Exercicis pràctics

Exercici 1: Crear un servei a nivell de mòdul

Solució

Exercici 2: Crear un servei a nivell de component

Solució

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