El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Injecció de dependències

Següent ►
►

Introducció

L'injecció de dependències (DI) és un patró de disseny fonamental en Angular que permet gestionar les dependències entre els diferents components, serveis i altres entitats de l'aplicació. Aquest patró facilita la creació de codi modular, reutilitzable i fàcil de mantenir.

Conceptes clau

  • Dependència: Un objecte que una classe necessita per funcionar.
  • Injecció de dependències: El procés de proporcionar les dependències necessàries a una classe des de fora, en lloc de crear-les dins de la classe.
  • Injector: Un objecte que sap com crear i proporcionar les dependències.

Com funciona la injecció de dependències en Angular

Angular utilitza un sistema d'injectors jeràrquics per gestionar les dependències. Quan una classe necessita una dependència, Angular busca aquesta dependència en l'injector i la proporciona a la classe.

Passos per utilitzar la injecció de dependències

  1. Definir un servei: Crear una classe de servei que contingui la lògica que es vol compartir.
  2. Proveir el servei: Registrar el servei en un injector perquè estigui disponible per a la injecció.
  3. Injectar el servei: Utilitzar el servei en una classe (component, altre servei, etc.) mitjançant el constructor.

Exemple pràctic

  1. Definir un servei

Creem un servei anomenat DataService que proporciona dades.

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private data: string[] = ['Angular', 'React', 'Vue'];

  getData(): string[] {
    return this.data;
  }
}

  1. Proveir el servei

En aquest cas, hem utilitzat el decorador @Injectable amb l'opció providedIn: 'root', que fa que el servei estigui disponible a nivell global de l'aplicació.

  1. Injectar el servei

Ara, utilitzem el servei DataService en un component.

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>Frameworks de JavaScript</h1>
    <ul>
      <li *ngFor="let item of data">{{ item }}</li>
    </ul>
  `
})
export class AppComponent implements OnInit {
  data: string[];

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.data = this.dataService.getData();
  }
}

Exercici pràctic

Objectiu

Crear un servei que proporcioni una llista de llibres i utilitzar aquest servei en un component per mostrar la llista.

Passos

  1. Crear un servei BookService que contingui una llista de llibres.
  2. Proveir el servei a nivell global.
  3. Injectar el servei en un component i mostrar la llista de llibres.

Solució

1. Crear el servei BookService

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

@Injectable({
  providedIn: 'root'
})
export class BookService {
  private books: string[] = ['1984', 'Brave New World', 'Fahrenheit 451'];

  getBooks(): string[] {
    return this.books;
  }
}

2. Injectar el servei en un component

// book-list.component.ts
import { Component, OnInit } from '@angular/core';
import { BookService } from './book.service';

@Component({
  selector: 'app-book-list',
  template: `
    <h1>Llibres</h1>
    <ul>
      <li *ngFor="let book of books">{{ book }}</li>
    </ul>
  `
})
export class BookListComponent implements OnInit {
  books: string[];

  constructor(private bookService: BookService) {}

  ngOnInit() {
    this.books = this.bookService.getBooks();
  }
}

Errors comuns i consells

  • No oblidar el decorador @Injectable: Sense aquest decorador, Angular no podrà injectar el servei.
  • Proveir el servei correctament: Assegura't que el servei estigui proveït a nivell global o en el mòdul correcte.
  • Injectar el servei en el constructor: La injecció de dependències es fa a través del constructor de la classe.

Resum

L'injecció de dependències és un patró de disseny que facilita la gestió de dependències en una aplicació Angular. Hem vist com definir un servei, proveir-lo i injectar-lo en un component. Aquest patró ajuda a mantenir el codi modular i fàcil de mantenir, permetent una millor organització i reutilització del codi.

◄ Anterior
◄
Següent ►
►

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

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats