Angular Academy · Aula

Armazenamentos de sinais em serviços

Mantenha o estado da aplicação em serviços baseados em sinais.

Armazenamentos de sinais em serviços é 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.

Signals como estado

Os signals do Angular são valores reativos que notificam os consumidores quando mudam. Um signal armazena um valor e executa novamente qualquer cálculo ou modelo que o leia.

Armazenar signals dentro de um serviço @Injectable permite que vários componentes compartilhem o mesmo estado reativo.

Um armazenamento mínimo de signals

Crie um serviço e mantenha o estado em um signal(). Mantenha o signal gravável privado e exponha uma visão somente leitura.

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

@Injectable({ providedIn: 'root' })
export class CounterStore {
  private _count = signal(0);
  readonly count = this._count.asReadonly();

  increment() { this._count.update(c => c + 1); }
}

Por que providedIn root

providedIn: 'root' torna o serviço um singleton em todo o aplicativo. Cada componente que o injeta compartilha exatamente a mesma instância de signal, mantendo o estado sincronizado.

Lendo o signal

Chame o signal como uma função para ler seu valor. Dentro de um modelo, o Angular acompanha essa leitura e atualiza o DOM automaticamente quando o valor muda.

import { Component, inject } from '@angular/core';
import { CounterStore } from './counter.store';

@Component({
  selector: 'app-counter',
  template: '<button (click)="store.increment()">{{ store.count() }}</button>'
})
export class CounterComponent {
  store = inject(CounterStore);
}

asReadonly protege o estado

asReadonly() retorna um signal que pode ser lido, mas não alterado. Os componentes não podem chamar acidentalmente set() ou update() nele, então todas as mutações passam pelos métodos do armazenamento.

set versus update

Use set(value) quando já tiver diretamente o próximo valor. Use update(fn) quando o próximo valor depender do atual.

private _user = signal<User | null>(null);

setUser(u: User) { this._user.set(u); }
clearUser() { this._user.set(null); }
touch() { this._user.update(u => u ? { ...u, seen: true } : u); }

Vários signals por armazenamento

Um armazenamento pode conter vários signals que representam diferentes partes do estado. Mantenha cada signal gravável privado e exponha os correspondentes somente para leitura.

private _items = signal<Item[]>([]);
private _loading = signal(false);

readonly items = this._items.asReadonly();
readonly loading = this._loading.asReadonly();

Métodos encapsulam a lógica

As regras de negócio ficam nos métodos do armazenamento, não nos componentes. Os componentes chamam métodos que revelam a intenção, como addToCart(item), e o armazenamento decide como o estado muda.

addToCart(item: Item) {
  this._items.update(list => [...list, item]);
}
removeFromCart(id: string) {
  this._items.update(list => list.filter(i => i.id !== id));
}

Nenhuma inscrição necessária

Ao contrário dos serviços baseados em RxJS, os armazenamentos de signals não precisam de subscribe() nem de cancelamento manual de inscrições. Ler um signal em um modelo configura a reatividade, e o Angular a remove quando o componente é destruído.

Injetando com inject()

A função inject() funciona em construtores, inicializadores de campos e funções de fábrica. Essa é a forma moderna de obter a instância do armazenamento.

export class CartComponent {
  private store = inject(CartStore);
  items = this.store.items; // read-only signal
}

Testando um armazenamento de signals

Os armazenamentos de signals são classes simples, portanto os testes são fáceis: crie uma instância, chame um método e leia o valor do signal de forma síncrona. Não é necessária nenhuma estrutura assíncrona.

it('increments', () => {
  const store = new CounterStore();
  store.increment();
  expect(store.count()).toBe(1);
});

Verificação rápida

Teste sua compreensão sobre armazenamentos de signals.

Recapitulação

Você aprendeu a criar um armazenamento baseado em signals: manter privados os signals graváveis, expor visões com asReadonly(), alterar o estado usando set/update dentro dos métodos e injetar o singleton com inject(). Sem inscrições, com testes fáceis e estado reativo compartilhado.

Perguntas Frequentes

A aula “Armazenamentos de sinais em serviços” é grátis?

Sim — o texto completo de “Armazenamentos de sinais em serviços” é 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 “Armazenamentos de sinais em serviços”?

Mantenha o estado da aplicação em serviços baseados em sinais. 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 “Armazenamentos de sinais em serviços”?

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

← Voltar para Angular Academy