Creazione di un Servizio Personalizzato in Angular
Prima di generare un servizio, è necessario creare una cartella dedicata. Esegui il seguente comando:
Questo comando creerà una cartella services all'interno di src/app e vi accederà immediatamente, permettendoti di iniziare subito a lavorare con i tuoi servizi.
Creazione di un servizio
Angular mette a disposizione un comando CLI pratico per generare rapidamente un servizio, predisponendo i file e le importazioni necessarie:
Dopo aver eseguito questo comando, Angular crea due file:
-
task.service.ts— il file effettivo del servizio; -
task.service.spec.ts— un file di test (puoi eliminarlo).
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.
Componente A, Componente B o qualsiasi altro componente — tutti riceveranno la stessa istanza del servizio. Questo è estremamente conveniente perché puoi memorizzare dati condivisi (come una lista di attività) ed evitare di duplicare la logica.
Ecco perché un servizio diventa l'unica fonte attendibile per una specifica parte della logica o dei dati della tua 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 servizio. Ecco cosa deve fare:
-
Memorizzare una lista di attività;
-
Restituire la lista delle attività;
-
Eliminare attività;
-
Cambiare lo stato di completamento delle attività.
Per prima cosa, definiamo come è strutturata 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ù facile da comprendere e gestire.
Ora costruiamo il servizio che gestisce la tua lista di attività:
task-service.ts
In questo esempio, i dati delle attività sono memorizzati direttamente nel codice all'interno di un array privato tasks.
Per consentire ad altre parti dell'applicazione di accedere all'elenco delle attività, 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'attività filtrando quella con l'ID corrispondente, aggiornando così l'elenco.
Un altro metodo importante è toggleTaskStatus(id: number). Questo trova l'attività tramite il suo ID e ne alterna lo stato di completamento: se l'attività era contrassegnata come completata (true), diventa incompleta (false), e viceversa.
Potresti riconoscere gran parte di questa logica dal tuo TaskListComponent. Ora, tutto è stato spostato in TaskService, il che aiuta a semplificare i tuoi componenti 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 solo 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
Prima di generare un servizio, è necessario creare una cartella dedicata. Esegui il seguente comando:
Questo comando creerà una cartella services all'interno di src/app e vi accederà immediatamente, permettendoti di iniziare subito a lavorare con i tuoi servizi.
Creazione di un servizio
Angular mette a disposizione un comando CLI pratico per generare rapidamente un servizio, predisponendo i file e le importazioni necessarie:
Dopo aver eseguito questo comando, Angular crea due file:
-
task.service.ts— il file effettivo del servizio; -
task.service.spec.ts— un file di test (puoi eliminarlo).
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.
Componente A, Componente B o qualsiasi altro componente — tutti riceveranno la stessa istanza del servizio. Questo è estremamente conveniente perché puoi memorizzare dati condivisi (come una lista di attività) ed evitare di duplicare la logica.
Ecco perché un servizio diventa l'unica fonte attendibile per una specifica parte della logica o dei dati della tua 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 servizio. Ecco cosa deve fare:
-
Memorizzare una lista di attività;
-
Restituire la lista delle attività;
-
Eliminare attività;
-
Cambiare lo stato di completamento delle attività.
Per prima cosa, definiamo come è strutturata 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ù facile da comprendere e gestire.
Ora costruiamo il servizio che gestisce la tua lista di attività:
task-service.ts
In questo esempio, i dati delle attività sono memorizzati direttamente nel codice all'interno di un array privato tasks.
Per consentire ad altre parti dell'applicazione di accedere all'elenco delle attività, 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'attività filtrando quella con l'ID corrispondente, aggiornando così l'elenco.
Un altro metodo importante è toggleTaskStatus(id: number). Questo trova l'attività tramite il suo ID e ne alterna lo stato di completamento: se l'attività era contrassegnata come completata (true), diventa incompleta (false), e viceversa.
Potresti riconoscere gran parte di questa logica dal tuo TaskListComponent. Ora, tutto è stato spostato in TaskService, il che aiuta a semplificare i tuoi componenti 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 solo this.tasks in getTasks()?
Grazie per i tuoi commenti!
