Módulo 1: Componentes e CLI (A Base)
2. Resumo da Aula Anterior
No Módulo 0, descobrimos que o Angular é uma framework "tudo-em-um" mantida pela Google para criar aplicações robustas e rápidas. Hoje, vamos pôr as mãos na massa e aprender a criar as peças que montam o site: os Componentes.
3. O Que Vais Aprender Hoje
- ✅ Como dominar o Angular CLI (a consola).
- ✅ Criar um projeto novo do zero.
- ✅ A anatomia de um Componente (TS, HTML, CSS).
- ✅ Gerar componentes automaticamente com comandos
ng.
4. Teoria: Peças de Lego
Conceito: No Angular, não pensamos em "páginas", pensamos em "elementos reutilizáveis". Um site Angular é uma coleção de componentes que se encaixam uns nos outros.
🧱 Analogia: Kits de Lego Profissionais
Imagina que estás a construir um castelo de Lego:
- Angular CLI: É a caixa de ferramentas robotizada que te dá as peças prontas sempre que precisas.
- Componente: É cada bloco específico (uma torre, uma janela, uma porta).
- Anatomia da Peça:
- Lógica (TS): É o manual de instruções da peça (como ela se comporta).
- Visual (HTML): É a forma física da peça.
- Pintura (CSS): É a cor e o acabamento daquela peça específica.
5. Exemplos Práticos
Exemplo 1: Comandos CLI Essenciais
O teu terminal é o teu novo melhor amigo.
# Criar um projeto novo
ng new meu-primeiro-projeto
# Iniciar o servidor de testes
ng serve --open
# Criar um componente (ex: header)
ng generate component components/headerExemplo 2: Anatomia do TS
O cérebro do componente (Lógica).
// user.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css']
})
export class UserComponent {
nome = "Sandro"; // Variável que o HTML vai ver
}Exemplo 3: Usar o Componente
Chamar o componente noutro ficheiro.
Bem-vindo à minha App
6. Agora é a Tua Vez!
Vamos criar o teu primeiro componente manual (mentalmente ou no teu PC):
- Abre o terminal e escreve
ng generate component card-info. - Observa a pasta que foi criada. Quantos ficheiros aparecem?
- No ficheiro
card-info.component.ts, cria uma variável chamadatitulo = "O meu primeiro Cartão". - No
card-info.component.html, escreve<h3>{{ titulo }}</h3>. - Vai ao
app.component.html, apaga tudo o que lá está e escreve<app-card-info></app-card-info>.
7. Verificação de Conhecimento
8. Resumo do Que Aprendemos
- 📌 O **CLI** (ng) serve para automatizar a criação de tudo no Angular.
- 📌 Um **Componente** é o bloco fundamental de construção.
- 📌 O ficheiro **TypeScript (.ts)** é onde guardamos os dados e a lógica.
- 📌 O **Seletor** (ex: app-header) é o nome da "tag HTML personalizada" que criamos.
9. Desafios Práticos
Desafio 1: O Atalho Mágico
Descobre qual é a versão curta do comando ng generate component nome que os programadores experientes usam.
Desafio 2: Múltiplas Peças
Cria um componente Navbar e outro Footer. Como farias para que o Footer aparecesse sempre no fundo do site, independentemente da página?
Desafio 3: O Seletor Personalizado
Se mudares o `selector` de um componente no TS para 'meu-botao', como é que o deves chamar no HTML?