Creazione di un Servizio Personalizzato in Angular
Creazione di un Service
Angular offre un comando CLI pratico per generare rapidamente un service, predisponendo i file e le importazioni necessarie:
Dopo aver eseguito questo comando, Angular crea due file:
-
task.service.ts— il file effettivo del service; -
task.service.spec.ts— un file di test (può essere eliminato).
Ecco il contenuto iniziale di task.service.ts:
task-service.ts
Il decoratore @Injectable indica ad Angular che questo servizio può essere iniettato in altre classi.
La parte providedIn: 'root' significa che Angular registrerà automaticamente il servizio nel modulo root e ne creerà un'unica istanza per l'intera applicazione.
Singleton è un pattern di progettazione che garantisce che una classe abbia una sola istanza e fornisce un punto di accesso globale ad essa.
Il componente A, il componente B o qualsiasi altro componente — tutti riceveranno la stessa istanza del servizio. Questo è molto comodo perché consente di memorizzare dati condivisi (come una lista di attività) ed evitare la duplicazione della logica.
Ecco perché un servizio diventa la singola fonte di verità per una specifica parte della logica o dei dati dell'applicazione. Se sei curioso, puoi approfondire il pattern singleton in questo articolo.
Aggiunta della logica al servizio
Procediamo con la realizzazione della logica per il tuo servizio. Ecco cosa deve fare:
-
Memorizzare un elenco di attività;
-
Restituire l'elenco delle attività;
-
Eliminare attività;
-
Attivare/disattivare lo stato di completamento delle attività.
Per prima cosa, definiamo la struttura di un'attività creando un'interfaccia TypeScript:
task-interface.ts
Questa interfaccia aiuta a definire chiaramente la struttura di un'attività: include un id, un titolo e uno stato di completamento. Non hai ancora utilizzato le interfacce, ma aggiungerne una qui rende il codice più comprensibile e facile da gestire.
Ora costruiamo il servizio che gestisce il tuo elenco di attività:
task-service.ts
In questo esempio, i dati dei task sono memorizzati direttamente nel codice all'interno di un array privato tasks.
Per consentire ad altre parti dell'applicazione di accedere all'elenco dei task, viene utilizzato il metodo getTasks(). Questo restituisce una copia dell'array utilizzando la sintassi spread ([...]), che aiuta a proteggere i dati originali da modifiche accidentali.
Il metodo deleteTask(id: number) rimuove un task filtrando quello con l'ID corrispondente, aggiornando così l'elenco.
Un altro metodo importante è toggleTaskStatus(id: number). Questo trova il task tramite il suo ID e ne alterna lo stato di completamento: se il task era contrassegnato come completato (true), diventa incompleto (false), e viceversa.
Potresti riconoscere gran parte di questa logica dal tuo TaskListComponent. Ora, tutto è stato spostato in TaskService, il che aiuta a rendere i componenti più puliti e a mantenere la logica in un unico posto.
Questo servizio è ora la base che consente ai tuoi componenti di interagire con l'elenco delle attività — senza duplicare la logica.
1. Perché si crea un servizio in Angular?
2. Cosa significa providedIn: 'root' nel decoratore @Injectable?
3. Perché si restituisce [...this.tasks] invece di semplicemente this.tasks in getTasks()?
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.13Creazione di un Servizio Personalizzato in Angular
Scorri per mostrare il menu
Creazione di un Service
Angular offre un comando CLI pratico per generare rapidamente un service, predisponendo i file e le importazioni necessarie:
Dopo aver eseguito questo comando, Angular crea due file:
-
task.service.ts— il file effettivo del service; -
task.service.spec.ts— un file di test (può essere eliminato).
Ecco il contenuto iniziale di task.service.ts:
task-service.ts
Il decoratore @Injectable indica ad Angular che questo servizio può essere iniettato in altre classi.
La parte providedIn: 'root' significa che Angular registrerà automaticamente il servizio nel modulo root e ne creerà un'unica istanza per l'intera applicazione.
Singleton è un pattern di progettazione che garantisce che una classe abbia una sola istanza e fornisce un punto di accesso globale ad essa.
Il componente A, il componente B o qualsiasi altro componente — tutti riceveranno la stessa istanza del servizio. Questo è molto comodo perché consente di memorizzare dati condivisi (come una lista di attività) ed evitare la duplicazione della logica.
Ecco perché un servizio diventa la singola fonte di verità per una specifica parte della logica o dei dati dell'applicazione. Se sei curioso, puoi approfondire il pattern singleton in questo articolo.
Aggiunta della logica al servizio
Procediamo con la realizzazione della logica per il tuo servizio. Ecco cosa deve fare:
-
Memorizzare un elenco di attività;
-
Restituire l'elenco delle attività;
-
Eliminare attività;
-
Attivare/disattivare lo stato di completamento delle attività.
Per prima cosa, definiamo la struttura di un'attività creando un'interfaccia TypeScript:
task-interface.ts
Questa interfaccia aiuta a definire chiaramente la struttura di un'attività: include un id, un titolo e uno stato di completamento. Non hai ancora utilizzato le interfacce, ma aggiungerne una qui rende il codice più comprensibile e facile da gestire.
Ora costruiamo il servizio che gestisce il tuo elenco di attività:
task-service.ts
In questo esempio, i dati dei task sono memorizzati direttamente nel codice all'interno di un array privato tasks.
Per consentire ad altre parti dell'applicazione di accedere all'elenco dei task, viene utilizzato il metodo getTasks(). Questo restituisce una copia dell'array utilizzando la sintassi spread ([...]), che aiuta a proteggere i dati originali da modifiche accidentali.
Il metodo deleteTask(id: number) rimuove un task filtrando quello con l'ID corrispondente, aggiornando così l'elenco.
Un altro metodo importante è toggleTaskStatus(id: number). Questo trova il task tramite il suo ID e ne alterna lo stato di completamento: se il task era contrassegnato come completato (true), diventa incompleto (false), e viceversa.
Potresti riconoscere gran parte di questa logica dal tuo TaskListComponent. Ora, tutto è stato spostato in TaskService, il che aiuta a rendere i componenti più puliti e a mantenere la logica in un unico posto.
Questo servizio è ora la base che consente ai tuoi componenti di interagire con l'elenco delle attività — senza duplicare la logica.
1. Perché si crea un servizio in Angular?
2. Cosa significa providedIn: 'root' nel decoratore @Injectable?
3. Perché si restituisce [...this.tasks] invece di semplicemente this.tasks in getTasks()?
Grazie per i tuoi commenti!
