Projeto 1 — Lista de Tarefas com Angular CLI e Componentização

Objetivo: estruturar a base de um app simples, com componentes reutilizáveis, comunicação básica e persistência local. Esta sessão foca na criação de uma arquitetura limpa desde o início.

• Gerar o app com Angular CLI: ng new angular-praticos
• Criar componentes: app-todo-list e app-todo-item, com responsabilidade única
• Definir modelo Todo e trabalhar com bindings: [(ngModel)] para input e [ngFor] para a lista
• Persistência local com localStorage para manter o estado entre recargas
• Organizar módulos e pastas de forma previsível: core, shared, features

Estrutura de alto nível sugerida:

// src/app/todo.model.ts
export interface Todo { id: string; title: string; done: boolean; }

// src/app/todo-item/todo-item.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Todo } from '../todo.model';

@Component({
  selector: 'app-todo-item',
  template: `
    

      
      {{ todo.title }}
    
  `,
  styles: [`.todo-item{ display:flex; align-items:center; gap:8px } .done{ text-decoration: line-through; color:#999; }`]
})
export class TodoItemComponent {
  @Input() todo!: Todo;
  @Output() toggle = new EventEmitter();
}

// src/app/todo-list/todo-list.component.ts
import { Component } from '@angular/core';
import { Todo } from '../todo.model';

@Component({
  selector: 'app-todo-list',
  template: `
    

      
    
  `
})
export class TodoListComponent {
  todos: Todo[] = [
    { id: '1', title: 'Configurar Angular CLI', done: true },
    { id: '2', title: 'Criar TodoItem e TodoList', done: false },
  ];

  toggleTodo(t: Todo){
    t.done = !t.done;
    // em uma implementação real salvar estado
  }
}

Notas rápidas:

• Use o AsyncPipe quando lidar com Observables para simplificar o template.
• Guarde o estado em LocalStorage para uma experiência mais estável durante o desenvolvimento.

Projeto 2 — Dashboard Sóbrios com RxJS: Observables e Comunicação entre Componentes

Objetivo: demonstrar fluxo de dados reativo com RxJS, incluindo Subjects para emitir alterações de estado e o uso do async pipe para consumo de streams no template.

• Modelar dados com Observables para fontes assíncronas (simuladas ou reais)
• Usar BehaviorSubject para manter estado compartilhado
• Composição de streams com combineLatest, map e tap
• Apresentar dashboards simples sem dependência de bibliotecas externas

Exemplo conceitual de fluxo reativo:

// src/app/dashboard/dashboard.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable, of } from 'rxjs';
import { map, delay } from 'rxjs/operators';

interface Metric { name: string; value: number; }

@Injectable({ providedIn: 'root' })
export class DashboardService{
  private cpu$ = new BehaviorSubject({ name:'CPU', value: 32 });
  private mem$ = new BehaviorSubject({ name:'Memory', value: 68 });

  getCpu(): Observable { return this.cpu$.asObservable(); }
  getMem(): Observable { return this.mem$.asObservable(); }

  // simula mudanças locais
  tick(){
    const nextCpu = Math.min(100, Math.max(0, this.cpu$.value.value + (Math.random()*20-10)));
    const nextMem = Math.min(100, Math.max(0, this.mem$.value.value + (Math.random()*15-7)));
    this.cpu$.next({ name:'CPU', value: nextCpu });
    this.mem$.next({ name:'Memory', value: nextMem });
  }

  // opcional: expor um Observable combinado
  metrics(): Observable {
    return of([this.cpu$.value, this.mem$.value]).pipe(delay(0), map(m => m));
  }
}

Observações adicionais:

• Utilize o pipe e o async pipe para desacoplar a coleta de dados da renderização.
• Comece com dados simulados para validar a apresentação e a arquitetura antes de buscar APIs reais.

Projeto 3 — Consumo de API com HttpClient e Interceptors

Objetivo: configurar chamadas HTTP de forma segura, com tratamento de erros e credenciais, mantendo a camada de dados separada da UI.

• Importar HttpClientModule e criar um serviço de API (ApiService)
• Definir endpoints simples e trajetórias para GET/POST
• Utilizar Interceptors para anexar tokens de autenticação
• Tratar erros de forma centralizada e apresentar mensagens ao usuário

// src/app/core/interceptors/auth.interceptor.ts
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest, next: HttpHandler): Observable> {
    const token = localStorage.getItem('auth_token');
    if (token) {
      const cloned = req.clone({ headers: req.headers.set('Authorization', `Bearer ${token}`) });
      return next.handle(cloned);
    }
    return next.handle(req);
  }
}

Boas práticas:

• Centralize o tratamento de erros para mensagens consistentes.
• Inclua a interceptação apenas para endpoints que exigem autenticação.
• Teste com dados simulados inicialmente para validar o fluxo de requisições.

Projeto 4 — Rotas, Lazy Loading e Boas Práticas de Qualidade

Objetivo: estruturar o app para escalabilidade com rotas bem definidas, módulos preguiçosamente carregados e testes que assegurem comportamento estável.

• Configurar roteamento com lazy loading para módulos de features
• Implementar AuthGuard para proteção de rotas sensíveis
• Aplicar estratégias de testes: unitários (Jasmine/Karma) e end-to-end (Cypress)
• Adotar padrões de qualidade: lint, formatação, documentação inline

Dicas rápidas:

• Priorize a separação de responsabilidades entre UI, dados e navegação
• Valide interfaces públicas com testes de integração simples antes de avançar