Provider e ambiti
Controlli dove risiedono i servizi nell'albero.
Provider e ambiti è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 3 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.
Provider e ambiti
Un provider indica ad Angular come creare una dipendenza. L'ambito in cui lo si registra determina quante istanze esistono e chi le condivide.
Ambito root
providedIn: root registra un servizio nell'injector radice: un singleton condiviso per l'intera app. È la scelta più comune.
@Injectable({ providedIn: 'root' })
export class AppStore {}Provider dei componenti
È possibile limitare l'ambito di un servizio a un componente inserendolo nell'array providers del componente. Ogni istanza del componente ottiene una propria istanza del servizio.
import { Component } from '@angular/core';
import { LocalStore } from './local-store';
@Component({
selector: 'app-panel',
providers: [LocalStore],
template: ''
})
export class PanelComponent {}Perché usare l'ambito del componente
Usi provider con ambito del componente quando ogni istanza del componente necessita di uno stato isolato, ad esempio lo stato di un modulo o uno store specifico per widget.
Root e componente
Root: un'istanza condivisa ovunque. Componente: un'istanza per ogni istanza del componente e per i relativi figli. Scelga in base alla necessità di condividere o isolare lo stato.
La gerarchia degli injector
Gli injector di Angular formano un albero. Quando risolve una dipendenza, Angular cerca nell'injector del componente, poi risale ai genitori e infine arriva alla radice.
I componenti figli ereditano
Un servizio fornito su un componente è disponibile anche nei figli di quel componente, a meno che un figlio non fornisca una propria istanza, che nasconde quella del genitore.
Provider a livello di applicazione
È anche possibile registrare i provider durante il bootstrap nell'array providers di bootstrapApplication, in modo simile all'ambito root, spesso tramite funzioni provide*.
// bootstrapApplication(AppComponent, {
// providers: [provideHttpClient()]
// });useClass e useValue
I provider possono associare un token a una classe con useClass, a un valore fisso con useValue o a una factory con useFactory, consentendo sostituzioni e configurazioni.
// providers: [{ provide: Logger, useClass: ConsoleLogger }]Sostituzione delle implementazioni
Poiché un provider associa un token a un'implementazione, è possibile sostituire le implementazioni (ad esempio usando un mock nei test) senza modificare i consumatori.
Scelta dell'ambito
Scelga root per impostazione predefinita per i singleton condivisi. Usi i provider del componente solo quando è necessario uno stato isolato e specifico per ogni istanza.
Verifica rapida: ambiti
Stato specifico per ogni istanza.
Riepilogo: provider e ambiti
Ha imparato che i provider descrivono come creare le dipendenze e che l'ambito controlla la creazione delle istanze: root per i singleton dell'intera app, provider dei componenti per l'isolamento di ogni istanza. Angular risolve le dipendenze attraverso una gerarchia di injector e useClass/useValue/useFactory consentono di sostituire le implementazioni. Prossimo argomento: i token di injection.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 38
- Lezioni
- 144
Domande Frequenti
La lezione «Provider e ambiti» è gratuita?
Sì — il testo completo di «Provider e ambiti» è 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 «Provider e ambiti»?
Controlli dove risiedono i servizi nell'albero. 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 3 di 4.
Quanto tempo richiede la lezione «Provider e ambiti»?
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
- Servizi e Injectable
- La funzione inject
- Provider e ambiti
- Token di injection