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:

Classe (.ts): Lógica e dados.
Template (.html): Estrutura visual.
Estilo (.css ou .scss): Design isolado.
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.