Como aplicar SOLID em uma aplicação Angular 18+

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 →

Dialog Service

Angular Material
Angular Material

Um service de dialogs do Angular Material

A algum tempo venho implementando dialogs nos meus projetos, mais especificamente os do Angular Material, por serem de fácil implementação e digamos, maleáveis, até certo ponto, porém notei que muitos eu poderia reutilizar, nisso acabei criando um módulo para agrupar esses que são comuns entre vários outros módulos, dai nasceu o dialog.service

Continue reading →

Simples aplicação real time com Angular 4 e Firebase, parte 4

Nesse artigo irei mostrar o como fazer o deploy para o firebase, para isso iremos usar o firebase-tools que gerencia todo esse contexto.

Angular + Firebase
Angular + Firebase
#1 | #2 | #3 | #4 | #5 | #6
Disclaimer
Esses artigos foram escritos entre maio e junho de 2017, muita coisa mudou desde lá, então procure usar as libs e referências mais atualizadas para implementar os passos que são aqui descritos
fontes: https://github.com/evlymn/simplesapprealtime

Iremos fazer a publicação do nosso aplicativo no firebase usando Firebase Hosting
Para isso iremos instalar o firebase-tools e iniciar o firebase na pasta do app, no terminal digite:

npm install -g firebase-tools
npm install -g firebase-tools
npm install -g firebase-tools

Vai instalar um horror de coisas mas não se preocupe, tudo vai da certo.

Continue reading →