Serviços e Injectable
Crie serviços injetáveis para lógica compartilhada.
Serviços e Injectable é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 1 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.
Serviços e Injectable
Um serviço é uma classe que contém lógica ou estado reutilizável, como busca de dados ou um armazenamento compartilhado. O Angular cria e compartilha serviços por meio da injeção de dependências.
Por que usar serviços
Os componentes devem se concentrar na exibição. Mova a lógica de negócio, as chamadas à API e o estado compartilhado para serviços, para que possam ser reutilizados e testados de forma independente.
O decorador Injectable
Marque uma classe de serviço com @Injectable para que o Angular possa criá-la e injetá-la onde for necessário.
import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class DataService {}providedIn root
providedIn: 'root' registra o serviço no injetor raiz da aplicação. O Angular cria uma única instância compartilhada (um singleton) para todo o aplicativo.
Provedores elimináveis pela árvore
Como o provedor é declarado na classe com providedIn, os serviços não utilizados podem ser removidos automaticamente do pacote pela eliminação em árvore.
Um serviço com estado
Os serviços geralmente mantêm estado. Com sinais, exponha o estado reativo a partir do serviço.
import { Injectable, signal } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class CounterStore {
count = signal(0);
increment() { this.count.update(v => v + 1); }
}Um serviço com métodos
Adicione métodos que os componentes possam chamar para executar ações ou recuperar dados.
@Injectable({ providedIn: 'root' })
export class GreetingService {
greet(name: string): string {
return 'Hello, ' + name;
}
}Gerando um serviço
A CLI cria a estrutura de um serviço com o decorador Injectable já adicionado.
ng g service dataSingletons compartilham estado
Como um serviço raiz é um singleton, todos os componentes que o injetam veem a mesma instância e o mesmo estado. É assim que os componentes compartilham dados.
Serviços podem injetar serviços
Um serviço pode depender de outros serviços. Por exemplo, um serviço de dados pode usar o serviço HttpClient para fazer solicitações.
Mantenha os serviços focados
Atribua a cada serviço uma única responsabilidade clara. Serviços pequenos e focados são mais fáceis de testar e reutilizar do que serviços grandes que fazem muitas coisas.
Verificação rápida: Injectable
Registrando um serviço singleton.
Recapitulação: serviços
Você aprendeu que os serviços contêm lógica e estado reutilizáveis, são marcados com @Injectable e usam providedIn: root para registrar um singleton disponível em todo o aplicativo. Os serviços compartilham estado entre componentes e podem depender de outros serviços. A seguir: a função inject.
Perguntas Frequentes
A aula “Serviços e Injectable” é grátis?
Sim — o texto completo de “Serviços e Injectable” é 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 “Serviços e Injectable”?
Crie serviços injetáveis para lógica compartilhada. 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 1 de 4.
Quanto tempo leva a aula “Serviços e Injectable”?
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