Angular Academy · Lezione

Servizi e Injectable

Crei servizi injectable per la logica condivisa.

Servizi e Injectable è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Servizi e Injectable

Un servizio è una classe che contiene logica o stato riutilizzabili, come il recupero dei dati o uno store condiviso. Angular crea e condivide i servizi tramite la dependency injection.

Perché usare i servizi

I componenti dovrebbero concentrarsi sulla vista. Sposti la logica di business, le chiamate API e lo stato condiviso nei servizi, così possono essere riutilizzati e testati in modo indipendente.

Il decorator Injectable

Contrassegni una classe di servizio con @Injectable affinché Angular possa crearla e inserirla dove necessario.

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class DataService {}

providedIn root

providedIn: 'root' registra il servizio nell'injector radice dell'applicazione. Angular crea una singola istanza condivisa (un singleton) per l'intera app.

Provider eliminabili dal tree shaking

Poiché il provider è dichiarato nella classe tramite providedIn, i servizi inutilizzati possono essere rimossi automaticamente dal bundle tramite tree shaking.

Un servizio con stato

I servizi contengono spesso dello stato. Con i signals, esponga lo stato reattivo dal servizio.

import { Injectable, signal } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class CounterStore {
  count = signal(0);
  increment() { this.count.update(v => v + 1); }
}

Un servizio con metodi

Aggiunga metodi che i componenti possano chiamare per eseguire azioni o recuperare dati.

@Injectable({ providedIn: 'root' })
export class GreetingService {
  greet(name: string): string {
    return 'Hello, ' + name;
  }
}

Generazione di un servizio

La CLI crea lo scheletro di un servizio aggiungendo già il decorator Injectable.

ng g service data

I singleton condividono lo stato

Poiché un servizio root è un singleton, ogni componente che lo inserisce vede la stessa istanza e lo stesso stato. È così che i componenti condividono i dati.

I servizi possono inserire altri servizi

Un servizio può dipendere da altri servizi. Ad esempio, un servizio per i dati può usare il servizio HttpClient per effettuare richieste.

Mantenga i servizi focalizzati

Assegni a ogni servizio una responsabilità unica e chiara. I servizi piccoli e focalizzati sono più facili da testare e riutilizzare rispetto a quelli grandi che svolgono molte attività.

Verifica rapida: Injectable

Registrazione di un servizio singleton.

Riepilogo: servizi

Ha imparato che i servizi contengono logica e stato riutilizzabili, sono contrassegnati con @Injectable e usano providedIn: root per registrare un singleton per l'intera app. I servizi condividono lo stato tra i componenti e possono dipendere da altri servizi. Prossimo argomento: la funzione inject.

Domande Frequenti

La lezione «Servizi e Injectable» è gratuita?

Sì — il testo completo di «Servizi e Injectable» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Servizi e Injectable»?

Crei servizi injectable per la logica condivisa. Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Servizi e Injectable»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy