Skip to content

README.md

Latest commit

 

History

History
255 lines (201 loc) · 5.62 KB

README.md

File metadata and controls

255 lines (201 loc) · 5.62 KB

🚀 Arquitetura de Projeto Angular

Baseado em: Angular 17+
Guia de referência para criar projetos escaláveis, performáticos e fáceis de manter.

Índice

  1. Estrutura do Projeto
  2. Diagramas de Arquitetura
  3. Módulos Principais
  4. Boas Práticas
  5. Exemplos Práticos

Estrutura do Projeto

Organização de Diretórios

src/
├── app/
│   ├── core/                   # Serviços e funcionalidades globais
│   ├── shared/                 # Componentes e utilitários compartilhados
│   ├── layout/                 # Templates e layouts base
│   ├── features/               # Módulos funcionais da aplicação
│   └── app.module.ts           # Módulo raiz

Diagramas de Arquitetura

Estrutura de Módulos

graph TB
    A[AppModule] --> B[CoreModule]
    A --> C[SharedModule]
    A --> D[FeatureModules]
    D --> E[AuthModule]
    D --> F[DashboardModule]
    D --> G[PagamentosModule]

    B --> H[Guards]
    B --> I[Services]
    B --> J[Interceptors]

    C --> K[Components]
    C --> L[Directives]
    C --> M[Pipes]
Loading

Fluxo de Comunicação

graph LR
    A[Componente Pai] -->|Input| B[Componente Filho]
    B -->|Output| A
    C[Serviço] -->|Observable| A
    C -->|Observable| B
Loading

Estrutura Lazy Loading

graph TD
    A[Browser] -->|Carga Inicial| B[AppModule]
    B --> C[CoreModule]
    B --> D[SharedModule]
    B -.->|Lazy Load| E[Feature 1]
    B -.->|Lazy Load| F[Feature 2]
    B -.->|Lazy Load| G[Feature 3]
Loading

Fluxo de Dados

sequenceDiagram
    Componente->>Serviço: Requisita Dados
    Serviço->>Interceptor HTTP: Requisição HTTP
    Interceptor HTTP->>API Backend: Requisição Modificada
    API Backend->>Interceptor HTTP: Resposta
    Interceptor HTTP->>Serviço: Resposta Modificada
    Serviço->>Componente: Dados Atualizados
Loading

Fluxo de Autenticação

graph LR
    A[Login Component] --> B[Auth Service]
    B --> C[HTTP Interceptor]
    C --> D[Backend API]
    B --> E[Auth Guard]
    E -->|Permite/Bloqueia| F[Rotas Protegidas]
Loading

Estado da Aplicação

stateDiagram-v2
    [*] --> NaoAutenticado
    NaoAutenticado --> Autenticado: Login
    Autenticado --> NaoAutenticado: Logout
    Autenticado --> CarregandoDados: Requisição
    CarregandoDados --> ExibindoDados: Sucesso
    CarregandoDados --> EstadoErro: Erro
    EstadoErro --> CarregandoDados: Tentar Novamente
Loading

Módulos Principais

Core Module (/core)

  • Propósito: Serviços singleton e utilitários globais
  • Componentes:
    • Guards de autenticação
    • Interceptors HTTP
    • Serviços globais
    • Modelos de dados (interfaces)

Shared Module (/shared)

  • Componentes Reutilizáveis:
    • Formulários customizados
    • Componentes UI (Botões, Cards, etc)
    • Pipes personalizados
    • Diretivas

Layout Module (/layout)

  • Estruturas de Layout: 
    layout/
├── auth-layout/             # Layout para páginas de autenticação
└── app-layout/              # Layout para área logada
    ├── header/
    └── sidebar/

Features Module (/features)

  • Módulos Funcionais: 
    features/
├── auth/                    # Autenticação
├── dashboard/              # Painéis
├── pagamentos/            # Módulo de pagamentos
└── configuracoes/         # Configurações

Boas Práticas

1. Nomenclatura

  • Arquivos: feature-name.component.ts
  • Classes: FeatureNameComponent
  • Seletores: app-feature-name

2. Lazy Loading

const routes: Routes = [
  {
    path: "feature",
    loadChildren: () =>
      import("./features/feature/feature.module").then((m) => m.FeatureModule),
  },
];

3. Organização de Serviços

// core/services/auth.service.ts
@Injectable({
  providedIn: "root",
})
export class AuthService {
  // Implementação
}

Exemplos Práticos

Componente Compartilhado

// shared/components/input/input.component.ts
@Component({
  selector: "app-input",
  template: `
    <div class="input-wrapper">
      <label>{{ label }}</label>
      <input [formControlName]="controlName" />
    </div>
  `,
})
export class InputComponent {
  @Input() label: string;
  @Input() controlName: string;
}

Feature Module

// features/dashboard/dashboard.module.ts
@NgModule({
  imports: [CommonModule, SharedModule, DashboardRoutingModule],
  declarations: [DashboardComponent, DashboardWidgetComponent],
})
export class DashboardModule {}

Estrutura de Testes

// feature.component.spec.ts
describe("FeatureComponent", () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [FeatureComponent],
      imports: [SharedModule],
    }).compileComponents();
  });

  it("deve criar o componente", () => {
    const fixture = TestBed.createComponent(FeatureComponent);
    expect(fixture.componentInstance).toBeTruthy();
  });
});

Dicas de Performance

  1. Detecção de Mudanças

    • Use ChangeDetectionStrategy.OnPush
    • Implemente trackBy em *ngFor

  2. Otimização de Módulos

    • Lazy loading em rotas
    • Pré-carregamento estratégico

  3. Gerenciamento de Estado

    • Utilize serviços com BehaviorSubject
    • Considere NgRx para apps complexos

Esta estrutura promove:

  • Manutenibilidade
  • Escalabilidade
  • Reutilização de código
  • Separação clara de responsabilidades