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 richieste (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 funziona 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, iniettiamo il TaskService nel TaskListComponent così che possa ottenere l'elenco delle attività e interagire con esso.
Ecco come appare il codice del componente:
task-list.ts
Importazione di TaskService, dell'interfaccia Task e degli altri componenti e moduli necessari per il template.
Nel costruttore del componente, aggiunta del servizio tramite Dependency Injection:
task-list.ts
Memorizzazione come campo privato per l'utilizzo nei metodi del componente. Subito dopo la creazione del componente (all'interno del costruttore), recupero dell'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. Questo separa le responsabilità: i componenti gestiscono la vista, i servizi gestiscono 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 richieste (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 funziona 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, iniettiamo il TaskService nel TaskListComponent così che possa ottenere l'elenco delle attività e interagire con esso.
Ecco come appare il codice del componente:
task-list.ts
Importazione di TaskService, dell'interfaccia Task e degli altri componenti e moduli necessari per il template.
Nel costruttore del componente, aggiunta del servizio tramite Dependency Injection:
task-list.ts
Memorizzazione come campo privato per l'utilizzo nei metodi del componente. Subito dopo la creazione del componente (all'interno del costruttore), recupero dell'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. Questo separa le responsabilità: i componenti gestiscono la vista, i servizi gestiscono 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!
