🟢 Aplicação Crud

Informação

Comunicar e ter um estado global/local em sincronia com seu backend é o coração de qualquer aplicação. Você necessitará dominar as seguintes melhores práticas para construir aplicações Angular fortes e confiáveis.

Declaração

Neste exercício, você tem uma pequena aplicação CRUD, que tem uma lista de TODOS, atualiza e exclui alguns todos.

Atualmente temos um exemplo funcional, mas cheio de más práticas.

Passo 1: refatorar com melhores práticas

O que você precisará:

• Evite any como um tipo. Use Interface para aproveitar o sistema de tipos do Typescript para evitar erros
• Use um serviço separado para todas suas chamadas http e use um Signal para sua lista de todos
• Não mute em seus dados

// Evite isto
this.todos[todoUpdated.id - 1] = todoUpdated;

// Prefira algo assim, mas precisa melhorar, porque queremos manter a mesma ordem.
this.todos = [...this.todos.filter((t) => t.id !== todoUpdated.id), todoUpdated];

Passo 2: Melhore

• Adicione um botão Deletar: Documentação de API falsa
• Lide com erros corretamente. (Globalmente)
• Adicione um indicador de carregamento global. Você pode usar MatProgressSpinnerModule

Passo 3: Manutenibilidade!! adicione alguns testes

• Adicione 2/3 testes

Step 4: Incrível!!! domine seu estado.

• Use o componente store do ngrx, ngrx/store, rxAngular, tanstack-query ou ngrx/signal-store como estado local de seu componente.
• Tenha um indicador de carregamento/erro localizado, e.g. apenas no Todo sendo processado e desabilite todos os botões do Todo processado. (Dica: você precisará criar um ItemComponent)