🚀 Capítulo 02: Estrutura de Arquivos e Primeiro Componente

🎯 Objetivo da Aula

Ao final desta aula, você entenderá como os arquivos de um projeto Angular se organizam, a função de cada um deles e será capaz de criar seu primeiro componente customizado para construir a interface da sua aplicação.

---

🏢 O Cenário Prático (Seu Desafio)

Para pilotar sua nave na velocidade da luz, você precisa de um painel de controle que exiba os dados dos sistemas. Seu desafio hoje é criar o componente do Painel de Controle da sua nave e entender onde cada peça desse sistema fica guardada no projeto!

---

🧠 Fundamentos: A Teoria Traduzida

Um projeto Angular criado pela CLI vem com muitos arquivos. Vamos focar nos mais importantes que ficam dentro da pasta src/app:

• app.component.ts: É o cérebro do componente principal. Aqui fica a lógica.
• app.component.html: É a carcaça. Aqui fica o HTML que o usuário vê.
• app.component.css: É a pintura. Aqui ficam os estilos visuais.

O que é um Componente?

Pense em um componente como uma peça de Lego ou um bloco de comando da sua nave. Ele é independente e pode ser reutilizado. Cada componente tem um Seletor (uma tag HTML customizada) que você usa para colocá-lo na tela.

---

📖 Exemplo Guiado: Criando o Painel de Controle

Vamos usar a CLI para gerar um novo componente automaticamente.

🛠️ Passo a Passo para Criar o Componente

1. Abra o terminal na pasta do seu projeto (academia-jedi).
2. Digite o comando de geração:

   ng generate component painel-controle

   (Você também pode usar o atalho: ng g c painel-controle)
3. A CLI criará uma pasta chamada painel-controle dentro de src/app com 4 arquivos.

Editando o Componente

Abra o arquivo src/app/painel-controle/painel-controle.component.html e mude o texto para:

<div class="painel">
  <h2>🎛️ Painel de Controle da Nave</h2>
  <p>Status dos Sistemas: **Operacional**</p>
</div>

Como Usar o Componente

Para que ele apareça na tela, precisamos usar o seu seletor no arquivo principal.

1. Abra src/app/painel-controle/painel-controle.component.ts e veja que o selector é 'app-painel-controle'.
2. Abra src/app/app.component.html e adicione a tag do seu componente:

<h1>Academia Jedi de Angular</h1>
<app-painel-controle></app-painel-controle>

🕹️ Como Executar e Testar no VS Code

1. Salve todos os arquivos.
2. No terminal, execute:

   ng serve

3. Abra o navegador em http://localhost:4200/.

Resultado Esperado: Você deve ver o título “Academia Jedi” e, logo abaixo, a caixa do seu novo componente com o texto “Painel de Controle da Nave”.

---

🛠️ Prática Obrigatória 1

Crie um novo componente chamado status-escudo usando a CLI. No HTML dele, coloque uma mensagem dizendo: “🛡️ Escudos em 100%“. Adicione esse componente no seu app.component.html logo abaixo do painel de controle.

---

🛠️ Prática Obrigatória 2

Abra o arquivo de estilos do componente do escudo (status-escudo.component.css) e adicione uma regra para deixar o texto verde:

p {
  color: green;
  font-weight: bold;
}

---

📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)

1. Faça o Commit: No GitHub Desktop, digite a mensagem (ex: Finaliza Capítulo 02) e clique em Commit to main.
2. Envie para a Nuvem (Push): Clique em Push origin.
3. ⚠️ IMPORTANTE: Seu repositório DEVE SER PÚBLICO.
4. No Microsoft Teams:
   • Copie o link do seu repositório.
   • Cole na tarefa correspondente no Teams.
   • Clique em Entregar.

---

💡 Checkpoint de Lógica

Ao usar componentes, você está dividindo o problema grande em partes pequenas. Se o escudo quebrar, você só precisa mexer no código do componente de escudo, sem estragar o resto da nave!

---

🔥 Desafio de Fixação (Opcional)

Tente criar um componente chamado radar e use CSS para fazer uma borda circular ao redor dele.

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

Comando: ng g c status-escudo No app.component.html:

<app-painel-controle></app-painel-controle>
<app-status-escudo></app-status-escudo>

Prática 2:

No status-escudo.component.css:

p {
  color: green;
  font-weight: bold;
}

---

← Capitulo Anterior | Proximo Capitulo →