Iniezione di Servizi in un Componente
Hai creato il TaskService, che si occupa di memorizzare e gestire l'elenco delle attività. Tuttavia, il servizio da solo non interagisce con l'interfaccia utente. Per ottenere i dati dal servizio nel template del componente, è necessario iniettare il servizio nel componente corrispondente.
Ora vedrai come Angular collega automaticamente i servizi ai componenti utilizzando la Dependency Injection (DI) e come il servizio funziona all'interno del componente.
Che cos'è la Dependency Injection?
Dependency Injection (DI) è un pattern di progettazione in cui Angular inietta automaticamente le dipendenze necessarie (come i servizi) nel costruttore di un componente.
Grazie alla DI, i componenti non creano istanze dei servizi autonomamente — ricevono semplicemente un'istanza già creata. Angular si occupa di fornire gli oggetti necessari a chiunque ne abbia bisogno.
Questo è possibile perché il servizio è decorato con:
@Injectable({
providedIn: 'root'
})
Questo decoratore indica ad Angular di creare un'unica istanza (singleton) del servizio per l'intera applicazione e di renderla disponibile per la DI.
Iniezione del servizio in un componente
Ora, inseriamo il TaskService all'interno del TaskListComponent così che possa ottenere e gestire l'elenco delle attività.
Ecco come appare il codice del componente:
task-list.ts
Importiamo il TaskService, l'interfaccia Task e altri componenti e moduli necessari per il template.
Nel costruttore del componente, aggiungiamo il servizio tramite Dependency Injection:
task-list.ts
Lo si memorizza come campo privato da utilizzare nei metodi del componente. Subito dopo la creazione del componente (all'interno del costruttore), otteniamo l'elenco dei task. Questo elenco viene poi utilizzato nel template HTML.
I metodi deleteTask e toggleStatus richiamano le funzioni del servizio per eliminare un'attività o modificarne lo stato, quindi aggiornano l'array locale tasks affinché l'interfaccia utente rifletta le modifiche.
Questo approccio mantiene il componente semplice: non conosce come i dati sono memorizzati o gestiti — si limita a chiedere al servizio di aggiornarli. Questa separazione delle responsabilità permette ai componenti di gestire la vista e ai servizi di gestire i dati.
1. Che cos'è l'Injection delle Dipendenze (DI) in Angular?
2. Perché aggiorniamo this.tasks dopo aver chiamato deleteTask o toggleStatus?
Grazie per i tuoi commenti!
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
Awesome!
Completion rate improved to 3.13Iniezione di Servizi in un Componente
Scorri per mostrare il menu
Hai creato il TaskService, che si occupa di memorizzare e gestire l'elenco delle attività. Tuttavia, il servizio da solo non interagisce con l'interfaccia utente. Per ottenere i dati dal servizio nel template del componente, è necessario iniettare il servizio nel componente corrispondente.
Ora vedrai come Angular collega automaticamente i servizi ai componenti utilizzando la Dependency Injection (DI) e come il servizio funziona all'interno del componente.
Che cos'è la Dependency Injection?
Dependency Injection (DI) è un pattern di progettazione in cui Angular inietta automaticamente le dipendenze necessarie (come i servizi) nel costruttore di un componente.
Grazie alla DI, i componenti non creano istanze dei servizi autonomamente — ricevono semplicemente un'istanza già creata. Angular si occupa di fornire gli oggetti necessari a chiunque ne abbia bisogno.
Questo è possibile perché il servizio è decorato con:
@Injectable({
providedIn: 'root'
})
Questo decoratore indica ad Angular di creare un'unica istanza (singleton) del servizio per l'intera applicazione e di renderla disponibile per la DI.
Iniezione del servizio in un componente
Ora, inseriamo il TaskService all'interno del TaskListComponent così che possa ottenere e gestire l'elenco delle attività.
Ecco come appare il codice del componente:
task-list.ts
Importiamo il TaskService, l'interfaccia Task e altri componenti e moduli necessari per il template.
Nel costruttore del componente, aggiungiamo il servizio tramite Dependency Injection:
task-list.ts
Lo si memorizza come campo privato da utilizzare nei metodi del componente. Subito dopo la creazione del componente (all'interno del costruttore), otteniamo l'elenco dei task. Questo elenco viene poi utilizzato nel template HTML.
I metodi deleteTask e toggleStatus richiamano le funzioni del servizio per eliminare un'attività o modificarne lo stato, quindi aggiornano l'array locale tasks affinché l'interfaccia utente rifletta le modifiche.
Questo approccio mantiene il componente semplice: non conosce come i dati sono memorizzati o gestiti — si limita a chiedere al servizio di aggiornarli. Questa separazione delle responsabilità permette ai componenti di gestire la vista e ai servizi di gestire i dati.
1. Che cos'è l'Injection delle Dipendenze (DI) in Angular?
2. Perché aggiorniamo this.tasks dopo aver chiamato deleteTask o toggleStatus?
Grazie per i tuoi commenti!
