Provedores e escopos
Controle onde os serviços vivem na árvore.
Provedores e escopos é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.
Provedores e escopos
Um provedor informa ao Angular como criar uma dependência. O escopo em que você o registra determina quantas instâncias existirão e quem as compartilhará.
Escopo raiz
providedIn: root registra um serviço no injetor raiz: um singleton compartilhado por todo o aplicativo. Essa é a escolha mais comum.
@Injectable({ providedIn: 'root' })
export class AppStore {}Provedores de componentes
Você pode limitar o escopo de um serviço a um componente listando-o na matriz providers do componente. Cada instância desse componente recebe sua própria instância do serviço.
import { Component } from '@angular/core';
import { LocalStore } from './local-store';
@Component({
selector: 'app-panel',
providers: [LocalStore],
template: ''
})
export class PanelComponent {}Por que usar o escopo de componente
Use provedores com escopo de componente quando cada instância do componente precisar de seu próprio estado isolado, como o estado de um formulário ou um armazenamento específico de cada widget.
Raiz versus componente
Raiz: uma instância compartilhada em todos os lugares. Componente: uma instância por instância de componente (e seus filhos). Escolha com base na necessidade de compartilhar ou isolar o estado.
A hierarquia de injetores
Os injetores do Angular formam uma árvore. Ao resolver uma dependência, o Angular procura no injetor do componente, depois sobe pelos elementos pais e, por fim, chega à raiz.
Os componentes filhos herdam
Um serviço fornecido em um componente também fica disponível para os filhos desse componente, a menos que um filho forneça sua própria instância, ocultando a do pai.
Provedores no nível da aplicação
Você também pode registrar provedores durante a inicialização, na matriz providers de bootstrapApplication, de modo semelhante ao escopo raiz, geralmente por meio de funções provide*.
// bootstrapApplication(AppComponent, {
// providers: [provideHttpClient()]
// });useClass e useValue
Os provedores podem mapear um token para uma classe com useClass, para um valor fixo com useValue ou para uma fábrica com useFactory, permitindo substituição e configuração.
// providers: [{ provide: Logger, useClass: ConsoleLogger }]Trocando implementações
Como um provedor mapeia um token para uma implementação, você pode trocar implementações (por exemplo, usar uma simulação nos testes) sem alterar os consumidores.
Escolhendo um escopo
Use root como padrão para singletons compartilhados. Prefira provedores de componentes somente quando precisar de estado isolado por instância.
Verificação rápida: escopos
Estado por instância.
Recapitulação: provedores e escopos
Você aprendeu que os provedores descrevem como criar dependências e que o escopo controla a criação de instâncias: root para singletons disponíveis em todo o aplicativo e provedores de componentes para isolamento por instância. O Angular resolve as dependências por meio de uma hierarquia de injetores, e useClass/useValue/useFactory permitem trocar implementações. A seguir: tokens de injeção.
Perguntas Frequentes
A aula “Provedores e escopos” é grátis?
Sim — o texto completo de “Provedores e escopos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.
O que vou aprender em “Provedores e escopos”?
Controle onde os serviços vivem na árvore. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Angular Academy?
Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Provedores e escopos”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Angular Academy?
Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Serviços e Injectable
- A função inject
- Provedores e escopos
- Tokens de injeção