Aplicando SOLID no Angular
✅ SRP (Responsabilidade Única) → Separe lógica de negócio em services e mantenha componentes focados apenas na UI.
✅ OCP (Aberto/Fechado) → Use herança ou injeção de dependência para estender funcionalidades sem modificar código existente.
✅ LSP (Substituição de Liskov) → Subclasses devem poder substituir superclasses sem alterar o comportamento esperado. Use interfaces para garantir compatibilidade.
✅ ISP (Segregação de Interfaces) → Prefira múltiplas interfaces menores ao invés de forçar classes a implementar métodos desnecessários.
✅ DIP (Inversão de Dependência) → Dependa de abstrações (interfaces ou classes abstratas) e use injeção de dependência para reduzir o acoplamento.
A versão 18+ do Angular trouxe uma série de melhorias significativas, como a introdução do modo standalone e um suporte aprimorado à injeção de dependência, facilitando a aplicação dos princípios SOLID de forma mais eficiente e intuitiva.
Para ajudar você a colocar esses conceitos em prática, aqui está um guia com exemplos práticos, mostrando tanto as abordagens incorretas quanto as corretas para cada um dos princípios do SOLID.
1. SRP – Princípio da Responsabilidade Única
“Uma classe deve ter apenas uma razão para mudar e focar exclusivamente em uma única responsabilidade.”
Em outras palavras, cada componente ou classe deve resolver um único problema, evitando a mistura de tarefas não relacionadas. Isso garante código mais coeso, fácil de manter e menos propenso a bugs. Por exemplo, não deve misturar lógica de negócios com chamadas HTTP ou outras tarefas que não sejam diretamente relacionadas à sua função principal.
Exemplo Errado: Componente fazendo tudo
import { Component, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-user-profile',
standalone: true,
template: `
<div *ngIf="user">
<h1>{{ user.name }}</h1>
<p>Email: {{ user.email }}</p>
</div>
`,
})
export class UserProfileComponent {
user: any;
private http = inject(HttpClient);
constructor() {
this.loadUser();
}
loadUser() {
this.http.get('/api/user').subscribe((data) => (this.user = data));
}
}
Continue reading →
