Pular para conteúdo

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! 🚀