Dependency Injection in Angular

La Dependency Injection in Angular consente di iniettare dipendenze nel componente o nella classe. In questa guida impareremo cos’è la Dependency Injection in Angular e come iniettare una dipendenza in un Componente o in una classe.
Questa guida fa parte di Angular: la guida definitiva

Cos’è una dipendenza in Angular

Ho creato un ProductService nella guida dedicata ai servizi in Angular. AppComponent dipende dal ProductService per fornire l’elenco dei prodotti da visualizzare. In breve, AppComponent ha una dipendenza, questa dipendenza è appunto ProductService.

Cos’è una Dependency Injection in Angular

Diamo un’occhiata al ProductService, che ho creato nella guida ai servizi in Angular.
Il servizio restituisce i prodotti quando viene invocato il metodo getProduct.

import {Prodotto} from './Prodotto'
  
export class ProdottoService{
  
    public  getProdotti() {
  
        let prodotti:Prodotto[];
  
        prodotti=[
            new Prodotto(1,'Matita',1€),
            new Prodotto(2,'Gomma',1€),
            new Prodotto(3,'Penna',1€),
        ]
  
        return prodotti;               
    }
}

Ho creato un’istanza del servizio direttamente nel componente come mostrato di seguito.

import { Component } from '@angular/core';
  
import { ProdottoService } from './prodotto.service';
import { Prodotto } from './prodotto.model';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
  
export class AppComponent
{
  
   prodotti:Prodotto[];
   prodottoService;
  
   constructor(){
     this.prodottoService=new ProdottoService();
   }
  
   getProdotti() {
      
     this.prodotti=this.prodottoService.getProdotti();
   }
   
}

L’istanza del servizio è locale al componente.