Pular para conteúdo

Desenvolvimento Frontend com Angular 💻

Domine a criação de aplicações web modernas com Angular, explorando desde a arquitetura clássica com NgModules até as inovações modernas com Standalone Components, RxJS e APIs REST.

Foco do Curso

Metodologia: Aprendizado prático focado na construção de Single Page Applications (SPA) de alta performance, seguindo as melhores práticas do mercado e do Google.

🎯 O Que Você Vai Aprender

  • Fundamentos e CLI --- Conheça o ecossistema Angular, instale o CLI e crie sua primeira aplicação SPA com a estrutura profissional. Ir para Módulo 1

  • Data Binding e Diretivas --- Domine a manipulação dinâmica de dados com Interpolação, Event Binding e Diretivas Estruturais como *ngIf e *ngFor. Ver Data Binding

  • Standalone Components --- Aprenda a nova forma de desenvolver com Angular 15+, eliminando a complexidade dos NgModules e otimizando o build. Ver Angular Moderno

  • RxJS e HTTP Client --- Consuma APIs de forma reativa, utilizando Observables, Pipes e o poderoso HttpClient para integrações robustas. Ver Reatividade

📚 Jornada de Aprendizado (16 Aulas)

O curso é estruturado para levar você do zero ao deploy profissional.

🧱 Módulo 1: Fundamentos e Estrutura (Aulas 01-04)

⚙️ Módulo 2: Core e Comunicação (Aulas 05-07)

🚀 Módulo 3: Angular Moderno (Aulas 08-11)

🏆 Módulo 4: Profissional e Deploy (Aulas 12-16)

Começar Minha Jornada Angular

Plano de Ensino 📅

Curso: Desenvolvimento Frontend com Angular

Ementa

  1. Fase 1: Abordagem Clássica (NgModule): Arquitetura, Componentes, Data Binding, Diretivas e Serviços.
  2. Fase 2: Angular Moderno (Standalone): Standalone Components, Forms, API consumption, RxJS e Arquitetura Avançada.

Cronograma (16 Aulas)

Módulo 1: Fundamentos e Estrutura

  • Aula 01: Introdução ao Angular e Ecossistema (SPA, CLI, Node.js)
  • Aula 02: Estrutura do Projeto e Componentes (Visão Clássica)
  • Aula 03: Data Binding (Interpolação, Property, Event, Two-way)
  • Aula 04: Diretivas Estruturais (ngIf, ngFor) e de Atributo

Módulo 2: Core e Comunicação

  • Aula 05: Comunicação entre Componentes (@Input, @Output, EventEmitter)
  • Aula 06: Serviços e Injeção de Dependência (ProvidedIn: 'root')
  • Aula 07: Roteamento no Modelo Clássico (RouterModule)

Módulo 3: Angular Standalone e Formulários

  • Aula 08: Standalone Components (O novo padrão do Angular 15+)
  • Aula 09: Roteamento Standalone (provideRouter, loadComponent)
  • Aula 10: Formulários (Reactive Forms e Template-driven)
  • Aula 11: HTTP Client e Integração com APIs REST

Módulo 4: Avançado, RxJS e Deploy

  • Aula 12: RxJS e Programação Reativa (Observables, Subjects)
  • Aula 13: Arquitetura e Organização Profissional (Core/Shared/Features)
  • Aula 14: Estilização Moderna e Angular Material
  • Aula 15: Build de Produção, Deploy e Performance
  • Aula 16: Projeto Final Integrador (CRUD Completo)

Avaliação

  • Exercícios: 16 listas focadas em lógica e implementação Angular.
  • Projetos: 16 etapas de construção de um sistema real.
  • Quizzes: 16 avaliações de conceitos-chave.
  • Projeto Final: Uma aplicação SPA completa publicada em produção.

Aulas

Aula 01: Introdução ao Angular e Ecossistema 🅰️

Nesta aula, vamos mergulhar no universo do Angular, entender o conceito de Single Page Applications (SPA) e preparar nosso ambiente para criar a primeira aplicação profissional.

🌐 O que é SPA (Single Page Application)?

Uma SPA é uma aplicação web que carrega apenas uma única página HTML e atualiza dinamicamente o conteúdo à medida que o usuário interage. Diferente dos sites tradicionais, não há recarregamento total da página (refresh).

Conceito Chave

Em uma SPA, a navegação entre visualizações ocorre no lado do cliente (browser), o que proporciona uma experiência de usuário muito mais fluida e rápida, similar a um aplicativo mobile.

🏛️ Arquitetura do Angular

O Angular segue uma arquitetura baseada em Componentes, onde cada parte da interface é uma peça independente.

graph TD
    A[Aplicação Angular] --> B[Componente Raiz]
    B --> C[Home Component]
    B --> D[Navbar Component]
    B --> E[Footer Component]
    C --> F[Card Component]
    C --> G[List Component]

🛠️ Preparando o Ambiente

Para começar, precisamos instalar o Node.js e o Angular CLI.

1. Instalação com Termynal

# Instalando o Angular CLI globalmente
$ npm install -g @angular/cli

# Verificando a instalação
$ ng version

🚀 Prática: Primeiro Projeto

Vamos criar e rodar nosso primeiro projeto Angular utilizando o terminal.

Dica de Produtividade

Use o comando ng new seguido pelo nome do projeto. O Angular CLI cuidará de toda a estrutura inicial para você.

# 1. Criar projeto
$ ng new meu-primeiro-angular

# 2. Entrar na pasta
$ cd meu-primeiro-angular

# 3. Executar o servidor
$ ng serve --open

📑 Estrutura do Projeto

Ao abrir o projeto no VS Code, você verá uma estrutura organizada:

  • src/: Onde fica o código fonte da aplicação.
  • app/: Contém os componentes e lógica principal.
  • assets/: Imagens e arquivos estáticos.
  • angular.json: Configurações globais do CLI.

Atenção

Não altere arquivos na pasta node_modules manualmente. Todas as dependências devem ser gerenciadas via package.json.

🏁 Mini-Projeto da Aula

Crie uma nova aplicação Angular chamada projeto-aula-01, execute-a no seu navegador e altere o texto "Hello" no arquivo app.component.html.

Aula 02: Estrutura do Projeto e Componentes (Abordagem Clássica) 🏗️

Nesta aula, vamos dissecar a anatomia de um projeto Angular e entender o coração do framework: os Componentes.

📁 Estrutura de Pastas Profissional

Um projeto Angular possui diversos arquivos de configuração. Vamos entender os principais:

  • main.ts: O ponto de entrada da aplicação. É aqui que o Angular inicia o módulo raiz.
  • index.html: A única página física da SPA. Contém a tag <app-root>.
  • angular.json: Configurações do CLI (scripts, estilos globais, caminhos).

🧩 O que é um Componente?

Um componente no Angular é composto por 4 elementos principais:

  1. Classe (.ts): Lógica e dados.
  2. Template (.html): Estrutura visual.
  3. Estilo (.css ou .scss): Design isolado.
  4. Teste (.spec.ts): Validação automatizada.
graph LR
    A[Componente] --> B[HTML/Template]
    A --> C[CSS/Estilos]
    A --> D[TS/Lógica]
    A --> E[Metadados/@Component]

🛠️ Criando Componentes com o CLI

Não criamos arquivos manualmente! Usamos o comando generate (ou o atalho g).

# Gerar um componente chamado 'cabecalho'
$ ng generate component cabecalho

# Atalho rápido
$ ng g c rodape

Comportamento do CLI

Ao gerar um componente, o CLI cria os 4 arquivos, cria uma pasta própria e, na abordagem clássica, o registra automaticamente no app.module.ts.

📦 Introdução ao NgModule

Na abordagem clássica, o Module é o arquivo que agrupa componentes, serviços e outras dependências.

Atenção

Para que um componente possa ser usado no HTML de outro, ele deve estar declarado em um NgModule.

🚀 Prática: Layout com Componentes

Vamos criar uma estrutura de layout simples com múltiplos componentes.

$ ng g c header
$ ng g c footer
$ ng g c content

No arquivo app.component.html, chame os seletores:

<app-header></app-header>
<app-content></app-content>
<app-footer></app-footer>

🏁 Mini-Projeto da Aula

Crie três componentes (Navbar, Sidebar e MainContent). Organize-os no app.component.html para formar o layout de um dashboard simples. Customize as cores de cada um usando arquivos CSS isolados.

Macro Syntax Error

File: aulas/aula-03.md

Line 17 in Markdown file: Expected an expression, got 'end of print statement' 

    B --> B1[Interpolação {{ }}]

Aula 04: Diretivas Estruturais e de Atributo 🛠️

Nesta aula, vamos aprender como manipular a estrutura do nosso HTML e o comportamento dos elementos usando as Diretivas do Angular.

🧩 O que são Diretivas?

Diretivas são instruções que o Angular usa para transformar o DOM. Elas se dividem em dois grandes grupos:

  1. Estruturais: Alteram a estrutura do HTML (adicionam ou removem elementos). Usam o prefixo *.
  2. De Atributo: Alteram a aparência ou o comportamento de um elemento existente.

🏗️ Diretivas Estruturais

As mais famosas são o *ngIf e o *ngFor.

1. *ngIf

Renderiza um elemento apenas se uma condição for verdadeira.

<!-- Se logado for true, exibe a mensagem -->
<p *ngIf="logado">Bem-vindo de volta!</p>

2. *ngFor

Cria um loop para repetir um elemento para cada item de uma lista.

<ul>
  <li *ngFor="let item of listaCategorias">
    {{ item }}
  </li>
</ul>

🎨 Diretivas de Atributo

Alteram como o elemento se parece.

1. ngClass

Adiciona ou remove classes CSS dinamicamente.

<!-- Adiciona a classe 'sucesso' se o status for 'ativo' -->
<div [ngClass]="{ 'sucesso': status === 'ativo' }">
  Status do Sistema
</div>

2. ngStyle

Aplica estilos CSS inline dinamicamente.

<p [ngStyle]="{ 'color': corSelecionada, 'font-size': '20px' }">
  Texto Colorido
</p>

🌟 Diagrama de Funcionamento

graph LR
    A[Componente] --> B{Diretiva}
    B -- Estrutural --> C[Muda o DOM: Adiciona/Remove]
    B -- Atributo --> D[Muda o Elemento: Cor/Classe]

🛠️ Criando uma Diretiva Personalizada (Intro)

Você também pode criar suas próprias diretivas para reutilizar comportamentos.

# Gerar uma diretiva
$ ng generate directive destaca-item

🚀 Prática: Listagem Dinâmica

Vamos criar uma lista de "Tarefas" onde podemos marcar como concluídas.

  1. Use *ngFor para listar as tarefas.
  2. Use *ngIf para mostrar um aviso se a lista estiver vazia.
  3. Use ngClass para riscar o texto da tarefa quando ela estiver concluída.

🏁 Mini-Projeto da Aula

Crie uma galeria de produtos. Cada produto deve ser um objeto com nome, preço e disponibilidade. Use *ngFor para exibir os produtos, *ngIf para mostrar o selo "Esgotado" e ngStyle para mudar a cor do preço (vermelho para produtos caros, verde para baratos).

Aula 05: Comunicação entre Componentes 🔄

Nesta aula, vamos aprender como os componentes "conversam" entre si em uma arquitetura hierárquica usando @Input e @Output.

📢 Fluxo de Dados Hierárquico

No Angular, os dados geralmente fluem do pai para o filho e os eventos do filho para o pai.

graph TD
    P[Componente Pai] -- "@Input" --> F[Componente Filho]
    F -- "@Output (EventEmitter)" --> P

📥 Recebendo Dados: @Input()

O decorator @Input() permite que o componente filho receba valores vindo de seu pai.

No Componente Filho (.ts):

import { Component, Input } from '@angular/core';

@Component({ ... })
export class FilhoComponent {
    @Input() mensagemDoPai: string = '';
}

No Componente Pai (.html):

<app-filho [mensagemDoPai]="'Olá, meu filho!'"></app-filho>

📤 Enviando Eventos: @Output()

O decorator @Output() combinado com EventEmitter permite que o filho envie notificações ou dados de volta para o pai.

No Componente Filho (.ts):

import { Component, Output, EventEmitter } from '@angular/core';

@Component({ ... })
export class FilhoComponent {
    @Output() eventoFilho = new EventEmitter<string>();

    notificarPai() {
        this.eventoFilho.emit('Oi, Pai! Eu mudei.');
    }
}

No Componente Pai (.html):

<!-- Escutando o evento (eventoFilho) -->
<app-filho (eventoFilho)="receberNotificacao($event)"></app-filho>

🧠 Smart vs Dumb Components

  • Smart Components (Pai): Gerenciam dados, fazem chamadas de API e cuidam da lógica de negócio.
  • Dumb Components (Filho): Apenas exibem dados recebidos via @Input e notificam o pai via @Output. São altamente reutilizáveis.

🚀 Prática: Lista de Contatos

Vamos construir um sistema onde: 1. O Pai gerencia uma lista de contatos. 2. O Filho exibe o detalhe de um único contato (@Input). 3. O Filho tem um botão "Excluir" que notifica o pai para remover aquele contato da lista (@Output).

🏁 Mini-Projeto da Aula

Crie um componente Contador. O componente pai deve passar o valor inicial do contador para o filho. O filho deve ter botões de "+" e "-". Toda vez que o valor mudar no filho, ele deve emitir um evento para o pai atualizar o total geral na tela dele.

Aula 06: Serviços e Injeção de Dependência 💉

Nesta aula, vamos aprender como compartilhar lógica e dados entre componentes de forma profissional e escalável usando Serviços e o sistema de Injeção de Dependência (DI) do Angular.

🏛️ Por que usar Serviços?

Componentes devem focar na interface (UI). Lógica pesada, como cálculos ou chamadas a banco de dados, deve ser isolada em um Serviço.

  • Reaproveitamento: Vários componentes podem usar o mesmo serviço.
  • Singleton: Por padrão, o Angular cria apenas uma instância do serviço para toda a aplicação.
  • Organização: Separa a "casca" (UI) do "motor" (Lógica).

🛠️ Criando um Serviço com o CLI

Usamos o comando generate service (ou g s).

# Gerar um serviço de autenticação
$ ng generate service auth/auth

# Atalho rápido
$ ng g s data

💉 Injeção de Dependência

Não instanciamos servicos com new Servico(). O Angular faz isso para nós através do Construtor.

1. Definindo o Serviço:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Singleton: disponível em toda a app
})
export class DadosService {
  lista: string[] = ['Angular', 'React', 'Vue'];

  getDados() {
    return this.lista;
  }
}

2. Injetando no Componente:

export class ListaComponent {
  // O Angular injeta automaticamente a instância
  constructor(private service: DadosService) {}

  minhaLista = this.service.getDados();
}

🌟 Diagrama de Injeção

graph TD
    S[Serviço] --> |Injetado| C1[Home Component]
    S --> |Injetado| C2[Navbar Component]
    S --> |Injetado| C3[Dashboard Component]
    C1 -.-> |Compartilha Dados| S
    C3 -.-> |Compartilha Dados| S

🚀 Prática: Gerenciamento de Tarefas

Vamos refatorar nosso código de tarefas para que: 1. A lista de tarefas não fique mais no componente. 2. Crie um TarefaService com métodos adicionar() e listar(). 3. Dois componentes diferentes usem o mesmo serviço para mostrar a mesma lista.

🏁 Mini-Projeto da Aula

Crie um CarrinhoService. Ele deve ter um array privado de itens. Crie métodos para adicionarItem(produto) e exibirTotal(). Use esse serviço em um componente de "Lista de Produtos" e em um componente de "Mini-Carrinho" (que fica no topo da página).

Aula 07: Roteamento (Abordagem Clássica) 🛣️

Nesta aula, vamos aprender como transformar nossa Single Page Application em um site multipágina usando o Angular Router.

📍 O que é o Roteamento?

O roteamento permite que o usuário navegue entre diferentes visualizações (URL /home, /contato) sem que o navegador faça um "refresh" total.

graph LR
    URL[URL do Browser] --> R[Router]
    R --> |/home| C1[HomeComponent]
    R --> |/produtos| C2[ProdutosComponent]
    R --> |/vazio| C3[NotFoundComponent]

🛠️ Configuração Básica (app-routing.module.ts)

Na abordagem clássica, definimos um array de rotas.

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'produtos', component: ProdutosComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' } // Rota padrão
];

🏠 Exibindo as Rotas: router-outlet

Para indicar ao Angular onde os componentes das rotas serão renderizados, usamos a tag <router-outlet>.

<!-- app.component.html -->
<nav>...</nav>

<router-outlet></router-outlet> <!-- Componentes mudam aqui -->

<footer>...</footer>

Não usamos href para links internos! Usamos a diretiva routerLink para que o Angular controle a navegação.

<a routerLink="/home">Início</a>
<a [routerLink]="['/produtos', id]">Ver Produto</a>

🆔 Parâmetros de Rota

Podemos passar valores dinâmicos na URL (ex: /produto/123).

  1. Definição: { path: 'produto/:id', component: DetalheComponent }
  2. Captura: Usamos o serviço ActivatedRoute para ler o ID.

🚀 Prática: Site Institucional

Vamos criar um site com 3 páginas: 1. Home: Boas-vindas. 2. Sobre: Descrição da empresa. 3. Contato: Um formulário de contato.

Adicione um menu de navegação que permita transitar entre elas sem recarregar o browser.

🏁 Mini-Projeto da Aula

Crie um catálogo de filmes. Teremos duas rotas: /filmes (lista todos) e /filme/:id (mostra o detalhe do filme clicado). No componente de detalhe, exiba o ID recebido da URL para confirmar que o roteamento está funcionando.

Aula 08: Standalone Components 📦

Nesta aula, entramos na era do Angular Moderno. Vamos aprender como criar componentes que não precisam mais de um NgModule para funcionar.

🆕 O que mudou no Angular 15+?

Historicamente, todo componente precisava estar declarado em um módulo. Com os Standalone Components, o componente se torna autossuficiente.

graph LR
    A[Componente Clássico] --> B[NgModule]
    B --> C[Aplicação]

    D[Componente Standalone] --> E[Aplicação]
    D -.-> |Importa diretamente| F[CommonModule/Outros]

🛠️ Anatomia de um Standalone Component

A principal diferença está no decorator @Component, onde adicionamos a propriedade standalone: true.

@Component({
  selector: 'app-perfil',
  standalone: true, // A mágica acontece aqui!
  imports: [CommonModule, MeusOutrosComponents], // Importa o que precisa
  templateUrl: './perfil.component.html'
})
export class PerfilComponent {}

🚀 Iniciando a App sem Módulo

No Angular Moderno, o bootstrap da aplicação muda do módulo para o componente raiz diretamente usando bootstrapApplication.

Arquivo main.ts:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent)
  .catch(err => console.error(err));

⚖️ Comparação: Clássico vs Standalone

Característica Clássico (NgModule) Standalone (Moderno)
Declaração Obrigatória no Module Nenhuma (auto-gerido)
Imports Feito no Module Feito no próprio Componente
Complexidade Alta (muitos arquivos) Baixa (mais direto)
Performance Padrão Melhor (Tree-shaking)

🛠️ Gerando no CLI

# Gerar um componente standalone
$ ng generate component meu-comp --standalone

Dica

A partir de versões mais recentes, o Angular CLI pode ser configurado para que todos os componentes novos sejam standalone por padrão.

🚀 Prática: Primeiro Projeto Moderno

  1. Crie um novo componente usando a flag --standalone.
  2. Tente importar o CommonModule dentro dele para usar o *ngIf e o *ngFor.
  3. Note que você não precisou tocar no arquivo app.module.ts!

🏁 Mini-Projeto da Aula

Refatore seu projeto da Aula 02 (que usava módulos) para usar apenas Standalone Components. Remova o arquivo app.module.ts e atualize o main.ts para usar o bootstrapApplication.

Aula 09: Roteamento no Modelo Standalone 🗺️

Nesta aula, vamos aprender como configurar a navegação da nossa aplicação Angular usando o modelo moderno, eliminando a dependência do AppRoutingModule.

📍 Roteamento sem Módulos

No modelo standalone, não usamos mais o RouterModule.forRoot(). Em vez disso, usamos a função provideRouter() durante o bootstrap da aplicação.

Configuração no main.ts:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes) // Configura as rotas aqui!
  ]
});

📁 Organização de Rotas (app.routes.ts)

As rotas continuam sendo um array de objetos, mas agora importamos os componentes diretamente.

export const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'login', component: LoginComponent }
];

🚀 Lazy Loading com loadComponent

No modelo clássico, o lazy loading era feito por módulos (loadChildren). No modelo standalone, podemos carregar componentes individuais sob demanda.

{
  path: 'dashboard',
  loadComponent: () => import('./features/dashboard.component')
    .then(m => m.DashboardComponent)
}

🛠️ O que mudou no HTML?

Absolutamente nada! As diretivas <router-outlet> e [routerLink] continuam funcionando da mesma forma.

Atenção

Como seu componente agora é Standalone, você deve importar explicitamente o RouterModule (ou as diretivas individuais como RouterOutlet) dentro do array imports do seu componente.

@Component({
  standalone: true,
  imports: [RouterOutlet, RouterLink], // Obrigatório importar!
  ...
})

🌟 Vantagens do Roteamento Standalone

  1. Menos arquivos: Não precisa do app-routing.module.ts.
  2. Performance: O Lazy Loading de componentes é mais granular que o de módulos.
  3. Clareza: O main.ts mostra claramente quais serviços e configurações a app possui.

🚀 Prática: Refatoração de Rotas

Vamos pegar o projeto da Aula 07 e: 1. Remover o AppRoutingModule. 2. Mover a constante routes para um arquivo próprio. 3. Configurar o provideRouter no main.ts. 4. Transformar o lazy loading de módulos em lazy loading de componentes.

🏁 Mini-Projeto da Aula

Crie um sistema de abas (Tabs). Cada aba deve ser um componente independente. Configure o roteamento para que cada aba tenha sua própria URL e use o loadComponent para que o código de cada aba só seja baixado quando o usuário clicar nela.

Aula 10: Formulários no Angular 📝

Nesta aula, vamos aprender como coletar e validar dados dos usuários usando as duas abordagens do Angular: Template-driven e Reactive Forms.

🎭 As Duas Abordagens

Característica Template-driven Reactive Forms
Configuração No HTML (Directivas) No TypeScript (Código)
Escalabilidade Indicado para formulários simples Indicado para formulários complexos
Validação No HTML Programática
Previsibilidade Menor (Assíncrono) Maior (Síncrono/Imutável)

1. Template-driven Forms

Usa o ngModel para criar o modelo de dados automaticamente a partir do HTML.

<form #meuForm="ngForm" (ngSubmit)="enviar(meuForm)">
  <input name="email" ngModel required email>
  <button [disabled]="meuForm.invalid">Enviar</button>
</form>

2. Reactive Forms

Você cria e gerencia o estado do formulário explicitamente no TypeScript. Oferece muito mais controle.

No TypeScript (.ts):

import { FormGroup, FormControl, Validators } from '@angular/forms';

meuForm = new FormGroup({
    nome: new FormControl('', [Validators.required]),
    email: new FormControl('', [Validators.required, Validators.email])
});

onSubmit() {
    console.log(this.meuForm.value);
}

No HTML (.html):

<form [formGroup]="meuForm" (ngSubmit)="onSubmit()">
  <input formControlName="nome">
  <input formControlName="email">
  <button type="submit">Cadastrar</button>
</form>

✅ Validações e feedback

O Angular permite verificar o estado de cada campo (dirty, touched, valid, invalid).

<div *ngIf="meuForm.get('email')?.invalid && meuForm.get('email')?.touched">
  Email é obrigatório e deve ser válido.
</div>

🌟 Ciclo do Formulário

graph LR
    A[Usuário Digita] --> B[Estado do Control Muda]
    B --> C{Válido?}
    C -- Sim --> D[Botão Ativado]
    C -- Não --> E[Exibe Erro]
    D --> F[Submit: Dados para o Servidor]

🚀 Prática: Cadastro de Usuário

Vamos construir um formulário de cadastro com: 1. Campos: Nome, Email, Senha e Confirmação de Senha. 2. Validação de obrigatoriedade e máscara de email. 3. Desabilitar o botão de enviar até que tudo esteja correto.

🏁 Mini-Projeto da Aula

Crie um formulário de Feedback. O usuário deve avaliar o serviço de 1 a 5 (Dropdown) e escrever um comentário (Textarea). Use Reactive Forms e exiba uma mensagem de sucesso na tela após o "envio" dos dados.

Aula 11: HTTP Client e Consumo de API REST 🌐

Nesta aula, vamos aprender como conectar nossa aplicação Angular a servidores externos para buscar, criar, atualizar e deletar dados usando o HttpClient.

📡 O que é o HttpClient?

É um serviço nativo do Angular que facilita a realização de requisições HTTP (GET, POST, PUT, DELETE) para APIs REST.

  • Baseado em Observables (RxJS).
  • Trata automaticamente a conversão para JSON.
  • Oferece interceptores para gerenciar tokens e erros.

🛠️ Configuração Standalone

No modelo standalone, habilitamos o cliente HTTP no main.ts usando o provider provideHttpClient().

import { bootstrapApplication } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient() // Ativa o HTTP na app
  ]
});

💉 Usando o HttpClient no Serviço

Sempre isolamos as chamadas de API em serviços para manter o código limpo e reutilizável.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class PostService {
  private url = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) {}

  listarPosts() {
    return this.http.get<any[]>(this.url);
  }

  salvarPost(post: any) {
    return this.http.post(this.url, post);
  }
}

📥 Consumindo no Componente

Como o http.get retorna um Observable, precisamos usar o método .subscribe() para receber os dados.

export class ListaPostsComponent {
  posts: any[] = [];

  constructor(private service: PostService) {}

  ngOnInit() {
    this.service.listarPosts().subscribe(dados => {
      this.posts = dados;
    });
  }
}

🌟 Fluxo da Requisição

graph LR
    A[Componente] --> B[Serviço]
    B --> |http.get| C[API REST]
    C --> |JSON Response| B
    B --> |Observable| A
    A --> |subscribe| D[Atualiza Tela]

🚀 Prática: Consumo de API Real

Vamos utilizar a API gratuita JSONPlaceholder para: 1. Listar uma série de postagens em uma lista. 2. Criar um pequeno formulário para "simular" o envio de um novo post. 3. Implementar um botão de deletar que remove o item da interface.

🏁 Mini-Projeto da Aula

Crie um buscador de CEP usando a API do ViaCEP. O usuário digita o CEP, clica no botão e o seu serviço deve retornar o endereço completo para ser exibido na tela.

Macro Rendering Error

File: aulas/aula-12.md

UndefinedError: 'item' is undefined

Traceback (most recent call last):
  File "/home/runner/.cache/pypoetry/virtualenvs/ads-spec-frontend-com-angular-muLS4MHK-py3.11/lib/python3.11/site-packages/mkdocs_macros/plugin.py", line 703, in render
    return md_template.render(**page_variables)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/home/runner/.cache/pypoetry/virtualenvs/ads-spec-frontend-com-angular-muLS4MHK-py3.11/lib/python3.11/site-packages/jinja2/environment.py", line 1295, in render
    self.environment.handle_exception()
  File "/home/runner/.cache/pypoetry/virtualenvs/ads-spec-frontend-com-angular-muLS4MHK-py3.11/lib/python3.11/site-packages/jinja2/environment.py", line 942, in handle_exception
    raise rewrite_traceback_stack(source=source)
  File "<template>", line 55, in top-level template code
  File "/home/runner/.cache/pypoetry/virtualenvs/ads-spec-frontend-com-angular-muLS4MHK-py3.11/lib/python3.11/site-packages/jinja2/environment.py", line 490, in getattr
    return getattr(obj, attribute)
           ^^^^^^^^^^^^^^^^^^^^^^^
jinja2.exceptions.UndefinedError: 'item' is undefined

Aula 13: Arquitetura e Organização Profissional 🏗️

Nesta aula, vamos aprender como estruturar projetos Angular de grande escala seguindo os padrões utilizados pelas maiores empresas de tecnologia.

📁 Padrão LIFT

O Angular recomenda o padrão LIFT: * Locate: Localizar o código rapidamente. * Identify: Identificar o que o arquivo faz pelo nome. * Flat: Manter uma estrutura o mais plana possível (sem pastas infinitas). * Try to be DRY: Evite repetições desnecessárias.

🏛️ Estrutura de Pastas Recomendada

Um projeto profissional geralmente divide as responsabilidades em três pilares:

  1. Core: Serviços globais, interceptores e guards (singleton).
  2. Shared: Componentes visuais genéricos (botões, inputs), pipes e diretivas reutilizáveis.
  3. Features: As funcionalidades do negócio (ex: login, vendas, perfil).
graph TD
    App[src/app] --> Core[core/]
    App --> Shared[shared/]
    App --> Features[features/]
    Features --> Login[login/]
    Features --> Products[products/]

🏷️ Convenções de Nomeclatura

O Angular CLI segue o padrão de kebab-case com sufixos descritivos: * usuario-header.component.ts * auth.service.ts * valida-email.directive.ts

Dica de Ouro

Mantenha cada arquivo com uma única responsabilidade (Single Responsibility Principle). Se um componente tem 1000 linhas, ele deve ser quebrado!

📦 Barrel Files (index.ts)

Para evitar dezenas de linhas de import no topo dos arquivos, usamos arquivos index.ts que exportam tudo de uma pasta.

// features/products/index.ts
export * from './product-list.component';
export * from './product-detail.component';
export * from './product.service';

🧱 Smart vs Dumb (Revisited)

Em arquiteturas profissionais: * Smart Components ficam na pasta features/. * Dumb Components ficam na pasta shared/ ou dentro da pasta de uma feature específica se não forem genéricos.

🚀 Prática: Refatoração de Arquitetura

Vamos reorganizar nosso projeto bagunçado! 1. Crie as pastas core, shared e features. 2. Mova os serviços de autenticação para core. 3. Crie um componente de botão estilizado dentro de shared. 4. Organize as páginas existentes dentro de features.

🏁 Mini-Projeto da Aula

Desenhe um diagrama de pastas para um sistema de E-commerce que contenha: Autenticação, Catálogo, Carrinho e Perfil do Usuário. Aplique os conceitos de Core, Shared e Features.

Aula 14: Estilização Moderna e Componentes de UI 🎨

Nesta aula, vamos aprender como deixar nossa aplicação Angular bonita, profissional e responsiva, explorando o CSS isolado e as bibliotecas de componentes.

👗 Estilização Isolada (View Encapsulation)

Por padrão, o CSS que você escreve em um componente não vaza para o resto da aplicação. O Angular adiciona atributos únicos ao HTML para garantir esse isolamento.

Tipos de Encapsulamento

  • Emulated (Padrão): Simula o isolamento via atributos.
  • None: O CSS se torna global.
  • ShadowDom: Usa a tecnologia nativa do browser para isolamento total.

📦 Bibliotecas de Componentes

Não precisamos reinventar a roda. Podemos usar bibliotecas que já trazem botões, modais e tabelas prontas.

  1. Angular Material: A biblioteca oficial seguindo o Material Design.
  2. PrimeNG: Uma das mais completas, com centenas de componentes.
  3. Tailwind CSS: Uma abordagem baseada em classes utilitárias que está dominando o mercado.

🛠️ Instalando Angular Material

# Adicionando o Material ao projeto
$ ng add @angular/material

Após instalado, basta importar os módulos (ou diretivas standalone) que deseja usar:

import { MatButtonModule } from '@angular/material/button';

@Component({
  standalone: true,
  imports: [MatButtonModule],
  template: `<button mat-raised-button color="primary">Click</button>`
})

🌓 Variáveis CSS e Temas

Use variáveis CSS (--cor-primaria) para facilitar a criação de temas (Light/Dark Mode).

:root {
  --primary-color: #3f51b5;
}

.meu-card {
  background-color: var(--primary-color);
}

🌟 Animações no Angular

O Angular possui um módulo potente para animações de transição de estados.

graph LR
    A[Estado: Inicial] --> |Transição| B[Estado: Final]
    B --> |Trigger| C[Animação na Tela]

🚀 Prática: Interface Premium

Vamos transformar nossa listagem de produtos simples em uma vitrine de luxo: 1. Instale o Angular Material. 2. Use o MatCard para exibir os itens. 3. Adicione um MatToolbar como cabeçalho. 4. Implemente um botão que abre um MatDialog (modal) para ver mais detalhes.

🏁 Mini-Projeto da Aula

Crie uma página de perfil de usuário "Dark Mode" usando apenas variáveis CSS. O usuário deve conseguir alternar entre o tema claro e escuro clicando em um botão que altera uma classe no body da aplicação.

Aula 15: Build, Deploy e Performance 🚀

Nesta aula, vamos aprender como preparar nossa aplicação para o mundo real, otimizando o tamanho do código e publicando o site na internet.

🏗️ O Processo de Build

Quando desenvolvemos, usamos o ng serve. Para produção, precisamos gerar arquivos estáticos (HTML/JS/CSS) otimizados usando o comando build.

# Gerar arquivos para produção
$ ng build

Os arquivos serão gerados na pasta dist/nome-do-projeto.

🌍 Gerenciando Ambientes

Você pode ter configurações diferentes para desenvolvimento e produção (ex: URLs de API). No Angular moderno, usamos as configurações de fileReplacements no angular.json ou arquivos de variáveis de ambiente.

Exemplo de Uso

environment.ts (Dev) vs environment.prod.ts (Produção).

🚀 Deploy no GitHub Pages

Uma das formas mais fáceis de hospedar seu projeto Angular gratuitamente.

# 1. Instale o utilitário
$ npm install -g angular-cli-ghpages

# 2. Faça o build
$ ng build --base-href "https://seu-usuario.github.io/nome-do-repo/"

# 3. Publique
$ npx angular-cli-ghpages --dir=dist/nome-do-projeto

⚡ Performance: Lighthouse

Devemos sempre verificar se nosso site está rápido e acessível. O Lighthouse (no Chrome DevTools) analisa: * Performance (tempo de carregamento). * Acessibilidade (uso de leitores de tela). * Melhores Práticas. * SEO.

🌟 Estratégias de Otimização

  1. Lazy Loading: Já vimos que carregar por demanda reduz o bundle inicial.
  2. Budget: O Angular permite definir alertas se o arquivo JS ficar grande demais.
  3. Images: Use formatos modernos (WebP) e carregamento ocioso (lazy).

🚀 Prática: Deploy da Nossa App

Vamos realizar o ciclo completo: 1. Criar os arquivos de ambiente. 2. Executar o build de produção. 3. Publicar no GitHub Pages (ou simular com um servidor local). 4. Rodar um relatório do Lighthouse e ajustar o que for necessário.

🏁 Mini-Projeto da Aula

Configure as "budgets" no seu arquivo angular.json para emitir um aviso se o pacote principal (main bundle) ultrapassar 1MB. Tente identificar qual parte da sua aplicação (ex: ícones ou bibliotecas pesadas) está consumindo mais espaço.

Aula 16: Projeto Final Integrador 🏆

Chegamos ao fim da nossa jornada! Esta aula é dedicada à consolidação de todo o conhecimento que adquirimos, através do desenvolvimento de uma aplicação completa do zero ao deploy.

📝 O Desafio Final

Você deverá construir um Gerenciador de Filmes/Séries Personalizado utilizando todas as tecnologias estudadas.

Requisitos Técnicos:

  1. Arquitetura: Uso obrigatório de Standalone Components e estrutura de pastas Core/Shared/Features.
  2. Roteamento: Navegação entre Listagem, Detalhes e Cadastro.
  3. Comunicação: Uso de @Input e @Output para criar componentes reutilizáveis (cards e botões).
  4. Serviços e HTTP: Consumir a API do TMDB ou simular com JSON Server.
  5. Formulários: Criar um formulário reativo para "Adicionar aos Favoritos" ou "Avaliar Filme".
  6. RxJS: Implementar uma busca em tempo real com operadores de filtragem e cancelamento.
  7. Estilização: Uso de Angular Material ou Tailwind CSS para uma interface moderna.

🗺️ Mapa de Competências

mindmap
  root((Angular Course))
    Fundamentos
      Componentes
      Módulos vs Standalone
      Data Binding
    Lógica Profissional
      Services
      DI
      HTTP Client
    Reatividade
      RxJS
      Observables
      Async Pipe
    Entrega
      Build
      Performance
      Deploy

🚀 Dicas para o Sucesso

  • Planeje antes: Desenhe as telas e o fluxo de dados no papel ou em uma ferramenta como o Figma.
  • Commit constante: Use o Git para salvar seu progresso passo a passo.
  • Documente: No README do seu projeto final, explique como rodá-lo e quais foram os maiores desafios.

🎁 Próximos Passos na Carreira

Parabéns! Você agora domina o Angular. O que estudar a seguir? * Signals: A novidade que está mudando a reatividade no Angular. * SSR (Server Side Rendering): Usando Angular Universal para SEO. * NGRX: Para gerenciamento de estado global em apps gigantescas.

🏁 Encerramento

Foi um prazer acompanhar você nesta trilha. O mercado de Frontend está sempre evoluindo, e com as bases sólidas que você construiu aqui, o sucesso é apenas uma questão de prática e dedicação.

Boa sorte com seu Projeto Final! 🚀

Exercícios

Banco de Exercícios 🏋️

Pratique os conceitos aprendidos em cada módulo com estas listas de exercícios práticos.

Aula Tópico Material
01 Introdução e Ambiente Acessar Exercícios
02 Estrutura e Componentes Acessar Exercícios
03 Data Binding Acessar Exercícios
04 Diretivas Acessar Exercícios
05 Comunicação @Input/@Output Acessar Exercícios
06 Serviços e DI Acessar Exercícios
07 Roteamento Clássico Acessar Exercícios
08 Standalone Components Acessar Exercícios
09 Roteamento Standalone Acessar Exercícios
10 Formulários Acessar Exercícios
11 HTTP Client Acessar Exercícios
12 RxJS Reativo Acessar Exercícios
13 Arquitetura Profissional Acessar Exercícios
14 Estilização e UI Acessar Exercícios
15 Build e Performance Acessar Exercícios
16 Projeto Integrador Acessar Checklist

Exercícios: Aula 01 📝

Pratique os conceitos básicos de Angular e preparação de ambiente.

Básico

  1. Conceito de SPA: Explique com suas palavras a principal diferença entre uma aplicação SPA e uma aplicação web tradicional (Multi-Page).
  2. Angular CLI: Qual é o comando utilizado para verificar a versão instalada do Angular CLI e do Node.js?

Intermediário

  1. Novo Projeto: Descreva os passos necessários para criar um novo projeto chamado academia-angular, desabilitando os testes iniciais (dica: procure por --skip-tests).
  2. Estrutura de Pastas: Para que serve o arquivo angular.json e por que ele é importante para o desenvolvedor?

Desafio

  1. Execução e Alteração: Crie um projeto, execute-o usando ng serve e altere o conteúdo do título no componente raiz. Adicione também um novo parágrafo <p> com seu nome e o nome da sua cidade no arquivo app.component.html.

Exercícios: Aula 02 📝

Pratique a organização de arquivos e a criação de componentes.

Básico

  1. Componentes: Quais são os quatro arquivos gerados automaticamente pelo comando ng generate component nome-do-componente?
  2. Seletores: Para que serve a propriedade selector nos metadados de um componente?

Intermediário

  1. Registro de Módulo: Na abordagem clássica, em qual array do NgModule o CLI adiciona o novo componente automaticamente?
  2. CLI: Como você criaria um componente dentro de uma subpasta chamada components, usando apenas um comando do CLI? (Exemplo: criar login dentro de src/app/components/login).

Desafio

  1. Layout Aninhado: Crie um componente chamado Pai e outro chamado Filho. Tente exibir o componente Filho dentro do template do componente Pai. Depois, exiba o componente Pai no App.component. Descreva o resultado visual.

Exercícios: Aula 03 📝

Pratique a comunicação entre lógica e visual.

Básico

  1. Interpolação: Crie uma variável titulo no seu componente e exiba-a no HTML usando a sintaxe correta.
  2. Property Binding: Como você alteria dinamicamente a cor de fundo de uma div usando Property Binding com a propriedade style.background-color?

Intermediário

  1. Event Binding: Crie uma função que exiba no console do navegador o que o usuário está digitando em um campo <input>. (Dica: use o evento (input) ou (keyup)).
  2. Two-way Binding: Explique por que o [(ngModel)] é chamado de "Banana in a Box". Qual módulo deve ser importado para que ele funcione?

Desafio

  1. Calculadora Simples: Crie dois campos de input (numéricos) e exiba a soma desses dois valores em tempo real na tela, conforme o usuário digita. Use Two-way binding.

Exercícios: Aula 04 📝

Pratique a manipulação do DOM com diretivas.

Básico

  1. ngIf: Crie um botão "Exibir Detalhes". Ao clicar, um parágrafo de texto deve aparecer ou desaparecer da tela usando *ngIf.
  2. ngFor: Crie um array de strings chamado habilidades. Use o *ngFor para listar essas habilidades em uma lista não ordenada (<ul>).

Intermediário

  1. ngClass: Crie uma variável importante (boolean). Use a diretiva ngClass para aplicar a classe CSS .texto-vermelho a um elemento apenas quando importante for verdadeiro.
  2. ngStyle: Crie um controle de "Tamanho do Texto" (um input range). Use ngStyle para que o tamanho da fonte de um parágrafo mude conforme o valor do input.

Desafio

  1. Filtro Simples: Crie uma lista de números de 1 a 10. Use o *ngFor para exibir os números, mas adicione um *ngIf interno (em um container ou elemento) para que apenas os números pares sejam mostrados na lista final.

Exercícios: Aula 05 📝

Pratique a troca de dados entre componentes.

Básico

  1. Input: No componente Usuario, receba uma variável nome via @Input(). Exiba esse nome no template HTML.
  2. Output: Crie um evento @Output() chamado aoCurtir em um componente de Foto. O evento deve disparar toda vez que o usuário clicar em um ícone de coração.

Intermediário

  1. Objeto Inteiro: É possível passar um objeto inteiro (como um Produto com nome, preco e img) via @Input()? Como seria a sintaxe no componente pai para passar esse objeto?
  2. EventEmitter: Qual a finalidade do comando this.meuEvento.emit(valor) dentro de uma função do componente filho?

Desafio

  1. Carrinho de Compras: Crie um componente ProdutoItem. O pai deve passar as informações do produto via @Input. O filho deve ter um botão "Adicionar ao Carrinho". Ao clicar, o pai deve receber a notificação, receber o ID do produto e aumentar um contador de itens no carrinho que fica no topo da página.

Exercícios: Aula 06 📝

Pratique a criação de serviços e o compartilhamento de dados.

Básico

  1. Geração: Qual o comando CLI completo para gerar um serviço chamado Config dentro da pasta core/services?
  2. ProvidedIn: O que significa o parâmetro { providedIn: 'root' } dentro do decorator @Injectable?

Intermediário

  1. Injeção: Como você injeta um serviço chamado LogService dentro do construtor de um componente? Escreva a linha de código.
  2. Singleton: Se dois componentes diferentes injetarem o mesmo serviço e um deles alterar uma variável dentro desse serviço, o outro componente verá a mudança? Justifique.

Desafio

  1. Simulação de API: Crie um serviço chamado PostService. Ele deve ter um método que retorne um array de objetos (com titulo e autor). Injete esse serviço em um componente e use o *ngFor para exibir esses posts formatados como cards no HTML.

Exercícios: Aula 07 📝

Pratique a navegação em SPAs.

Básico

  1. Tag Principal: Qual é a tag HTML que deve ser colocada no template para que as rotas sejam renderizadas?
  2. Link Interno: Qual diretiva substitui o atributo href do HTML tradicional para evitar o refresh da página?

Intermediário

  1. Parâmetros: Como você define uma rota que aceita um parâmetro chamado username no array de rotas?
  2. Redirect: Como configurar uma rota para que, quando o usuário digitar uma URL inexistente, ele seja redirecionado para a /home?

Desafio

  1. Navegação via Código: Além do routerLink no HTML, como você faria para navegar para a rota /dashboard dentro de uma função no TypeScript? (Dica: Pesquise sobre o serviço Router e o método navigate).

Exercícios: Aula 08 📝

Pratique a transição para o Angular Moderno.

Básico

  1. Flag Standalone: Qual propriedade deve ser adicionada ao decorator @Component para torná-lo um componente independente?
  2. Imports: Onde são importadas as dependências (como CommonModule ou outros componentes) na abordagem Standalone?

Intermediário

  1. Bootstrap: Qual função substitui o platformBrowserDynamic().bootstrapModule() no arquivo main.ts de uma aplicação puramente standalone?
  2. CLI: Escreva o comando do CLI para gerar um componente chamado VideoPlayer que seja standalone desde a sua criação.

Desafio

  1. Migração: Imagine que você tem um componente clássico registrado no AppModule. Liste os 3 passos principais que você faria para transformá-lo em um componente Standalone pronto para ser usado sem módulos.

Exercícios: Aula 09 📝

Pratique a navegação no Angular Moderno.

Básico

  1. Provedor de Rota: Qual função substitui o RouterModule.forRoot() para configurar rotas em uma aplicação standalone?
  2. Importação no Componente: Se eu quero usar o router-outlet em um componente standalone, o que devo adicionar ao seu decorator @Component?

Intermediário

  1. loadComponent: Qual a principal diferença entre a propriedade component e a propriedade loadComponent na definição de uma rota?
  2. Configuração de App: No arquivo main.ts, onde passamos a configuração do roteador para a função bootstrapApplication?

Desafio

  1. Refatoração de Lazy Loading: Transforme a rota abaixo, que usa módulos, para o formato standalone usando componente: 
    // Formato antigo (Módulo)
{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }
    Escreva como ficaria a nova versão.

Exercícios: Aula 10 📝

Pratique a criação de formulários e validações.

Básico

  1. Abordagens: Quais são as duas principais formas de criar formulários no Angular?
  2. ngModel: Em qual das abordagens o ngModel é a peça central para capturar os dados?

Intermediário

  1. Validators: Cite 3 validadores nativos do Angular (ex: Validators.required) e explique o que cada um faz.
  2. FormGroup: No Reactive Forms, para que serve o FormGroup e como ele se relaciona com o FormControl?

Desafio

  1. Formulário Reativo: Crie um pequeno código TypeScript de um FormGroup que tenha dois campos: idade (mínimo 18) e termoAceite (deve ser verdadeiro). Como você configuraria esses validadores?

Exercícios: Aula 11 📝

Pratique a integração com serviços externos.

Básico

  1. Configuração: Qual utilitário devemos adicionar ao array de providers no bootstrap da aplicação para liberar o uso de requisições HTTP?
  2. Verbos HTTP: Quais são os 4 verbos HTTP mais comuns usados em APIs REST para CRUD (Create, Read, Update, Delete)?

Intermediário

  1. Tipagem: Como você definiria a tipagem do retorno de um http.get para que ele retorne um array de uma interface chamada IUsuario?
  2. Assincronismo: O que acontece se você esquecer de chamar o método .subscribe() após uma requisição http.get() no seu componente?

Desafio

  1. Tratamento de Erros: Pesquise como o método .subscribe() pode receber um objeto com next e error. Escreva um exemplo de código que trate o erro caso a API de busca de CEP retorne um erro 404.

Exercícios: Aula 12 📝

Pratique a manipulação de fluxos de dados com RxJS.

Básico

  1. Conceito: Qual a principal diferença entre um Observable e uma Promise?
  2. Async Pipe: Qual o benefício de usar o pipe | async no HTML em vez de fazer o .subscribe() manualmente no TypeScript?

Intermediário

  1. map vs filter: Explique a diferença de comportamento entre o operador map e o operador filter.
  2. BehaviorSubject: Por que o BehaviorSubject é geralmente preferido em relação ao Subject comum para armazenar o estado atual de um usuário logado?

Desafio

  1. Encadeamento: Escreva um exemplo de código usando .pipe() que receba uma lista de números, multiplique cada um por 2 (use map) e depois retorne apenas os números que forem maiores que 10 (use filter).

Exercícios: Aula 13 📝

Pratique a organização de projetos escaláveis.

Básico

  1. LIFT: O que significa o acrônimo LIFT nas recomendações de estilo do Angular?
  2. Pasta Core: Que tipo de arquivos costumamos colocar dentro da pasta core/? Cite 2 exemplos.

Intermediário

  1. Shared vs Core: Qual a principal diferença entre a pasta shared/ e a pasta core/ em termos de instância e uso?
  2. Barrel Files: Explique para que serve um arquivo index.ts dentro de uma pasta de componentes.

Desafio

  1. Proposição de Estrutura: Imagine que você vai criar um módulo de "Gestão de Estoque". Quais pastas e arquivos você criaria para seguir a arquitetura de "Features" ensinada na aula? Descreva a hierarquia.

Exercícios: Aula 14 📝

Pratique a criação de interfaces modernas.

Básico

  1. Isolamento: Explique o que é o "Encapsulamento de Estilo" do Angular e qual a sua principal vantagem.
  2. Angular Material: Qual o comando do CLI para instalar o Angular Material em um projeto existente?

Intermediário

  1. Variáveis CSS: Como você definiria uma variável CSS chamada --main-bg e a utilizaria em um seletor .container?
  2. Tailwind: Qual a principal diferença filosófica entre usar Angular Material e usar Tailwind CSS?

Desafio

  1. Tematização: Escreva um pequeno trecho de código CSS que mude a cor de fundo de um botão quando a classe .dark-theme estiver presente em um elemento pai (como o body).

Exercícios: Aula 15 📝

Pratique a entrega final da sua aplicação.

Básico

  1. Build: Qual o comando do CLI para gerar os arquivos finais de produção de um projeto Angular?
  2. Destino: Para qual pasta (por padrão) o Angular envia os arquivos gerados após o comando de build?

Intermediário

  1. base-href: Para que serve a flag --base-href durante o processo de build para deploy no GitHub Pages?
  2. Otimização: O que o processo de "Minificação" e "Uglification" (ofuscação) faz com o seu código JavaScript final?

Desafio

  1. Análise de Performance: Abra o site que você criou, pressione F12 (DevTools), vá na aba "Lighthouse" e gere um relatório de Desktop. Liste 2 sugestões de melhoria que o relatório deu para o seu projeto.

Projeto Final: Checklist de Entrega 📑

Use este checklist para garantir que seu projeto final atenda a todos os requisitos do curso.

Estrutura

  • [ ] O projeto utiliza apenas Standalone Components?
  • [ ] O projeto segue a organização de pastas Core, Shared e Features?
  • [ ] O arquivo app.module.ts foi removido e o bootstrap ocorre via main.ts?

Funcionalidades

  • [ ] Existe navegação entre pelo menos 3 rotas diferentes?
  • [ ] Há consumo de uma API externa (ou JSONPlaceholder) via HttpClient?
  • [ ] Foi implementado um formulário do tipo Reativo com validações?
  • [ ] Existe uma busca em tempo real usando operadores RxJS?

Design e UX

  • [ ] A interface utiliza Angular Material ou Tailwind CSS?
  • [ ] O site é responsivo (funciona bem em celular e desktop)?
  • [ ] Existe feedback visual para o usuário (loading spinners ou mensagens de erro)?

Finalização

  • [ ] O projeto foi publicado no GitHub Pages?
  • [ ] O README contém instruções de instalação e uso?
  • [ ] Todas as dependências inúteis foram removidas do package.json?

Projetos

Projetos e Portfólio 🚀

Consolide seu conhecimento construindo aplicações do mundo real sugeridas ao final de cada aula.

📝 Mini-Projetos de Aula

Cada aula contém um "Mini-Projeto" específico em seu conteúdo. Verifique as páginas das aulas para os desafios individuais.

🏆 Projeto Final Integrador

O objetivo final é a construção de um Gerenciador de Mídia reativo, integrando todas as fases do curso.

Ir para o Guia do Projeto Final

Projeto 01: Meu Primeiro App Angular 🚀

Objetivo

Criar uma aplicação Angular básica e realizar as primeiras alterações visuais.

Requisitos

  • [ ] Instalar o Angular CLI.
  • [ ] Criar um projeto chamado aula-01-projeto.
  • [ ] Alterar o título no arquivo app.component.html.
  • [ ] Adicionar um parágrafo com uma breve descrição sobre você.
  • [ ] Executar o projeto no navegador usando ng serve.

Desafio Extra

Tente mudar a cor do parágrafo que você criou usando CSS no arquivo app.component.css.

Projeto 02: Layout com Componentes 🏗️

Objetivo

Praticar a criação e organização de componentes para formar um layout de Dashboard.

Requisitos

  • [ ] Criar quatro componentes: Header, Sidebar, Content e Footer.
  • [ ] Organizar o app.component.html para que o Header fique no topo, a Sidebar na esquerda e o Content no centro.
  • [ ] Adicionar cores de fundo diferentes para cada componente para identificá-los.

Desafio Extra

Crie um componente chamado Card e tente repetir ele 3 vezes dentro do componente Content.

Macro Syntax Error

File: projetos/projeto-03.md

Line 9 in Markdown file: Expected an expression, got 'end of print statement' 

- [ ] Exibir o resultado do cálculo na tela usando Interpolação `{{ }}`.

Projeto 04: Lista de Tarefas (Todo) v1 ✅

Objetivo

Aplicar diretivas estruturais para gerenciar uma lista de itens.

Requisitos

  • [ ] Criar um array de tarefas no TypeScript.
  • [ ] Usar *ngFor para listar as tarefas na tela.
  • [ ] Usar *ngIf para exibir uma mensagem "Nenhuma tarefa pendente" se a lista estiver vazia.
  • [ ] Criar um input para adicionar novas tarefas à lista.

Desafio Extra

Adicione um botão ao lado de cada tarefa que permita removê-la da lista.

Projeto 05: Galeria de Produtos 🛒

Objetivo

Praticar a comunicação entre componentes usando @Input e @Output.

Requisitos

  • [ ] Criar um componente pai Catalog e um componente filho ProductCard.
  • [ ] O pai deve enviar as informações do produto via @Input para o filho.
  • [ ] O filho deve ter um botão "Comprar" que emite um evento via @Output.
  • [ ] O pai deve exibir um alerta com o nome do produto sempre que o botão for clicado no filho.

Desafio Extra

Crie uma variável "Carrinho" no componente pai que conte quantos produtos foram clicados.

Projeto 06: Controle de Estoque com Serviços 📦

Objetivo

Centralizar a lógica de dados em um serviço para compartilhamento entre componentes.

Requisitos

  • [ ] Criar um EstoqueService com uma lista privada de produtos.
  • [ ] Implementar métodos adicionar() e listar() no serviço.
  • [ ] Criar dois componentes: um formulário para adicionar e uma lista para exibir.
  • [ ] Ambos os componentes devem injetar e usar o mesmo serviço.

Desafio Extra

Implemente um método no serviço para remover um item pelo ID e use-o no componente de lista.

Projeto 07: Site Institucional 🗺️

Objetivo

Configurar o roteamento clássico (NgModule) para criar uma navegação entre páginas.

Requisitos

  • [ ] Criar três componentes representando as páginas: Home, Sobre e Contato.
  • [ ] Configurar o arquivo app-routing.module.ts.
  • [ ] Usar <router-outlet> no layout principal.
  • [ ] Criar uma barra de navegação com routerLink.

Desafio Extra

Adicione uma rota curinga (**) para lidar com páginas não encontradas, exibindo um componente de erro 404.

Projeto 08: Perfil do Usuário Standalone 📦

Objetivo

Migrar a aplicação para o modelo moderno de Standalone Components.

Requisitos

  • [ ] Criar um componente Perfil com a flag --standalone.
  • [ ] Importar o CommonModule diretamente no componente.
  • [ ] Rodar a aplicação usando bootstrapApplication(AppComponent) no main.ts.
  • [ ] Remover o arquivo app.module.ts se possível.

Desafio Extra

Importe um componente standalone dentro de outro componente standalone e use-o no template.

Projeto 09: App de Notícias com Roteamento Moderno 🗺️

Objetivo

Configurar o roteamento em uma aplicação puramente standalone.

Requisitos

  • [ ] Usar a função provideRouter() no main.ts.
  • [ ] Criar rotas para Noticias e Esportes.
  • [ ] Implementar Lazy Loading usando loadComponent.
  • [ ] Importar RouterOutlet e RouterLink nos componentes standalone necessários.

Desafio Extra

Passe um parâmetro de ID na URL da notícia e exiba-o na tela do componente de detalhe.

Projeto 10: Formulário de Contato Reativo 📝

Objetivo

Desenvolver um formulário robusto com validações em tempo real usando Reactive Forms.

Requisitos

  • [ ] Criar um FormGroup com os campos: Nome, E-mail e Assunto.
  • [ ] Adicionar validadores: required para todos e email para o campo de e-mail.
  • [ ] Exibir mensagens de erro apenas quando o campo for "touched" e estiver "invalid".
  • [ ] Desabilitar o botão de envio até que o formulário seja válido.

Desafio Extra

Crie um validador personalizado que impeça o uso de e-mails de domínios específicos (ex: teste.com).

Projeto 11: Buscador de CEP (ViaCEP) 🌐

Objetivo

Conectar a aplicação ao mundo real consumindo uma API REST externa.

Requisitos

  • [ ] Habilitar o provideHttpClient() no bootstrap.
  • [ ] Criar um serviço para realizar a chamada ao https://viacep.com.br/ws/.
  • [ ] Injetar o serviço no componente e processar o retorno no .subscribe().
  • [ ] Exibir o Logradouro, Bairro e Cidade na tela.

Desafio Extra

Trate o erro caso o CEP digitado não exista ou tenha formato inválido, exibindo uma mensagem amigável.

Projeto 12: Barra de Busca Inteligente com RxJS ⚡

Objetivo

Usar operadores de fluxo de dados para otimizar pesquisas em tempo real.

Requisitos

  • [ ] Criar um campo de busca que emite eventos a cada tecla digitada.
  • [ ] Usar debounceTime(300) para não disparar requisições a cada letra.
  • [ ] Usar switchMap para cancelar buscas anteriores se a atual mudar.
  • [ ] Exibir os resultados usando o Async Pipe no HTML.

Desafio Extra

Use o operador distinctUntilChanged para evitar buscas idênticas consecutivas.

Projeto 13: Refactoring para Arquitetura Profissional 🏗️

Objetivo

Reorganizar a estrutura de pastas do projeto seguindo padrões de mercado.

Requisitos

  • [ ] Criar as pastas core/, shared/ e features/.
  • [ ] Mover componentes de layout (NavBar, Footer) para a pasta correta.
  • [ ] Mover serviços de autenticação ou globais para core/.
  • [ ] Implementar Barrel Files (index.ts) para exportar múltiplos componentes de uma pasta.

Desafio Extra

Crie uma pasta models/ dentro de shared/ e defina interfaces TypeScript para as principais entidades do seu projeto.

Projeto 14: Dashboard com Angular Material 🎨

Objetivo

Aplicar bibliotecas de componentes profissionais para elevar o nível visual da app.

Requisitos

  • [ ] Instalar o Angular Material usando ng add.
  • [ ] Usar o componente MatToolbar e MatButton no cabeçalho.
  • [ ] Criar uma listagem de dados usando MatTable ou MatCard.
  • [ ] Implementar um botão de "Excluir" que abre um MatDialog de confirmação.

Desafio Extra

Configure um tema personalizado alterando as cores primária e acento no arquivo de estilos globais.

Projeto 15: Deploy Real no GitHub Pages 🚀

Objetivo

Realizar o build oficial e publicar o projeto integrado na internet.

Requisitos

  • [ ] Configurar os arquivos de environment (dev/prod).
  • [ ] Executar o comando ng build --base-href /seu-repositorio/.
  • [ ] Utilizar a ferramenta angular-cli-ghpages para fazer o upload.
  • [ ] Verificar o site rodando na URL pública do GitHub.

Desafio Extra

Rode um teste de Lighthouse no Chrome DevTools e tente atingir uma pontuação acima de 90 em Performance e Acessibilidade.

Projeto 16: Projeto Final - Gerenciador de Filmes 🏆

Objetivo

Construir uma aplicação completa integrando todos os pilares do curso Angular.

Requisitos

  • [ ] Sistema 100% Standalone com Arquitetura Core/Shared/Features.
  • [ ] Navegação completa entre Home, Busca de Filmes e Detalhes.
  • [ ] Busca reativa (debounce, switchMap) consumindo a API do TMDB.
  • [ ] Formulário de avaliação de filmes com validações.
  • [ ] Design responsivo e moderno usando Material Design ou Tailwind.
  • [ ] Deploy funcional no GitHub Pages.

Desafio Extra

Implemente a funcionalidade de "Favoritos" usando um BehaviorSubject para que o número de filmes favoritos atualize em tempo real no cabeçalho do site.

Quizzes

Quizzes de Conhecimento 🧠

Teste seu aprendizado com nossos quizzes rápidos por aula.

Quiz: Aula 01 ❓

Teste seus conhecimentos sobre o ecossistema Angular e SPAs.

  1. O que significa a sigla SPA?

    • ( ) Simple Page Application
    • (x) Single Page Application
    • ( ) Static Page Architecture
    • ( ) System Process Angular
    • Explicação: SPA é o acrônimo para Single Page Application, onde a aplicação roda em uma única página HTML.

  2. Qual empresa é a principal mantenedora do Angular?

    • ( ) Facebook
    • ( ) Microsoft
    • (x) Google
    • ( ) Amazon
    • Explicação: O Angular é desenvolvido e mantido pelo Google.

  3. Qual ferramenta é utilizada para gerenciar pacotes no ecossistema Angular (Node.js)?

    • ( ) Git
    • (x) NPM
    • ( ) Angular CLI
    • ( ) Maven
    • Explicação: O NPM (Node Package Manager) é o gerenciador de pacotes padrão do Node.js.

  4. Qual o comando do Angular CLI para criar um novo projeto?

    • ( ) ng start
    • ( ) ng create
    • (x) ng new
    • ( ) ng build
    • Explicação: O comando ng new <nome> inicializa um novo projeto.

  5. Onde fica o código-fonte principal de uma aplicação Angular?

    • ( ) node_modules/
    • (x) src/
    • ( ) assets/
    • ( ) angular.json
    • Explicação: A pasta src/ contém todo o desenvolvimento da aplicação.

  6. Qual arquivo contém as dependências do projeto (bibliotecas)?

    • ( ) main.ts
    • ( ) index.html
    • (x) package.json
    • ( ) styles.css
    • Explicação: O package.json lista todas as bibliotecas e scripts do projeto.

  7. Como o Angular renderiza partes da tela sem recarregar a página?

    • ( ) Usando iFrames
    • (x) Manipulando o DOM dinamicamente via JavaScript
    • ( ) Reiniciando o servidor
    • ( ) Enviando um novo HTML completo do servidor
    • Explicação: O Angular usa JavaScript para atualizar apenas as partes necessárias da página.

  8. O que é o Angular CLI?

    • ( ) Um editor de código
    • ( ) Um banco de dados
    • (x) Uma interface de linha de comando para automação
    • ( ) Um servidor de produção
    • Explicação: CLI significa Command Line Interface, usada para criar, desenvolver e testar aplicações.

  9. Qual a linguagem padrão utilizada no desenvolvimento com Angular moderno?

    • ( ) Java
    • ( ) Python
    • (x) TypeScript
    • ( ) Ruby
    • Explicação: O TypeScript é a linguagem base e recomendada para projetos Angular.

  10. Para que serve o comando ng serve?

    • ( ) Para fazer o build final
    • ( ) Para instalar plugins
    • (x) Para rodar um servidor de desenvolvimento local
    • ( ) Para deletar o projeto
    • Explicação: O ng serve compila a aplicação e inicia um servidor local para testes.

Quiz: Aula 02 ❓

Teste seus conhecimentos sobre a estrutura de um projeto Angular e seus componentes.

  1. Qual comando é o atalho para gerar um novo componente?

    • ( ) ng c g
    • (x) ng g c
    • ( ) generate component ng
    • ( ) component new
    • Explicação: ng g c é o atalho oficial para ng generate component.

  2. Onde se define o nome da tag HTML personalizada do componente?

    • ( ) No nome da classe
    • ( ) No nome do arquivo
    • (x) Na propriedade selector do decorator @Component
    • ( ) No app.module.ts
    • Explicação: O selector define como chamamos o componente no HTML (ex: <app-footer>).

  3. Para que serve o arquivo main.ts?

    • ( ) Para configurar o CSS global
    • (x) Como ponto de entrada para inicializar a aplicação (bootstrap)
    • ( ) Para listar as dependências do NPM
    • ( ) Para guardar imagens
    • Explicação: O main.ts é o primeiro código executado, responsável por carregar o módulo raiz.

  4. Qual decorator é usado para transformar uma classe em um componente Angular?

    • ( ) @Module
    • ( ) @Injectable
    • (x) @Component
    • ( ) @Directive
    • Explicação: @Component é o decorator que fornece os metadados necessários.

  5. Na abordagem clássica, onde os componentes devem ser declarados?

    • ( ) Em angular.json
    • (x) No array declarations de um NgModule
    • ( ) No arquivo styles.css
    • ( ) Dentro do main.ts
    • Explicação: O NgModule precisa saber da existência do componente via declarations.

  6. Qual arquivo contém a estrutura visual (marcação) do componente?

    • ( ) .ts
    • ( ) .css
    • (x) .html
    • ( ) .spec.ts
    • Explicação: O arquivo HTML define o template do componente.

  7. O que acontece se você deletar a pasta node_modules?

    • ( ) O código fonte é perdido
    • ( ) O projeto continua funcionando
    • (x) A aplicação para de funcionar e requer um npm install
    • ( ) O Angular CLI é desinstalado do computador
    • Explicação: A pasta contém as bibliotecas necessárias para rodar o projeto.

  8. Qual arquivo permite configurar o prefixo padrão (ex: 'app') dos seletores?

    • ( ) package.json
    • ( ) main.ts
    • (x) angular.json
    • ( ) index.html
    • Explicação: O angular.json possui configurações de arquitetura e prefixos do projeto.

  9. Como chamamos um componente que não tem lógica e serve apenas para exibir dados?

    • ( ) Smart Component
    • (x) Dumb (ou Presentational) Component
    • ( ) Component Secret
    • ( ) Service Component
    • Explicação: Componentes de apresentação apenas exibem o que recebem via propriedades.

  10. Qual a função do arquivo .spec.ts?

    • ( ) Estilização do componente
    • ( ) Configuração de rotas
    • (x) Testes unitários do componente
    • ( ) Bootstrap da aplicação
    • Explicação: Arquivos .spec são usados para testes automatizados.

Macro Syntax Error

File: quizzes/quiz-03.md

Line 8 in Markdown file: Expected an expression, got 'end of print statement' 

    * (x) {{ }}

Quiz: Aula 04 ❓

Teste seus conhecimentos sobre o uso de diretivas estruturais e de atributo.

  1. Qual caractere identifica uma Diretiva Estrutural?

    • ( ) @
    • ( ) #
    • (x) *
    • ( ) &
    • Explicação: Diretivas estruturais levam o asterisco (ex: *ngIf).

  2. Para que serve o *ngIf?

    • ( ) Para criar loops de dados
    • (x) Para exibir ou remover elementos do DOM condicionalmente
    • ( ) Para mudar a cor do texto
    • ( ) Para importar módulos
    • Explicação: O *ngIf adiciona ou remove elementos baseado em uma expressão booleana.

  3. Qual diretiva é usada para iterar sobre uma lista de objetos?

    • ( ) *ngShow
    • ( ) *ngLoop
    • (x) *ngFor
    • ( ) *ngList
    • Explicação: O *ngFor é a diretiva oficial para repetição de elementos.

  4. Qual a principal diferença entre Diretiva Estrutural e de Atributo?

    • ( ) Uma é para mobile, outra para desktop
    • (x) A estrutural altera o DOM (adiciona/remove), a de atributo altera aparência/comportamento
    • ( ) A de atributo usa asterisco
    • ( ) Não há diferença, são sinônimos
    • Explicação: Diretivas estruturais mudam o layout (estrutura), as de atributo mudam o elemento existente.

  5. Como escrevemos a sintaxe básica de um *ngFor de uma lista de nomes?

    • ( ) *ngFor="nome in nomes"
    • ( ) *ngFor="let nomes of nome"
    • (x) *ngFor="let nome of nomes"
    • ( ) *ngFor="for nome of nomes"
    • Explicação: A sintaxe let item of lista é a padrão do Angular.

  6. A diretiva ngClass espera qual tipo de dado geralmente?

    • ( ) Apenas uma string
    • (x) Um objeto ou um array de classes
    • ( ) Um número inteiro
    • ( ) Uma URL
    • Explicação: Geralmente passamos um objeto { 'classe': condicao }.

  7. É possível usar *ngIf e *ngFor no MESMO elemento HTML?

    • ( ) Sim, é a prática recomendada
    • (x) Não, o Angular não permite duas diretivas estruturais no mesmo elemento
    • ( ) Sim, mas apenas se o *ngIf vier primeiro
    • ( ) Sim, mas apenas em tags <div>
    • Explicação: O Angular proíbe múltiplas diretivas estruturais em um só elemento para evitar conflitos de renderização.

  8. Qual diretiva usaríamos para mudar a cor de fundo de um botão baseado em um valor variável?

    • ( ) ngClass apenas
    • ( ) *ngIf
    • (x) ngStyle ou ngClass
    • ( ) ngModel
    • Explicação: Ambas podem ser usadas, mas ngStyle é ideal para valores CSS diretos.

  9. O que acontece se a condição do *ngIf for falsa?

    • ( ) O elemento fica invisível (display: none)
    • (x) O elemento é completamente removido da árvore do DOM
    • ( ) O texto do elemento é deletado
    • ( ) O navegador emite um erro
    • Explicação: O Angular remove fisicamente o elemento do código HTML renderizado.

  10. Para criar uma diretiva personalizada pelo CLI, qual o comando?

    • ( ) ng g c minha-diretiva
    • ( ) ng g s minha-diretiva
    • (x) ng g d minha-diretiva
    • ( ) ng new minha-diretiva
    • Explicação: ng g d é o atalho para ng generate directive.

Quiz: Aula 05 ❓

Teste seus conhecimentos sobre a troca de dados entre componentes Pai e Filho.

  1. Qual decorator é usado para receber dados do componente pai?

    • ( ) @Output()
    • (x) @Input()
    • ( ) @Injectable()
    • ( ) @ViewChild()
    • Explicação: @Input() abre uma porta de entrada para dados externos ao componente.

  2. Como o filho envia informações para o pai?

    • ( ) Usando variáveis globais
    • ( ) Usando cookies
    • (x) Emitindo eventos via @Output() e EventEmitter
    • ( ) Alterando o arquivo do pai diretamente
    • Explicação: O componente filho emite um evento que o pai escuta através do Event Binding.

  3. Onde se faz o "binding" da propriedade @Input?

    • ( ) No TypeScript do filho
    • (x) No template HTML do pai (onde o seletor do filho é chamado)
    • ( ) No app.module.ts
    • ( ) No main.ts
    • Explicação: O pai passa o dado no HTML ao chamar o componente: <app-filho [prop]="valor">.

  4. O que é o $event na função do pai que escuta um @Output?

    • ( ) Um objeto do sistema que contém a data atual
    • (x) O valor ou objeto emitido pelo componente filho
    • ( ) O evento de clique do mouse nativo
    • ( ) Um erro de sintaxe
    • Explicação: $event captura o que foi enviado pelo emit() do filho.

  5. Um componente pode ter múltiplos @Input e @Output?

    • (x) Sim, quantos forem necessários para sua funcionalidade
    • ( ) Não, apenas um de cada
    • ( ) Sim, mas apenas se forem do tipo string
    • ( ) Não, componentes puros não usam decorators
    • Explicação: Componentes complexos podem ter diversas portas de entrada e saída.

  6. Qual o papel do EventEmitter?

    • ( ) Gerenciar o banco de dados
    • ( ) Criar formulários
    • (x) Facilitar a criação e emissão de eventos personalizados
    • ( ) Instalar dependências
    • Explicação: O EventEmitter é a classe que provê o método emit().

  7. Qual tipo de comunicação o @Input representa?

    • ( ) Bidirecional
    • ( ) Ascendente (Filho para Pai)
    • (x) Descendente (Pai para Filho)
    • ( ) Lateral (Irmão para Irmão)
    • Explicação: Os dados descem na hierarquia através de propriedades.

  8. O que é um "Dumb Component"?

    • ( ) Um componente que não funciona
    • (x) Um componente que apenas exibe dados e não tem lógica de negócio pesada
    • ( ) Um componente que não tem HTML
    • ( ) O módulo principal da aplicação
    • Explicação: Componentes "burros" (ou de apresentação) focam na UI e reuso.

  9. Como chamamos um componente que gerencia o estado e as regras de negócio?

    • ( ) Dumb Component
    • ( ) Simple Component
    • (x) Smart Component
    • ( ) Service Component
    • Explicação: Componentes "inteligentes" orquestram a lógica e os dados.

  10. Por que decorar uma propriedade com @Input()?

    • ( ) Para torná-la privada
    • (x) Para torná-la acessível via Property Binding no template do pai
    • ( ) Para salvá-la no LocalStorage
    • ( ) Para injetá-la em um serviço
    • Explicação: Sem o decorator, o Angular não permite que o pai atribua valor a ela no template.

Quiz: Aula 06 ❓

Teste seus conhecimentos sobre Serviços e Injeção de Dependência.

  1. Qual decorator identifica uma classe como um serviço injetável?

    • ( ) @Component()
    • ( ) @NgModule()
    • (x) @Injectable()
    • ( ) @Input()
    • Explicação: O @Injectable() avisa ao Angular que a classe pode ser injetada em outras.

  2. Como se chama o padrão onde existe apenas uma instância de uma classe para toda a aplicação?

    • ( ) Factory
    • ( ) Observer
    • (x) Singleton
    • ( ) Prototype
    • Explicação: Serviços com providedIn: 'root' funcionam como Singletons.

  3. Onde geralmente fazemos a injeção do serviço no componente?

    • ( ) No método ngOnInit()
    • (x) No constructor()
    • ( ) Nos metadados do @Component
    • ( ) No arquivo CSS
    • Explicação: O construtor é o local padrão para definir as dependências do componente.

  4. Qual o comando CLI para criar um serviço?

    • ( ) ng g c servico
    • (x) ng g s servico
    • ( ) ng new servico
    • ( ) ng build s
    • Explicação: ng g s (generate service) é o comando correto.

  5. Serviços devem conter lógica de interface (DOM)?

    • ( ) Sim, para facilitar a manipulação
    • (x) Não, eles devem focar em dados e lógica de negócio
    • ( ) Sim, se o componente for muito grande
    • ( ) Apenas se for para mudar a cor de um botão
    • Explicação: Serviços devem ser independentes da UI para serem reutilizáveis.

  6. O que acontece se você não usar o private ou public no construtor ao injetar?

    • ( ) O código não compila
    • (x) O serviço não se torna uma propriedade da classe acessível nos métodos
    • ( ) O serviço é deletado
    • ( ) O Angular injeta em dobro
    • Explicação: Usar o modificador de acesso cria automaticamente uma propriedade na classe.

  7. Para que serve a Injeção de Dependência?

    • ( ) Para aumentar o tamanho do código
    • (x) Para desacoplar a criação do objeto de quem o utiliza
    • ( ) Para acelerar o download do site
    • ( ) Para substituir o HTML
    • Explicação: A DI facilita o teste e a manutenção ao gerenciar as instâncias automaticamente.

  8. Posso injetar um serviço dentro de outro serviço?

    • (x) Sim, é perfeitamente possível e comum
    • ( ) Não, serviços só podem ser injetados em componentes
    • ( ) Sim, mas apenas se o serviço for do tipo AuthService
    • ( ) Não, gera erro de referência circular sempre
    • Explicação: O Angular permite hierarquias de injeção entre serviços.

  9. O que é o providedIn?

    • ( ) Um método para somar números
    • (x) Uma propriedade que define o escopo de visibilidade do serviço
    • ( ) Uma tag HTML
    • ( ) Um comando do Git
    • Explicação: Define onde o "Injetor" do Angular deve registrar o serviço.

  10. Qual a vantagem de usar um serviço para buscar dados de uma API?

    • ( ) O código fica mais bonito
    • (x) Centraliza a lógica de acesso a dados e facilita mudanças futuras
    • ( ) O Angular obriga a fazer assim
    • ( ) Diminui o número de arquivos
    • Explicação: Centralizar dados permite que qualquer parte da app acesse a mesma fonte de verdade.

Quiz: Aula 07 ❓

Teste seus conhecimentos sobre o Angular Router (Abordagem Clássica).

  1. Qual módulo deve ser importado para habilitar o roteamento?

    • ( ) HttpModule
    • (x) RouterModule
    • ( ) NavigationModule
    • ( ) AppRoutingModule (Apenas)
    • Explicação: O RouterModule contém todas as diretivas e serviços de rota.

  2. Onde as rotas são declaradas na abordagem clássica?

    • ( ) No main.ts
    • ( ) No index.html
    • (x) No arquivo app-routing.module.ts
    • ( ) No angular.json
    • Explicação: É o arquivo padrão gerado pelo CLI para organizar as rotas.

  3. Qual a função do <router-outlet>?

    • ( ) Criar um link para outra página
    • (x) Atuar como um placeholder onde o componente da rota ativa será exibido
    • ( ) Fazer o build da aplicação
    • ( ) Guardar imagens de background
    • Explicação: É o local onde o Angular "injeta" o componente da rota selecionada.

  4. Por que NÃO usar href em uma SPA Angular?

    • ( ) Porque o Angular não suporta tags <a>
    • (x) Porque o href força o recarregamento total da página, perdendo o estado da SPA
    • ( ) Porque o href é apenas para sites externos
    • ( ) Porque o CSS não funciona com href
    • Explicação: O href destrói a instância atual da aplicação e reinicia o browser.

  5. Como definimos uma rota padrão (vazia)?

    • ( ) { path: '*', component: Home }
    • (x) { path: '', component: Home }
    • ( ) { path: 'default', component: Home }
    • ( ) { path: '/', component: Home }
    • Explicação: O caminho vazio '' representa a raiz da aplicação.

  6. O que é o pathMatch: 'full'?

    • ( ) Garante que a página ocupe a tela cheia
    • (x) Garante que a rota combine exatamente com o caminho vazio
    • ( ) Um comando de estilização
    • ( ) Uma configuração de segurança
    • Explicação: Evita que rotas vazias coincidam com qualquer outra rota.

  7. Qual serviço usamos para ler parâmetros da URL (ex: :id)?

    • ( ) Router
    • ( ) Location
    • (x) ActivatedRoute
    • ( ) UrlService
    • Explicação: ActivatedRoute fornece informações sobre a rota que está ativa no momento.

  8. O que acontece se um caminho na URL não existir e não houver rota curinga?

    • ( ) O Angular exibe uma tela azul
    • ( ) O site explode
    • (x) O console exibe um erro e nada é renderizado no router-outlet
    • ( ) O site volta para o Google
    • Explicação: É boa prática criar uma rota para "Página não encontrada" (**).

  9. O que é Lazy Loading (introdução)?

    • ( ) Um erro de performance
    • ( ) Carregar imagens bem devagar
    • (x) Carregar módulos apenas quando o usuário acessa a rota correspondente
    • ( ) Deletar arquivos que não são usados
    • Explicação: Melhora o tempo de carregamento inicial da aplicação.

  10. A diretiva routerLinkActive serve para:

    • ( ) Ativar o roteamento
    • (x) Adicionar uma classe CSS ao link quando a rota dele estiver ativa
    • ( ) Deletar a rota do histórico
    • ( ) Criar um link externo
    • Explicação: Útil para destacar o item do menu em que o usuário se encontra.

Quiz: Aula 08 ❓

Teste seus conhecimentos sobre o modelo moderno de Standalone Components.

  1. Standalone Components foram introduzidos em qual versão estável do Angular?

    • ( ) 8
    • ( ) 10
    • ( ) 12
    • (x) 14/15
    • Explicação: O suporte completo e estável veio principalmente no Angular 15.

  2. Qual a principal vantagem de não usar NgModules?

    • ( ) O código fica maior
    • (x) Menos "boilerplate" (código repetitivo) e melhor performance de carregamento
    • ( ) Não precisa de TypeScript
    • ( ) O site fica apenas em preto e branco
    • Explicação: Simplifica a curva de aprendizado e melhora o tree-shaking do build.

  3. Onde colocamos o CommonModule em um componente standalone para usar diretivas como *ngIf?

    • ( ) No app.module.ts
    • ( ) No construtor
    • (x) No array imports do decorator @Component
    • ( ) No arquivo CSS
    • Explicação: Componentes standalone gerenciam suas próprias dependências.

  4. Um componente Standalone pode importar outro componente Standalone?

    • (x) Sim, basta adicioná-lo ao array de imports
    • ( ) Não, componentes só podem ser importados por módulos
    • ( ) Sim, mas apenas se estiverem na mesma pasta
    • ( ) Não, gera erro de compilação
    • Explicação: O reuso entre componentes standalone é direto via imports.

  5. Para iniciar a aplicação Standalone, usamos:

    • ( ) bootstrapModule
    • (x) bootstrapApplication
    • ( ) initApp
    • ( ) ngStart
    • Explicação: bootstrapApplication é a nova forma de dar partida na app sem um módulo raiz.

  6. O que acontece com o arquivo app.module.ts em um projeto 100% standalone?

    • ( ) Ele é obrigatório mas fica vazio
    • (x) Ele pode ser completamente removido do projeto
    • ( ) Ele se torna um arquivo de imagem
    • ( ) Ele muda de nome para app.component.ts
    • Explicação: Em aplicações modernas puras, o arquivo de módulo não existe mais.

  7. Como o Angular CLI sabe que deve criar um componente standalone?

    • ( ) Ele adivinha pelo seu nome
    • (x) Através da flag --standalone ou configuração no angular.json
    • ( ) Lendo o arquivo package.json
    • ( ) Não existe comando para isso
    • Explicação: A flag --standalone instrui o CLI a adicionar as propriedades corretas.

  8. Componentes Standalone funcionam dentro de módulos clássicos?

    • (x) Sim, basta importá-los no array imports do NgModule
    • ( ) Não, são tecnologias incompatíveis
    • ( ) Sim, mas apenas em versões beta do Angular
    • ( ) Apenas se o módulo também for standalone
    • Explicação: O Angular permite a convivência entre os dois modelos durante a transição.

  9. Qual o impacto dos standalone components no "Lazy Loading"?

    • ( ) Fica mais difícil
    • (x) Fica mais simples e direto carregar componentes individuais
    • ( ) Não é mais possível fazer lazy loading
    • ( ) O lazy loading fica mais lento
    • Explicação: O roteamento moderno aproveita a independência dos componentes para carregar código sob demanda.

  10. A propriedade standalone: true é obrigatória para:

    • ( ) Todos os arquivos .ts
    • (x) Apenas para componentes, diretivas e pipes que operam sem um módulo
    • ( ) Para os serviços
    • ( ) Para as interfaces
    • Explicação: Pipe, Diretivas e Componentes são os três tipos que podem ser standalone.

Quiz: Aula 09 ❓

Teste seus conhecimentos sobre o roteamento no modelo Standalone do Angular.

  1. Qual função é usada no main.ts para registrar as rotas?

    • ( ) registerRoutes()
    • (x) provideRouter()
    • ( ) useRouter()
    • ( ) bootstrapRoutes()
    • Explicação: provideRouter() é o novo utilitário de configuração global de navegação.

  2. Como fazemos o Lazy Loading de um componente standalone?

    • ( ) Usando component: () => import(...)
    • (x) Usando a propriedade loadComponent: () => import(...)
    • ( ) Usando lazyComponent
    • ( ) Não é possível, apenas módulos têm lazy loading
    • Explicação: loadComponent substitui o loadChildren para componentes individuais.

  3. Onde as configurações de "Providers" (como rotas e APIs) são feitas agora?

    • ( ) No app.module.ts
    • ( ) No index.html
    • (x) No segundo argumento da função bootstrapApplication
    • ( ) No arquivo .css
    • Explicação: O objeto de configuração do bootstrap centraliza os provedores globais.

  4. Preciso de um arquivo app-routing.module.ts no modelo standalone?

    • ( ) Sim, ele continua obrigatório
    • (x) Não, as rotas podem ser definidas em um simples arquivo de constantes TS
    • ( ) Sim, mas apenas para definir parâmetros de URL
    • ( ) Sim, mas o nome muda para route.config.ts
    • Explicação: O arquivo de módulo de rota se torna opcional e geralmente é removido.

  5. Para usar routerLink em um componente standalone, o componente precisa importar:

    • ( ) CommonModule apenas
    • (x) RouterLink ou RouterModule
    • ( ) Nada, o Angular injeta automaticamente
    • ( ) FormModule
    • Explicação: Componentes standalone devem ser explícitos sobre suas dependências de template.

  6. Qual o retorno da função provideRouter(routes)?

    • ( ) Um array de strings
    • (x) Um objeto de configuração para o sistema de Injeção de Dependência
    • ( ) Uma tag HTML
    • ( ) Uma URL
    • Explicação: Ele retorna um Provider que o Angular usa para inicializar o serviço de roteamento.

  7. A propriedade path mudou entre o modelo clássico e o standalone?

    • ( ) Sim, agora usamos @path
    • (x) Não, a definição dos caminhos permanece idêntica
    • ( ) Sim, agora os caminhos devem começar com /
    • ( ) Sim, não usamos mais strings
    • Explicação: A estrutura do objeto Route é retrocompatível na maioria das propriedades.

  8. O que o loadComponent melhora na aplicação?

    • ( ) Diminui o número de linhas de código
    • (x) Diminui o tamanho do pacote inicial (bundle size), melhorando o carregamento
    • ( ) Aumenta a segurança do site
    • ( ) Muda a cor dos botões
    • Explicação: Ao quebrar a app em pequenos pedaços, o navegador baixa menos código inicialmente.

  9. Posso usar provideRouter junto com outros providers, como o provideHttpClient?

    • (x) Sim, eles convivem no mesmo array de providers do bootstrap
    • ( ) Não, apenas um provider é permitido por aplicação
    • ( ) Sim, mas apenas se o roteador vier por último
    • ( ) Apenas em modo de produção
    • Explicação: O bootstrap aceita uma lista de diversos provedores de serviços.

  10. Qual o comando para gerar o arquivo de rotas standalone pelo CLI?

    • ( ) ng generate routes
    • ( ) ng g r
    • (x) Geralmente criamos o arquivo app.routes.ts manualmente ou via setup inicial (ng new --standalone)
    • ( ) ng build --routes
    • Explicação: O CLI cria este arquivo automaticamente se você escolher o modo standalone ao iniciar um projeto novo.

Quiz: Aula 10 ❓

Teste seus conhecimentos sobre o sistema de formulários do Angular.

  1. Qual módulo deve ser importado para usar Reactive Forms?

    • ( ) FormsModule
    • (x) ReactiveFormsModule
    • ( ) HttpClientModule
    • ( ) CommonModule
    • Explicação: ReactiveFormsModule fornece as ferramentas para o modelo reativo (FormControl, FormGroup).

  2. Qual propriedade do HTML vincula um input a um controle no Reactive Forms?

    • ( ) name
    • ( ) [(ngModel)]
    • (x) formControlName
    • ( ) id
    • Explicação: formControlName faz a ponte entre a tag HTML e o objeto criado no TypeScript.

  3. O que o estado touched de um campo significa?

    • ( ) O usuário passou o mouse por cima
    • (x) O usuário entrou e saiu do campo (foco perdido)
    • ( ) O valor do campo foi alterado
    • ( ) O campo foi deletado
    • Explicação: touched indica que o usuário já interagiu com aquele campo.

  4. Como definimos múltiplos validadores para um único campo no Reactive Forms?

    • ( ) Separando por ponto e vírgula
    • ( ) Não é possível, apenas um é permitido
    • (x) Passando um array de validadores no segundo argumento do FormControl
    • ( ) Usando o comando ngAddValidator
    • Explicação: Ex: new FormControl('', [Validators.required, Validators.email]).

  5. Qual abordagem é a mais recomendada para formulários grandes e complexos?

    • ( ) Template-driven
    • (x) Reactive Forms
    • ( ) HTML puro
    • ( ) PHP
    • Explicação: Reactive Forms oferecem mais controle, facilidade de teste e robustez.

  6. O que faz o validador Validators.pattern?

    • ( ) Muda a cor do fundo
    • (x) Valida o campo contra uma Expressão Regular (Regex)
    • ( ) Cria um padrão de repetição
    • ( ) Deleta o valor
    • Explicação: Útil para validar senhas, CPFs ou formatos específicos.

  7. Como acessar o valor total de um formulário reativo?

    • ( ) this.meuForm.getValue()
    • (x) this.meuForm.value
    • ( ) document.getElementById('form').value
    • ( ) ngValue
    • Explicação: A propriedade .value retorna um objeto JSON com todos os pares chave/valor do form.

  8. O que acontece se o formulário estiver com status: INVALID?

    • ( ) O site trava
    • ( ) O Angular limpa os campos automaticamente
    • (x) A propriedade meuForm.invalid será verdadeira, permitindo desabilitar botões
    • ( ) O usuário recebe um alerta sonoro
    • Explicação: O status permite controlar a interface e impedir envios incorretos.

  9. O FormBuilder serve para:

    • ( ) Criar o design do formulário (CSS)
    • (x) Uma forma sintática mais curta de criar Group e Controls (Syntactic Sugar)
    • ( ) Fazer o build da aplicação
    • ( ) Enviar os dados via POST
    • Explicação: O serviço FormBuilder simplifica a escrita de formulários complexos.

  10. Posso criar validadores personalizados?

    • (x) Sim, criando funções que retornam erros caso a condição não seja aceita
    • ( ) Não, apenas os nativos do Angular funcionam
    • ( ) Sim, mas apenas no modo de produção
    • ( ) Apenas se o formulário for Template-driven
    • Explicação: O Angular é altamente extensível na criação de regras de validação.

Quiz: Aula 11 ❓

Teste seus conhecimentos sobre o consumo de APIs no Angular.

  1. Qual classe do Angular é responsável por realizar requisições HTTP?

    • ( ) HttpFetcher
    • (x) HttpClient
    • ( ) Axios
    • ( ) SimpleHttp
    • Explicação: HttpClient é o serviço padrão para comunicações externas no Angular.

  2. O retorno de uma chamada do HttpClient é um:

    • ( ) Array simples
    • ( ) JSON String
    • (x) Observable
    • ( ) Promise
    • Explicação: O HttpClient é totalmente baseado em Observables (RxJS).

  3. Qual função habilita o HttpClient no modelo Standalone?

    • ( ) useHttp()
    • (x) provideHttpClient()
    • ( ) bootstrapHttp()
    • ( ) ngAddHttp()
    • Explicação: No bootstrap, usamos provideHttpClient() para injetar o suporte HTTP.

  4. Para que serve o método .subscribe()?

    • ( ) Para criar o componente
    • (x) Para "escutar" e agir quando os dados da requisição chegarem
    • ( ) Para deletar a base de dados
    • ( ) Para configurar o CSS
    • Explicação: Sem o subscribe, a requisição não é sequer disparada (Observables são preguiçosos).

  5. Qual verbo HTTP é usado para atualizar um registro existente?

    • ( ) POST
    • (x) PUT ou PATCH
    • ( ) GET
    • ( ) DELETE
    • Explicação: PUT substitui o registro, PATCH atualiza apenas partes dele.

  6. O HttpClient converte automaticamente a resposta JSON para um objeto JavaScript?

    • (x) Sim, por padrão ele já trata o JSON
    • ( ) Não, é preciso usar JSON.parse
    • ( ) Apenas se usarmos o método .toJson()
    • ( ) Depende do navegador
    • Explicação: O Angular já faz esse parsing para nós, facilitando o uso dos dados.

  7. O que é um Interceptor?

    • ( ) Um vírus no Angular
    • (x) Um middleware que pode interceptar requisições para adicionar tokens ou tratar erros
    • ( ) Uma tag HTML secreta
    • ( ) Uma forma de acelerar o computador
    • Explicação: Interceptores são úteis para autenticação (Bearer Token) e logs globais.

  8. Como enviamos dados no corpo (body) de uma requisição POST?

    • ( ) Pela URL
    • (x) Passando o objeto como segundo argumento do método .post()
    • ( ) Usando o comando ngSend
    • ( ) Através de arquivos CSS
    • Explicação: Ex: this.http.post(url, dadosObjeto).

  9. O HttpClient é um Singleton?

    • (x) Sim, ele é injetado como um serviço único na aplicação
    • ( ) Não, cada requisição cria um novo HttpClient
    • ( ) Sim, mas apenas no Windows
    • ( ) Não, ele é uma classe estática
    • Explicação: Ele é fornecido pelo sistema de DI como uma instância única compartilhada.

  10. Qual a vantagem de usar interfaces com o HttpClient?

    • ( ) Melhora a velocidade do site
    • (x) Oferece Intellisense (Auto-complete) e segurança de tipos no desenvolvimento
    • ( ) O Angular obriga a usar interfaces
    • ( ) Interfaces diminuem o tamanho do HTML
    • Explicação: Tipar o retorno ajuda o desenvolvedor a saber exatamente quais campos existem nos dados.

Quiz: Aula 12 ❓

Teste seus conhecimentos sobre o RxJS e Programação Reativa.

  1. O que significa a sigla RxJS?

    • ( ) Rerender eXtension JavaScript
    • (x) Reactive Extensions for JavaScript
    • ( ) Runtime XML JavaScript Service
    • ( ) Remote X-component JavaScript
    • Explicação: É a biblioteca padrão para programação reativa no ecossistema JavaScript.

  2. Qual operador é usado para transformar os dados de um Observable?

    • ( ) switch
    • (x) map
    • ( ) transform
    • ( ) change
    • Explicação: O map aplica uma função a cada valor emitido pelo Observable.

  3. O que o operador filter faz?

    • ( ) Limpa os dados do banco
    • ( ) Ordena a lista
    • (x) Emite valores apenas se eles passarem em um teste booleano
    • ( ) Deleta o Observable
    • Explicação: O filter descarta valores que não atendem à condição especificada.

  4. Qual a característica única do BehaviorSubject?

    • ( ) Ele é mais rápido
    • ( ) Ele só aceita strings
    • (x) Ele armazena o último valor emitido e o entrega para novos assinantes
    • ( ) Ele apaga os dados após 10 segundos
    • Explicação: Ótimo para gerenciar estados que precisam estar disponíveis a qualquer momento (ex: tema dark/light).

  5. Para que serve o método .pipe()?

    • ( ) Para criar um novo componente
    • (x) Para encadear operadores RxJS em um Observable
    • ( ) Para conectar o banco de dados
    • ( ) Para injetar CSS
    • Explicação: O pipe é o local onde "montamos" a esteira de transformação dos dados.

  6. O que acontece se você tiver um Observable mas ninguém fizer o .subscribe()?

    • ( ) Ele executa e guarda o resultado
    • ( ) Ele dispara um erro
    • (x) Nada acontece (ele nem chega a ser executado)
    • ( ) O computador reinicia
    • Explicação: Observables são "cold" (frios) por padrão, só agem sob demanda.

  7. Qual o papel do unsubscribe()?

    • ( ) Apagar o código
    • (x) Parar de ouvir o Observable para evitar consumo desnecessário de memória
    • ( ) Reiniciar o Observable
    • ( ) Fazer logout do usuário
    • Explicação: Importantíssimo para evitar "Memory Leaks" em aplicações grandes.

  8. O operador switchMap é muito usado para:

    • ( ) Somar números
    • ( ) Mudar a cor da tela
    • (x) Evitar problemas de concorrência em buscas, cancelando requisições anteriores
    • ( ) Deletar o histórico do browser
    • Explicação: O switchMap garante que apenas a última requisição disparada seja processada.

  9. O Async Pipe (| async) faz o unsubscribe automaticamente?

    • (x) Sim, ele gerencia todo o ciclo de vida da assinatura no template
    • ( ) Não, você ainda precisa chamar o unsubscribe no OnDestroy
    • ( ) Apenas se o componente for standalone
    • ( ) Somente em modo desenvolvimento
    • Explicação: Esta é a maior vantagem do Async Pipe: segurança e código mais limpo.

  10. Como representamos convencionalmente por nome que uma variável é um Observable?

    • ( ) Começando com obs_
    • ( ) Colocando entre parênteses
    • (x) Adicionando um cifrão $ ao final do nome (ex: dados$)
    • ( ) Usando apenas letras maiúsculas
    • Explicação: O "Finnish Notation" ($) ajuda a identificar rapidamente fluxos assíncronos no código.

Quiz: Aula 13 ❓

Teste seus conhecimentos sobre a estruturação de projetos Angular profissionais.

  1. O que é o padrão LIFT?

    • ( ) Uma forma de fazer deploy
    • (x) Um guia de estilo para organizar arquivos de forma eficiente
    • ( ) Um novo tipo de componente
    • ( ) Uma biblioteca de animação
    • Explicação: LIFT foca em localizar código rápido e manter arquivos identificáveis.

  2. Qual pasta deve conter o "coração" da aplicação (Singleton Services)?

    • ( ) shared/
    • ( ) features/
    • (x) core/
    • ( ) assets/
    • Explicação: A pasta core/ centraliza o que é único e global na app.

  3. Onde colocamos componentes reutilizáveis como Modais, Spinners e Botões?

    • ( ) core/
    • (x) shared/
    • ( ) styles/
    • ( ) main/
    • Explicação: shared/ é o lugar para tudo que é usado por múltiplas features.

  4. O que são Features no contexto de arquitetura Angular?

    • ( ) Erros do sistema
    • (x) Módulos ou pastas que representam uma funcionalidade de negócio (ex: Pagamentos)
    • ( ) Comandos do CLI
    • ( ) Tipos de botões
    • Explicação: Dividir por funcionalidade torna a manutenção muito mais isolada e segura.

  5. A convenção de nomenclatura do Angular sugere o uso de:

    • ( ) camelCase (meuComponente.ts)
    • ( ) snake_case (meu_componente.ts)
    • (x) kebab-case (meu-componente.component.ts)
    • ( ) PascalCase (MeuComponente.ts)
    • Explicação: O hífen é o padrão oficial para nomes de arquivos no Angular.

  6. Um Barrel File (index.ts) ajuda a:

    • ( ) Rodar o projeto mais rápido
    • ( ) Deletar arquivos duplicados
    • (x) Simplificar e limpar os caminhos de importação
    • ( ) Fazer o build do CSS
    • Explicação: Permite importar de uma pasta em vez de cada arquivo individualmente.

  7. Qual o benefício de não ter pastas "profundas demais"?

    • ( ) O Windows não aceita
    • (x) Facilita a localização e a legibilidade do projeto
    • ( ) O site carrega mais rápido
    • ( ) Diminui o uso de memória RAM
    • Explicação: Pastas muito aninhadas escondem o código e confundem o desenvolvedor.

  8. Componentes na pasta shared/ devem ter lógica de negócio?

    • ( ) Sim, sempre
    • (x) Não, eles devem ser genéricos e configuráveis via @Input
    • ( ) Apenas se forem componentes de formulário
    • ( ) Depende da versão do Angular
    • Explicação: Componentes compartilhados devem ser agnósticos ao negócio para serem reutilizados em qualquer lugar.

  9. O que significa o 'DRY' no padrão LIFT?

    • ( ) Don't Read Yesterday
    • (x) Don't Repeat Yourself (Não se repita)
    • ( ) Data Real Yield
    • ( ) Digital Router Yield
    • Explicação: DRY incentiva o reuso de código e evita duplicações desnecessárias.

  10. Por que usar sufixos como .service.ts ou .component.ts?

    • ( ) Por exigência do Windows
    • (x) Para identificar rapidamente o propósito do arquivo sem precisar abri-lo
    • ( ) Para o Google indexar melhor o site
    • ( ) Não é necessário, o CLI faz isso por engano
    • Explicação: Sufixos claros são essenciais para a organização mental do desenvolvedor e das ferramentas.

Quiz: Aula 14 ❓

Teste seus conhecimentos sobre estilização e design no Angular.

  1. Qual o tipo de encapsulamento de CSS padrão do Angular?

    • ( ) None
    • ( ) ShadowDom
    • (x) Emulated
    • ( ) Static
    • Explicação: O Emulated simula o isolamento sem precisar do Shadow DOM nativo, funcionando em todos os browsers.

  2. Onde ficam os estilos que devem valer para TODO o site?

    • ( ) No arquivo .css do componente
    • (x) No arquivo styles.css (ou .scss) na raiz da pasta src
    • ( ) No index.html apenas
    • ( ) No main.ts
    • Explicação: O styles.css é o ponto central para regras de design globais.

  3. Para que serve o comando ng add?

    • ( ) Para rodar o servidor
    • ( ) Para deletar o projeto
    • (x) Para instalar bibliotecas e configurá-las automaticamente no projeto
    • ( ) Para criar um novo arquivo
    • Explicação: Ele facilita muito a instalação de pacotes complexos como o Angular Material.

  4. Angular Material é baseado em qual sistema de design?

    • ( ) Bootstrap
    • ( ) Ant Design
    • (x) Material Design (do Google)
    • ( ) Fluent Design
    • Explicação: Segue as diretrizes estéticas e funcionais do Google.

  5. O que o seletor :host faz no CSS do componente?

    • ( ) Estiliza todos os botões do site
    • (x) Aplica estilos diretamente na tag do componente (ex: no <app-header>)
    • ( ) Estiliza os componentes filhos
    • ( ) Esconde o componente
    • Explicação: :host é o seletor para o próprio elemento "hospedeiro" do componente.

  6. Como aplicar uma classe global a um elemento dentro de um componente se o encapsulamento for Emulated?

    • ( ) O Angular não permite
    • ( ) Usando a flag !important
    • (x) Usando o seletor especial ::ng-deep (embora deva ser usado com cautela)
    • ( ) Colocando o CSS no package.json
    • Explicação: ::ng-deep permite que o estilo "atravesse" o isolamento.

  7. Qual a vantagem de usar Variáveis CSS?

    • ( ) O site fica mais leve
    • (x) Facilita a manutenção de cores e a criação de temas dinâmicos
    • ( ) Evita que o site quebre no Safari
    • ( ) Diminui o número de componentes
    • Explicação: Alterar uma cor em um único lugar reflete em toda a aplicação.

  8. O que é o PrimeNG?

    • ( ) Um servidor de banco de dados
    • ( ) Um curso de Angular
    • (x) Uma biblioteca rica de componentes de UI para Angular
    • ( ) Uma linguagem de programação
    • Explicação: É uma das alternativas mais populares ao Angular Material.

  9. Para usar animações no Angular, precisamos de qual módulo?

    • ( ) HttpClientModule
    • (x) BrowserAnimationsModule (ou provideAnimations)
    • ( ) FormsModule
    • ( ) RouterModule
    • Explicação: O motor de animações é um módulo separado para não pesar em apps simples.

  10. Tailwind CSS no Angular requer instalação via:

    • ( ) Apenas ng add
    • (x) NPM e configuração do arquivo tailwind.config.js
    • ( ) Download manual de arquivos .zip
    • ( ) Tag <script> no index.html
    • Explicação: Como é um framework CSS externo, requer uma configuração de build.

Quiz: Aula 15 ❓

Teste seus conhecimentos sobre o ciclo de vida final da aplicação.

  1. Qual comando prepara a app para ir ao ar?

    • ( ) ng start
    • (x) ng build
    • ( ) ng create
    • ( ) ng setup
    • Explicação: ng build compila e otimiza os arquivos para produção.

  2. O que é o dist/?

    • ( ) Uma biblioteca de animação
    • (x) A pasta de destino dos arquivos compilados
    • ( ) O nome de um componente
    • ( ) Uma configuração do Windows
    • Explicação: dist vem de "distribution" (distribuição).

  3. Por que não usamos ng serve em produção?

    • ( ) Porque as cores ficam feias
    • (x) Porque o ng serve é um servidor de desenvolvimento lento e não otimizado
    • ( ) Porque o ng serve cobra mensalidade
    • ( ) Porque ele não suporta o Google Chrome
    • Explicação: O servidor do CLI serve apenas para facilitar o desenvolvimento local.

  4. Qual a vantagem de usar arquivos de environment?

    • ( ) O código fica mais rápido
    • (x) Permite trocar URLs de API e chaves secretas automaticamente entre Dev e Produção
    • ( ) Deixa o site mais seguro contra hackers
    • ( ) O Angular obriga a usar
    • Explicação: Facilita a gestão de múltiplas frentes de trabalho.

  5. Para que serve o Lighthouse?

    • ( ) Para criar ícones
    • (x) Para analisar a qualidade, velocidade e acessibilidade da página
    • ( ) Para hospedar o site de graça
    • ( ) Para baixar códigos do GitHub
    • Explicação: É a ferramenta padrão do Google para auditoria de sites.

  6. O que o Tree-shaking faz?

    • ( ) Sacode o computador
    • (x) Remove o código que não está sendo usado do pacote final
    • ( ) Muda a ordem do HTML
    • ( ) Adiciona bibliotecas novas
    • Explicação: Ajuda a diminuir drasticamente o tamanho do site.

  7. Ao subir para o GitHub Pages, por que o site pode ficar em branco?

    • ( ) Porque o GitHub não aceita Angular
    • (x) Geralmente por erro no caminho base (base-href)
    • ( ) Porque o código sumiu
    • ( ) Porque o browser do GitHub é antigo
    • Explicação: O caminho base deve corresponder ao nome do seu repositório.

  8. O que são 'Budgets' no Angular?

    • ( ) Orçamentos financeiros
    • (x) Limites de tamanho definidos para os arquivos finais
    • ( ) Cupons de desconto
    • ( ) Tipos de fontes
    • Explicação: Se o arquivo ultrapassar o budget, o Angular emite um aviso ou erro no build.

  9. Qual formato de imagem é mais recomendado para web moderna?

    • ( ) BMP
    • ( ) TIFF
    • (x) WebP ou AVIF
    • ( ) GIF (para tudo)
    • Explicação: Esses formatos oferecem compressão superior mantendo a qualidade.

  10. O deploy via angular-cli-ghpages é automático?

    • (x) Sim, ele automatiza o push dos arquivos da dist para a branch gh-pages
    • ( ) Não, é preciso copiar e colar os arquivos manualmente no site do GitHub
    • ( ) Apenas se você pagar o GitHub Pro
    • ( ) Não, ele apenas deleta os arquivos locais
    • Explicação: O utilitário economiza muito tempo ao realizar os passos de Git por você.

Macro Syntax Error

File: quizzes/quiz-16.md

Line 14 in Markdown file: Expected an expression, got 'end of print statement' 

    * (x) {{ }} e [ ]

Slides

Galeria de Slides 📽️

Acesse a base teórica de cada aula em formato de slides interativos.

Aula 01: Introdução ao Angular 🅰️

O Ecossistema e as SPAs

📅 Agenda de Hoje

  • O que é SPA?
  • Histórico do Angular
  • Arquitetura Baseada em Componentes
  • Instalação e Ambiente
  • Primeiro Projeto

🌐 O que é SPA?

Single Page Application

Uma aplicação que carrega uma única vez e atualiza o conteúdo dinamicamente.

  • Sem "flicker" de reload
  • Experiência de App Nativo
  • Rápida e Fluida

🏛️ Diferença Crucial

Tradicional vs SPA

  • Tradicional: O servidor envia um novo HTML a cada clique.
  • SPA: O servidor envia dados (JSON), o browser atualiza a tela.

🅰️ Por que Angular?

  • Mantido pelo Google
  • Framework Completo ("Batteries Included")
  • TypeScript por padrão
  • Altamente Escalável

🏗️ Arquitetura Angular

O Mundo dos Componentes

O Angular divide a aplicação em pequenas peças reutilizáveis.

graph TD
    App[AppModule] --> Comp[Componentes]
    Comp --> Temp[Template HTML]
    Comp --> Style[Styles CSS]
    Comp --> Class[Logic TS]

🛠️ Pré-requisitos

  • Node.js (LTS recomendado)
  • NPM (Instalado com o Node)
  • VS Code

💻 Instalando o CLI

No terminal, execute:

npm install -g @angular/cli

🚀 Criando seu Primeiro Projeto

ng new meu-projeto
cd meu-projeto
ng serve --open

📁 Estrutura de Pastas

  • src/app: Nosso código central.
  • angular.json: Configurações do projeto.
  • package.json: Nossas dependências.

🧠 Ciclo de Desenvolvimento

  1. Escreve código (TS/HTML/CSS)
  2. O CLI recompila automaticamente
  3. O Browser atualiza (Live Reload)

🧩 O Papel do TypeScript

Mais segurança e melhores ferramentas de desenvolvimento.

🎯 Resumo da Aula

  • Aprendemos o conceito de SPA.
  • Instalamos as ferramentas necessárias.
  • Criamos o "Hello World" do Angular.

📝 Próximos Passos

  • Explorar os arquivos gerados.
  • Fazer o primeiro exercício prático.

❓ Perguntas?

Vamos para a Prática! 🚀

Aula 02: Estrutura e Componentes 🏗️

Dominando a Anatomia do Angular

📂 Anatomia do Projeto

Quais são os arquivos que mandam em tudo?

🚀 main.ts

O "Start" de tudo!

  • Faz o "bootstrap" (inicialização)
  • Carrega o Módulo Raiz (AppModule)

📄 index.html

A única página física da aplicação. 

<body>
  <app-root></app-root>
</body>

⚙️ angular.json

O manual de instruções do CLI.

  • Configura estilos globais (CSS/SCSS)
  • Define bibliotecas externas (scripts)
  • Caminhos de build e assets

🧩 O que é um Componente?

É a unidade fundamental de UI no Angular.

Um bloco que encapsula: Lógica + Template + Estilos.

🛠️ O Quarteto Fantástico

Conteúdo de um componente:

  1. .ts: A lógica (TypeScript)
  2. .html: A cara (HTML)
  3. .css: O estilo (CSS)
  4. .spec.ts: A prova (Testes)

⚡ Criando com CLI

Nada de criar arquivos na mão! 

ng generate component nome
# ou
ng g c nome

📦 NgModule

O "Contentor" lógico.

Na abordagem clássica, ele agrupa o que o Angular precisa saber para rodar.

  • declarations: Componentes locais
  • imports: Módulos externos

🔗 Seletores Customizados

Como usamos um componente?

No @Component({ selector: 'app-header' })

No HTML: <app-header></app-header>

🎨 Encapsulamento de Estilo

O CSS de um componente não vaza para os outros!

🎯 Prática de Hoje

Vamos criar uma estrutura de Cabeçalho, Sidebar e Rodapé!

❓ Dúvidas?

Mãos à obra! 🚀

Aula 03: Data Binding 📡

Conectando Lógica e Interface

🔄 O que é Data Binding?

É a comunicação entre o seu código TypeScript e o seu template HTML.

Permite que a interface reaja a mudanças nos dados automaticamente.

🔀 Quatro Tipos de Binding

  1. Interpolação: {{ valor }} (TS -> HTML)
  2. Property Binding: [propriedade] (TS -> HTML)
  3. Event Binding: (evento) (HTML -> TS)
  4. Two-way Binding: [(ngModel)] (Sincronizado)

1️⃣ Interpolação

Exibe strings no HTML. 

titulo = 'Curso Angular';

<h1>{{ titulo }}</h1>

2️⃣ Property Binding

Controla propriedades de elementos HTML. 

<button [disabled]="isButtonDisabled">
  Enviar
</button>
  • Usamos colchetes [ ]

3️⃣ Event Binding

Captura ações do usuário. 

<button (click)="salvar()">
  Salvar
</button>
  • Usamos parênteses ( )

4️⃣ Two-Way Data Binding

A famosa "Banana in a Box" [( )].

Mantém o campo de input e a variável sincronizados.

🍌 Banana in a Box

Por que esse nome?

[( )] -> Os parênteses (banana) dentro dos colchetes (box).

Requer: FormsModule no AppModule.

⚙️ Como funciona o NgModel?

<input [(ngModel)]="nome">
<p>Olá, {{ nome }}</p>

Se você digita, a variável muda. Se a variável muda via código, o input atualiza!

⚖️ Qual escolher?

  • Mostrar texto? -> Interpolação
  • Mudar atributo (src, href, class)? -> Property
  • Ação de botão? -> Event
  • Formulário? -> Two-way

🎯 Desafio Prático

Crie uma calculadora de soma em tempo real!

❓ Alguma dúvida?

Vamos praticar! 🚀

Aula 04: Diretivas 🛠️

Manipulando o HTML com Propriedade

🛠️ O que são Diretivas?

São instruções que o Angular usa para mudar o DOM.

  • Estruturais: Mudam a estrutura (ngIf, ngFor)
  • Atributo: Mudam aparência ou comportamento (ngClass, ngStyle)

🏗️ Diretivas Estruturais

Mudando o Layout

Identificadas pelo asterisco *.

🚦 *ngIf

Exibe ou remove elementos baseado em uma condição booleana. 

<p *ngIf="isLoggedIn">Bem-vindo!</p>
  • Remove fisicamente do DOM!

🔁 *ngFor

O loop do Angular. 

<ul>
  <li *ngFor="let curso of listaCursos">
    {{ curso }}
  </li>
</ul>

🎨 Diretivas de Atributo

Mudando a Estilização

👗 ngClass

Adiciona classes CSS dinamicamente. 

<div [ngClass]="{ 'active': isActive }">...</div>

🖌️ ngStyle

Aplica estilos inline dinamicamente. 

<p [ngStyle]="{ 'color': isAdmin ? 'red' : 'blue' }">
  Mensagem
</p>

🚫 Regra de Ouro

Nunca use duas diretivas estruturais no mesmo elemento!

Errado: <li *ngIf="cond" *ngFor="let item of lista">

📦 Custom Directives

Você pode criar as suas próprias! 

ng generate directive minha-diretiva

🎯 Prática

Vamos criar uma lista dinâmica de tarefas com filtros de "concluído"!

❓ Dúvidas?

Hora de experimentar! 🚀

Aula 05: Comunicação entre Componentes 🔄

Como os Componentes Conversam?

📢 A Conversa é Hierárquica

No Angular, um componente pai comanda o filho.

  • Pai -> Filho: Via Propriedades (@Input)
  • Filho -> Pai: Via Eventos (@Output)

📥 @Input()

Abrindo as portas para dados

O pai passa um valor para o filho como se fosse um atributo HTML. 

<app-filho [mensagem]="textoPai"></app-filho>

📤 @Output()

Notificando o mundo exterior

O filho gera um evento que o pai pode escutar. 

<app-filho (onSave)="aoSalvar($event)"></app-filho>

🧠 EventEmitter

A ferramenta que dispara o sinal! 

@Output() meuSinal = new EventEmitter();

emitir() {
  this.meuSinal.emit('Dados');
}

🏠 Smart Components

Aqueles que sabem de tudo.

  • Falam com serviços
  • Buscam dados
  • Ditam as regras

🧱 Dumb Components

Os especialistas em visual.

  • Recebem via @Input
  • Notificam via @Output
  • Altamente reutilizáveis

🔄 Resumo do Fluxo

  1. O Pai envia o dado.
  2. O Filho exibe ou edita.
  3. O Filho avisa o Pai quando termina.

🚀 Prática

Vamos criar um sistema de votos para candidatos!

O pai tem a lista, o filho tem o botão de voto.

❓ Perguntas?

Vamos ao código! 🚀

Aula 06: Serviços e Injeção de Dependência 💉

Organizando a Lógica do Projeto

🏛️ O que é um Serviço?

É o "motor" da sua aplicação.

  • Contém lógica de negócio
  • Falar com APIs
  • Compartilha dados entre componentes

🏢 Por que não usar o Componente?

O componente deve cuidar apenas da "casca" (UI).

Lógica complexa em componentes torna o código difícil de manter e testar.

🛠️ Gerando um Serviço

ng generate service meu-servico
# ou
ng g s meu-servico

💉 Injeção de Dependência (DI)

O Angular gerencia as instâncias para você.

Você apenas pede o serviço no construtor!

🗝️ Decorator @Injectable

Avisa ao Angular que esta classe é um serviço.

providedIn: 'root' garante que o serviço seja um Singleton.

☝️ O Singleton

Significa que existe apenas uma única instância do serviço rodando.

Se o Componente A altera um dado no serviço, o Componente B verá a mudança imediatamente!

🛠️ Como Injetar?

No construtor do componente: 

constructor(private servico: MeuServico) {}
  • O Angular resolve a dependência automaticamente.

📊 Benefícios da DI

  • Facilita Testes Unitários
  • Desacopla o código
  • Gestão de memória eficiente

🎯 Prática

Vamos criar um serviço de "Carrinho de Compras" que funciona em toda a aplicação!

❓ Alguma dúvida?

Vamos injetar essa lógica! 🚀

Aula 07: Roteamento 🛣️

Transformando SPAs em Sites Multipágina

📍 O que é Roteamento?

É a técnica de associar uma URL a um Componente.

Permite navegação fluida sem recarregar o browser.

🛠️ RouterModule

O módulo principal de navegação.

Configuramos um array de objetos Route. 

const routes = [
  { path: 'home', component: HomeComponent },
  { path: 'sobre', component: SobreComponent }
];

🏠

O "buraco" no seu layout!

O componente da rota ativa será injetado exatamente onde essa tag estiver.

Substitui o href tradicional. 

<a routerLink="/contato">Fale Conosco</a>
  • Evita o refresh da página!

🆔 Rotas Dinâmicas

Passando parâmetros pela URL.

path: 'produto/:id'

Capturamos com o serviço ActivatedRoute.

↪️ Redirecionamento e Wildcards

  • Redirect: { path: '', redirectTo: '/home' }
  • Wildcard (404): { path: '**', component: ErrorComp }

🚀 Lazy Loading

Carregar o código apenas quando o usuário precisar.

Melhora a performance inicial drasticamente.

🎯 Prática de Hoje

Vamos criar um mini-site Institucional com 3 páginas e menu de navegação fixo!

❓ Perguntas?

A jornada continua no código! 🚀

Aula 08: Standalone Components 📦

O Futuro do Angular Chegou

🏛️ O que mudou?

Adeus, NgModules (para a maioria dos casos)!

O componente agora é autossuficiente.

🛠️ standalone: true

A nova propriedade do decorator @Component. 

@Component({
  standalone: true,
  imports: [CommonModule],
  ...
})

📤 Imports Directos

Se o componente usa um *ngIf, ele mesmo importa o CommonModule.

Se usa outro componente, importa ele diretamente também!

🚀 bootstrapApplication

Como dar o "play" na app sem módulos?

No main.ts: 

bootstrapApplication(AppComponent);

⚖️ Vantagens

  • Menos arquivos
  • Código mais claro
  • Melhor performance (Tree-shaking)
  • Fácil de ensinar/aprender

📦 O Fim do AppModule?

Em aplicações novas? Sim!

Em aplicações existentes? É um processo de transição.

🛠️ No CLI

ng g c meu-componente --standalone

🔄 Convivência

Standalone components podem ser usados dentro de módulos, e vice-versa.

A interoperabilidade é total!

🎯 Prática

Vamos criar uma aplicação do zero sem nenhum arquivo .module.ts!

❓ Alguma dúvida?

Vamos modernizar esse código! 🚀

Aula 09: Roteamento Standalone 🗺️

Navegação no Angular Moderno

📍 Adeus, RouterModule.forRoot()

No modelo standalone, configuramos as rotas no bootstrap da aplicação.

Usamos a função provideRouter().

🛠️ Configuração no main.ts

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(appRoutes)
  ]
});
  • Tudo centralizado no bootstrap!

📁 app.routes.ts

O arquivo onde as rotas vivem agora. 

export const appRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  ...
];

🚀 loadComponent

O Lazy Loading ficou mais simples e poderoso. 

{
  path: 'admin',
  loadComponent: () => import('./admin.comp')
    .then(m => m.AdminComponent)
}
  • Carrega apenas o componente necessário!

🧱 Imports no Standalone

O componente standalone que usa roteamento deve importar explicitamente:

  • RouterOutlet
  • RouterLink

💡 Por que mudar?

  1. Menos boilerplate
  2. Melhor separação de interesses
  3. Performance superior

🎯 Prática

Vamos refatorar o site institucional para remover todos os vestígios de NgModule no sistema de rotas!

❓ Dúvidas?

Vamos navegar no futuro! 🚀

Aula 10: Formulários 📝

Coletando Dados com Segurança

🎭 Duas Maneiras de Trabalhar

O Angular oferece dois caminhos para criar formulários:

  1. Template-driven: Simples e rápido (HTML).
  2. Reactive Forms: Robusto e escalável (TypeScript).

🏗️ Template-driven Forms

Ideal para formas pequenas e rápidas.

  • Usa ngModel para sincronizar.
  • A maior parte da lógica fica no HTML.

⚡ Reactive Forms

O queridinho do mercado.

  • Você define a estrutura no TS.
  • Oferece controle total e previsibilidade.
  • Muito fácil de testar!

🛠️ Peças dos Reactive Forms

  1. FormControl: Controla um campo individual.
  2. FormGroup: Agrupa vários controles.
  3. FormBuilder: Atalho para simplificar a criação.

✅ Validações

O Angular já vem com validadores prontos:

  • Validators.required
  • Validators.email
  • Validators.minLength(5)

🔍 Estados de um Campo

Como saber se o usuário errou?

  • Pristine: Não foi alterado.
  • Dirty: Já foi alterado.
  • Touched: O usuário já entrou e saiu do campo.
  • Invalid: Não passou na validação.

🎯 Prática

Vamos criar um formulário de Cadastro de Produto com validações em tempo real!

❓ Dúvidas?

Vamos formulá-las! 🚀

Aula 11: HTTP Client 🌐

Conectando seu Front ao Mundo Real

📡 Comunicação com Servidores

Como buscamos dados de um banco de dados externo?

Usamos o protocolo HTTP e o serviço HttpClient.

🛠️ Ativando o HTTP

No modelo Moderno, configuramos no bootstrap: 

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient()
  ]
});

💉 No Coração do Serviço

Recomendação: Mantenha a lógica de API nos serviços! 

constructor(private http: HttpClient) {}

buscar() {
  return this.http.get(URL);
}

🔄 Verbos Principais

  • GET: Buscar informações
  • POST: Criar novos dados
  • PUT: Atualizar (substituir)
  • DELETE: Remover

📥 JSON Automático

O Angular converte o JSON que vem do servidor em objetos JavaScript para você.

Adeus, JSON.parse!

🔔 Observables

O HttpClient trabalha com RxJS.

A requisição só acontece quando você dá o .subscribe().

🛡️ Interceptores

Uma forma de "grampear" a requisição:

  • Adicionar tokens de segurança (JWT)
  • Tratar erros globalmente
  • Mostrar um "Loading" na tela

🎯 Prática de Hoje

Vamos buscar dados de uma API real de Usuários e exibir em Cards elegantes!

❓ Alguma pergunta?

Vamos conectar! 🚀

Aula 12: RxJS ⚡

O Motor Reativo do Angular

🌊 O que é RxJS?

Uma biblioteca para lidar com fluxos de dados assíncronos.

Tudo no Angular é Reativo!

🛰️ O conceito do Observable

Imagine um fluxo de água.

  • Observable: A torneira (emite dados)
  • Observer: O balde (recebe os dados)
  • Subscribe: O ato de abrir a torneira

🛠️ Operadores: Os Filtros

Podemos transformar a água antes dela chegar no balde!

  • map: Transforma o dado
  • filter: Deixa passar só o que interessa
  • tap: Espia o dado (para logs)

⚡ switchMap

O salvador de performance!

Se uma nova requisição chega, ele cancela a anterior automaticamente.

  • Essencial para campos de busca!

🎯 Subjects vs BehaviorSubjects

  • Subject: Como uma rádio ao vivo (perdeu o início, já era).
  • BehaviorSubject: Como um On-Demand (você entra e recebe o último valor).

🚀 O Async Pipe (| async)

A forma mais elegante de usar Observables no HTML.

  • Faz o subscribe sozinho
  • Faz o unsubscribe sozinho
  • Evita Memory Leaks!

⚠️ Cuidado: Memory Leaks

Se você faz .subscribe() manual, você deve fazer o .unsubscribe() no ngOnDestroy.

🎯 Prática

Vamos criar um campo de busca inteligente que só pesquisa quando o usuário para de digitar!

❓ Dúvidas?

Vamos reagir! 🚀

Aula 13: Arquitetura Profissional 🏗️

Escalando Projetos com Organização

🏗️ O Problema do Crescimento

Conforme o projeto cresce, encontrar arquivos se torna um desafio.

Precisamos de regras claras!

📏 Padrão LIFT

  • Locate: Encontre rápido
  • Identify: O nome diz o que ele faz
  • Flat: Estruturas simples
  • Try to be DRY: Sem repetição

🏛️ Os Três Pilares

  1. Core: O "Singleton Global" (Serviços únicos, Auth, Guards)
  2. Shared: O "Reutilizável" (Cards, Botões, Pipes)
  3. Features: O "Negócio" (Login, Carrinho, Listagem)

🏷️ Nomenclatura é Tudo

Siga o padrão nome.tipo.ts:

  • login-form.component.ts
  • autenticacao.service.ts

Isso ajuda as ferramentas e o cérebro!

📦 Barrel Files (index.ts)

Exporte tudo de uma pasta em um único lugar.

Limpa os imports nos seus componentes.

🧱 Smart vs Dumb

Mantenha a lógica de negócio separada da visualização genérica.

Facilita o reuso e os testes!

🎯 Prática de Hoje

Vamos refatorar nossa pasta app para que ela pareça um projeto profissional de grande escala!

❓ Alguma pergunta?

Vamos organizar! 🚀

Aula 14: Estilização Moderna 🎨

Criando Interfaces Premium no Angular

👗 Estilo Isolado

O CSS do seu componente não "vaza" para os outros.

O Angular usa o View Encapsulation (Emulated) por padrão.

🏛️ Bibliotecas de UI

Não reinvente a roda!

  • Angular Material: Oficial (Design do Google)
  • PrimeNG: Gigante (Muitos componentes)
  • Tailwind CSS: Agilidade via utilitários

🛠️ ng add

A forma mágica de instalar grandes bibliotecas. 

ng add @angular/material

Já configura temas, fontes e ícones automaticamente!

🌓 Temas Dinâmicos

Use Variáveis CSS para trocar entre Light e Dark Mode. 

:root { --bg: white; --text: black; }
.dark { --bg: black; --text: white; }

🏗️ Seletores Especiais

  • :host: Estiliza a tag do componente.
  • ::ng-deep: Cruza a barreira do isolamento (use com cuidado!).

🎭 Animações

O Angular tem um motor de animações nativo.

Transições suaves entre estados de dados enriquecem a UX.

🎯 Prática de Hoje

Vamos aplicar o Angular Material para criar uma "Dashboard" com tabelas e cards interativos!

❓ Dúvidas?

Mãos aos pincéis! 🚀

Aula 15: Build, Deploy e Performance 🚀

Colocando sua Aplicação no Ar

🏗️ O que é o Build?

É o processo de transformar seu código de desenvolvimento em arquivos rápidos e otimizados para o browser. 

ng build

📁 Onde ficam os arquivos?

Na pasta dist/nome-do-projeto.

Lá você encontrará: * index.html * Bundles .js minificados * styles.css

🌍 Ambientes (Environments)

Diferencie sua API de desenvolvimento da API de produção.

O Angular troca as variáveis automaticamente durante o build!

🚀 Deploy Grátis: GitHub Pages

Publique seu portfólio para o mundo.

  1. Build com --base-href
  2. Upload para a branch gh-pages

⚡ Performance é Dinheiro

Use o Lighthouse para medir:

  • Velocidade de carregamento
  • Acessibilidade
  • SEO

🌟 Dicas de Otimização

  • Lazy Loading: Carregue só o necessário.
  • Imagens: Use WebP e compressão.
  • Tree-shaking: Remova código morto.

🏁 Prática

Vamos fazer o build de produção do nosso projeto e verificar o tamanho dos arquivos gerados!

❓ Dúvidas?

Hora do lançamento! 🚀

Aula 16: Projeto Final Integrador 🏆

Consolidando sua Jornada Angular

🏁 O que aprendemos?

  • SPAs e Arquitetura de Componentes
  • Data Binding e Comunicação
  • Serviços e Injeção de Dependência
  • Roteamento Clássico e Standalone
  • Observables e RxJS
  • Formulários Reativos
  • HTTP Client e APIs

📝 O Desafio

Construir uma aplicação real!

  • Tema: Gerenciador de Favoritos (Filmes, Livros ou Jogos).
  • Aposta: Use Standalone Components.

🛠️ Requisitos Mínimos

  1. Pelo menos 3 telas (Listagem, Detalhes, Cadastro).
  2. Consumo de uma API real.
  3. Busca reativa com RxJS.
  4. Validação de formulário.
  5. Design responsivo (Material ou Tailwind).

🏛️ Organizacão

Siga o padrão Features / Core / Shared.

Mostre que você sabe organizar código em escala!

🚀 Próximas Fronteiras

O Angular não para de evoluir:

  • Angular Signals: Reatividade granular.
  • SSR: Performance extrema.
  • NGRX: Estado global robusto.

🎓 Parabéns!

Você é agora um Desenvolvedor Angular.

Boa sorte com seu Projeto Final! 🚀

Configuração

Setup e Ambiente 🛠️

Prepare sua máquina para o desenvolvimento profissional com Angular.

1. Node.js (Motor)

O Angular exige o Node.js em sua versão LTS (Long Term Support).

2. Angular CLI (A Arrumadeira)

Instale a interface de linha de comando oficial globalmente.

$ npm install -g @angular/cli

3. VS Code (O Palácio)

Recomendamos o Visual Studio Code com as seguintes extensões: * Angular Language Service: Inteligência de código para Angular. * ESLint: Para manter o código limpo. * Prettier: Para formatação automática.

4. Extensões Úteis no Chrome

  • Angular DevTools: Essencial para debugar componentes e performance.

Tudo pronto?

Siga para a vAula 01 para criar seu primeiro projeto!

Setup 01: Android Studio 🤖

O Android Studio é a IDE oficial para o desenvolvimento Android.

1. Requisitos de Sistema

  • RAM: Mínimo 8GB (Sugerido 16GB+).
  • Espaço: Mínimo 10GB para IDE + SDKs.
  • Processador: Intel Core i5 ou equivalente.

2. Instalação

  1. Acesse o site oficial: developer.android.com/studio.
  2. Baixe a versão mais recente para o seu Sistema Operacional.
  3. Execute o instalador e escolha a opção "Standard" na configuração inicial.

3. Configurando o SDK

  • Após a instalação, vá em Settings > Languages & Frameworks > Android SDK.
  • Certifique-se de que a versão mais recente do Android (estável) esteja instalada.
  • Na aba SDK Tools, instale o "Android Emulator" e o "Intel x86 Emulator Accelerator (HAXM)" se estiver no Windows com Intel.

4. Criando um Emulador (AVD)

  1. Abra o Device Manager.
  2. Clique em Create Device.
  3. Escolha um dispositivo (ex: Pixel 7).
  4. Selecione uma imagem de sistema (ex: Level 34 - Android 14).
  5. Finalize e clique no "Play" para iniciar o celular virtual.

5. Solução de Problemas ⚠️

  • VT-x is disabled: Você precisa habilitar a virtualização na BIOS do seu computador.
  • Studio muito lento: Adicione a pasta do projeto e as pastas do Android SDK nas exclusões do seu Antivírus.

Setup 02: Xcode (iOS Foundation) 🍎

O Xcode é a ferramenta necessária para compilar e testar apps iOS.

[!IMPORTANT] O Xcode requer um computador Mac (macOS).

1. Instalação

  1. Abra a App Store no seu Mac.
  2. Pesquise por Xcode.
  3. Clique em Obter/Instalar.
  4. Após o download, abra o Xcode para carregar os componentes adicionais do macOS.

2. Configurando Simuladores

  1. Vá em Settings > Platforms.
  2. Verifique se o componente "iOS" está baixado.
  3. Se não estiver, clique em "GET" para baixar a versão mais estável.

3. Comandos de Linha (CLI)

Para que ferramentas de automação funcionem, você precisa instalar os Command Line Tools: 

xcode-select --install

4. Opcional: CocoaPods

Muitos projetos iOS antigos ainda usam CocoaPods para dependências: 

sudo gem install cocoapods

5. Solução de Problemas ⚠️

  • Espaço em Disco: O Xcode é muito grande. Garanta pelo menos 40GB de espaço livre para ele e os simuladores.
  • Build Lento: Use simuladores de modelos mais simples (ex: iPhone SE) para poupar memória RAM se necessário.

Sobre

Sobre o Curso

🎓 Desenvolvimento Frontend com Angular

Este curso foi projetado para capacitar desenvolvedores na criação de SPAs (Single Page Applications) modernas, utilizando o framework Angular do Google. O diferencial é a transição guiada da arquitetura clássica (NgModule) para o modelo moderno e otimizado baseado em Standalone Components.

🎯 Objetivos do Curso

  • Ecossistema Angular --- Compreender a estrutura de projetos, o papel do Angular CLI e a arquitetura baseada em componentes.

  • Manipulação Dinâmica --- Dominar todos os tipos de Data Binding e o uso de diretivas para criar interfaces ricas e interativas.

  • Modernidade Standalone --- Aprender a desenvolver aplicações sem NgModules, simplificando o código e melhorando a performance.

  • Integração Reativa --- Consumir APIs REST de forma profissional utilizando RxJS e as melhores práticas de serviços injetáveis.

📚 O Que Você Vai Aprender

Módulo 1 – Fundamentos e Estrutura

  • Ciclo de vida de um componente
  • Instalação e uso avançado de CLI
  • Arquivos principais (angular.json, main.ts)
  • Templates e estilização isolada

Módulo 2 – Core e Comunicação

  • Hierarquia Pai-Filho (@Input/@Output)
  • Serviços Singleton e DI
  • Diretivas Personalizadas
  • Roteamento e Lazy Loading

Módulo 3 – Standalone e Formulários

  • BootstrapApplication e provideRouter
  • Refatoração de código legado para Standalone
  • Validações síncronas e assíncronas em Forms
  • HttpClient e tratamento de erros

Módulo 4 – RxJS e Deploy

  • Operadores Pipe, Map, Filter
  • BehaviorSubject para estados locais
  • Angular Material e Design System
  • Deploy em plataformas modernsas (Firebase/Vercel)

🛠️ Metodologia

Abordagem "Learning by Doing". Cada aula inclui uma seção teórica consolidada, exercícios progressivos e a construção incremental de um projeto que fará parte do seu portfólio profissional.

Pronto para ser um especialista Angular? Começar Agora

Roadmap do Projeto: Frontend com Angular 🚀

Este documento rastreia a evolução do curso.

✅ Fase 1: Planejamento (Concluído)

  • [x] Definição Syllabus (16 Aulas)
  • [x] Transição para Standalone Components (Angular 15+)
  • [x] Configuração MkDocs Material com layout de cards

✅ Fase 2: Conteúdo Base (Concluído)

  • [x] Criação das 16 Aulas (Markdown)
  • [x] Criação dos 16 Quizzes (HTML)
  • [x] Criação dos 16 Conjuntos de Exercícios
  • [x] Criação dos 16 Slides (RevealJS)

✅ Fase 3: Projetos e UX (Em Andamento)

  • [x] Definição dos 16 Projetos práticos
  • [/] Diagramação Mermaid de arquitetura Angular
  • [ ] Exemplos de integração HTTP reativa

🚀 Fase 4: Lançamento e Deploy

  • [ ] Build e Deploy Gh-pages
  • [ ] Validação de links e acessibilidade
  • [ ] Publicação do Projeto Final

Status Atual: Em Refatoração Última Atualização: 21/02/2026

Materiais Complementares 📚

Bem-vindo à seção de materiais complementares do curso de Desenvolvimento Frontend com Angular. Aqui você encontra recursos adicionais para apoiar seus estudos e aprofundar seu conhecimento técnico.

  • Slides

    • Acompanhe o conteúdo teórico com slides dinâmicos e modernos.

  • Exercícios

    • Pratique a criação de componentes e lógica Angular.

  • Quizzes

    • Valide seu aprendizado com testes rápidos por aula.

  • Projetos

    • Construa aplicações reais do zero ao deploy.

  • Ambiente

    • Guias de instalação (Node.js, CLI, VS Code).

  • Docs Oficial

    • Documentação oficial do Angular para consulta.

Versão para Impressão

Esta página foi gerada automaticamente para impressão.