🚀 Capítulo 01: Introdução ao Angular e Ambiente

🎯 Objetivo da Aula

Ao final desta aula, você será capaz de compreender o funcionamento do Angular como framework, configurar seu ambiente de desenvolvimento com Node.js e Angular CLI, e criar seu primeiro componente funcional, iniciando sua jornada como desenvolvedor frontend.

---

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

Você acaba de ser aceito como um jovem Padawan na Academia Jedi de Programação Frontend. O seu primeiro desafio é configurar o seu “Sabre de Luz” (seu ambiente de desenvolvimento) e criar uma pequena aplicação para enviar uma mensagem holográfica de boas-vindas ao Conselho Jedi usando Angular!

---

🧠 Fundamentos: A Teoria Traduzida

Angular é um framework completo para construir aplicações web. Mas o que isso significa?

Imagine que o Angular é como a Nave Nabucodonosor (ou a Millenium Falcon). Ela já vem com motores, armas, suporte de vida e hiperdrive integrados! Você não precisa caçar peças por aí (como no React). O Angular te dá tudo o que você precisa para decolar!

• SPA (Single Page Application): O app carrega uma única vez e as páginas mudam instantaneamente, sem recarregar a aba do navegador. É como viajar na velocidade da luz!
• TypeScript: É a linguagem que o Angular usa. É como o JavaScript, mas com uma armadura de proteção (tipagem estática) que impede você de cometer erros bobos.

Arquitetura Básica

flowchart TD
    A["Componente (Lógica e Dados)"] --> B["Template (HTML/Interface)"]
    B --> C["Usuário (Interação)"]
    C --> A

---

📖 Exemplo Guiado

Vamos criar a nossa primeira mensagem holográfica.

🛠️ Passo a Passo para Criar o Projeto

Para criar o projeto corretamente usando a Angular CLI, siga estes passos:

1. Abra o terminal (ou Prompt de Comando).
2. Instale a Angular CLI globalmente (se já não tiver):

   npm install -g @angular/cli

3. Crie o projeto:

   ng new academia-jedi

4. O assistente fará perguntas:
   • Which stylesheet format would you like to use? Escolha CSS.
   • Do you want to enable Server-Side Rendering (SSR)? Escolha No (para simplificar agora).
5. Navegue até a pasta:

   cd academia-jedi

6. Abra no VS Code:

   code .

🕹️ Como Executar

No terminal do VS Code, digite:

ng serve --open

O projeto abrirá no navegador em http://localhost:4200/.

---

🛠️ Prática Obrigatória 1

Altere o arquivo src/app/app.component.html. Remova todo o conteúdo que o Angular gerou e deixe apenas:

<h1>Que a Força esteja com você!</h1>
<p>Iniciando treinamento Padawan em Angular.</p>

Tire um print da tela do navegador mostrando a mensagem.

---

🔑 Gabarito de Código/Fórmulas

O resultado no arquivo app.component.html deve ser exatamente o HTML acima.

---

← Capitulo Anterior | Proximo Capitulo →