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

Escreve código (TS/HTML/CSS)
O CLI recompila automaticamente
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.