Aula 4.1 - Introdução ao Angular e componentes

Identificação

Duração: 2 horas
Tipo: teoria aplicada e laboratório
Entrega: primeiro componente da Knowledge AI
Laboratório: ../exemplos/aula-4.1/index.html

Introdução

O que é Angular?

Angular é um framework para construir aplicações web. Ele fornece uma estrutura integrada para componentes, templates, formulários, rotas, comunicação HTTP, injeção de dependência, testes e compilação.

O navegador não executa arquivos Angular diretamente. As ferramentas do projeto compilam TypeScript e templates para JavaScript, CSS e outros arquivos que o navegador entende.

O que é um framework?

Um framework define uma estrutura e um fluxo para a aplicação. Em vez de escolher e conectar manualmente uma solução para cada necessidade, o projeto segue convenções e utiliza recursos que foram desenhados para trabalhar juntos.

Isso não elimina HTML, CSS, JavaScript ou TypeScript. Angular usa esses fundamentos.

Angular é uma linguagem?

Não. A linguagem principal é TypeScript. Os templates se baseiam em HTML com sintaxes adicionais, e os estilos continuam sendo CSS ou um pré-processador configurado.

Angular é o mesmo que AngularJS?

Não. AngularJS é a geração antiga baseada em outra arquitetura. “Angular” se refere ao framework moderno. Materiais que usam controllers, $scope e o pacote angular.js normalmente tratam de AngularJS e não devem ser misturados com este curso.

Angular é biblioteca ou framework?

No uso cotidiano, Angular é chamado de framework porque oferece uma solução ampla e opiniões arquiteturais. Uma biblioteca costuma resolver uma parte mais específica e ser chamada pelo código da aplicação; um framework também coordena como a aplicação é inicializada e organizada.

O que é uma SPA?

SPA significa Single-Page Application. Depois do carregamento inicial, a aplicação pode trocar telas e atualizar partes da interface sem solicitar uma página HTML completa a cada navegação.

Isso não significa que existe somente uma tela ou que nenhuma requisição é feita. A aplicação continua consultando APIs e pode possuir várias rotas.

Preciso saber tudo de TypeScript antes?

Não, mas os fundamentos do módulo 3 são necessários: classes, interfaces, funções, unions, módulos e configuração estrita. Angular acrescenta uma arquitetura sobre esses conhecimentos.

O que é Angular CLI?

CLI significa Command-Line Interface. O Angular CLI cria espaços de trabalho, gera arquivos, inicia o servidor de desenvolvimento, executa testes e produz compilações.

ng new knowledge-ai-web

Esse comando cria uma nova pasta de espaço de trabalho. Ele deve ser executado no diretório que será o pai do projeto, não dentro de outro espaço de trabalho Angular.

Angular precisa de Node.js no servidor de produção?

Node.js é usado pelas ferramentas de desenvolvimento e compilação. Uma aplicação Angular renderizada somente no navegador pode ser publicada como arquivos estáticos. Outros modos, como renderização no servidor, possuem requisitos diferentes.

O que é um componente?

Componente é uma unidade de interface com:

classe TypeScript para estado e comportamento;
template para estrutura visual;
seletor para uso em outro template;
estilos opcionais;
metadados no decorator @Component.

Como isso entra na Knowledge AI?

A landing page do módulo 1 e as regras dos módulos 2 e 3 serão reorganizadas em uma árvore de componentes. Nesta aula criaremos um cartão de tarefa e entenderemos como TypeScript, template e CSS formam uma única unidade visual.

Objetivos

Ao final da aula, o aluno deverá conseguir:

explicar o que Angular é;
diferenciar Angular, AngularJS, JavaScript e TypeScript;
explicar framework e SPA;
descrever o papel do Angular CLI;
diferenciar espaço de trabalho e aplicação;
identificar os arquivos principais;
explicar um componente;
entender @Component;
utilizar seletor, template e classe;
explicar componentes standalone;
reconhecer código antigo com NgModule;
compor o primeiro cartão da Knowledge AI.

Pré-requisitos

módulos 1, 2 e 3 concluídos;
HTML, CSS e JavaScript;
TypeScript, módulos e classes;
terminal e npm em nível introdutório.

Pergunta orientadora

Como transformar uma página crescente em partes de interface organizadas, reutilizáveis e testáveis?

Roteiro sugerido

Etapa	Duração
Angular e o navegador	20 min
Espaço de trabalho e ferramentas	20 min
Anatomia de componente	35 min
Composição e árvore	20 min
Laboratório	20 min
Revisão	5 min

1. O problema que Angular ajuda a resolver

Em uma página pequena, alguns arquivos podem ser suficientes. Em aplicações maiores, precisamos coordenar:

várias telas;
componentes reutilizáveis;
formulários;
estado;
chamadas HTTP;
regras de navegação;
testes e compilações.

Angular oferece padrões compartilhados para essa complexidade.

2. O navegador continua sendo a plataforma

O resultado final ainda utiliza DOM, eventos, HTTP, HTML, CSS e JavaScript. Angular não substitui os fundamentos; automatiza e organiza parte do trabalho.

DevTools continua indispensável para inspecionar rede, elementos, console, acessibilidade e desempenho.

3. Ambiente local

Antes de criar um espaço de trabalho, confirme as versões suportadas na documentação atual e verifique:

node --version
npm --version
ng version

Evite copiar uma combinação de versões de um tutorial antigo.

4. Criando o espaço de trabalho

Fluxo básico:

ng new knowledge-ai-web
cd knowledge-ai-web
ng serve --open

ng serve inicia um servidor de desenvolvimento, observa alterações e recompila o projeto. Ele não é um servidor de produção.

5. Opções iniciais

O CLI pode perguntar sobre:

rotas;
formato de estilos;
renderização;
test runner;
outras integrações.

Para este curso, adotaremos:

TypeScript estrito;
componentes standalone;
CSS inicialmente;
rotas quando chegarmos à Aula 4.5;
testes mantidos, não removidos.

6. Espaço de trabalho e aplicação

Espaço de trabalho é o ambiente que contém configurações e um ou mais projetos. Aplicação é um projeto executável dentro desse espaço de trabalho.

knowledge-ai-web/
├── angular.json
├── package.json
├── public/
├── src/
└── tsconfig.json

angular.json registra projetos e tarefas de compilação, serve e test.

7. Arquivos de entrada

Uma estrutura moderna pode conter:

src/
├── app/
│   ├── app.ts
│   ├── app.html
│   ├── app.css
│   └── app.spec.ts
├── index.html
├── main.ts
└── styles.css

Geradores atuais podem usar nomes concisos. Projetos antigos ou configurados com outro guia podem usar app.component.ts. Entenda o papel, não apenas o nome.

8. `main.ts`

Ele inicializa a aplicação:

import { bootstrapApplication } from "@angular/platform-browser";
import { App } from "./app/app";

bootstrapApplication(App).catch((error: unknown) => {
  console.error(error);
});

bootstrapApplication inicia uma aplicação baseada em componente standalone.

9. Decorator `@Component`

import { Component } from "@angular/core";

@Component({
  selector: "app-task-card",
  templateUrl: "./task-card.html",
  styleUrl: "./task-card.css",
})
export class TaskCard {}

O decorator fornece metadados para Angular. A classe continua sendo TypeScript.

10. Seletor

selector: "app-task-card"

Permite usar:

<app-task-card />

Prefixos reduzem colisões com elementos HTML e componentes de outras bibliotecas.

11. Template

<article>
  <h2>{{ title }}</h2>
  <p>{{ description }}</p>
</article>

Interpolação {{ }} cria um binding de texto. Angular atualiza o conteúdo quando o valor observado muda dentro do fluxo da aplicação.

12. Classe e estado

export class TaskCard {
  title = "Revisar contratos TypeScript";
  description = "Confirmar estados e validações.";
}

Para este primeiro exemplo, os valores pertencem ao componente. Inputs serão introduzidos na Aula 4.3.

13. Estilos do componente

:host {
  display: block;
}

article {
  padding: 1rem;
  border: 1px solid #dbe3ee;
}

Por padrão, estilos do componente são associados à sua view por encapsulamento emulado. Estilos globais ainda podem afetar propriedades herdadas e regras gerais.

14. O host element

Ao escrever:

<app-task-card />

esse elemento é o host. O template do componente é renderizado dentro dele. :host estiliza o próprio host.

15. Componente standalone

Componentes novos são standalone por padrão no Angular atual. Eles podem importar diretamente outros componentes, diretivas e pipes:

@Component({
  selector: "app-root",
  imports: [TaskCard],
  templateUrl: "./app.html",
})
export class App {}

16. E o `NgModule`?

Projetos antigos podem organizar declarações em classes com @NgModule. O Angular continua permitindo esse modelo, mas a documentação oficial recomenda standalone para código novo.

Não reescreva uma aplicação existente apenas porque o curso usa standalone. Avalie custo, testes e benefício.

17. Árvore de componentes

App
├── Header
├── Dashboard
│   ├── MetricCard
│   └── TaskList
│       └── TaskCard
└── Footer

Cada ocorrência do seletor cria uma instância. A árvore ajuda a pensar em responsabilidade, composição e fluxo de dados.

18. Responsabilidade do componente

Um componente deve representar uma parte coerente da interface. Evite colocar autenticação, banco, todas as chamadas HTTP e todas as telas no componente raiz.

Pergunte:

essa parte possui identidade visual ou comportamental?
será reutilizada?
pode ser compreendida e testada isoladamente?
a separação reduz ou apenas espalha complexidade?

19. Gerando um componente

Dentro do espaço de trabalho:

ng generate component task-card

ou:

ng g c task-card

O gerador cria arquivos e segue as convenções configuradas. Examine o resultado em vez de decorar uma lista fixa de nomes.

20. Angular não acessa MySQL diretamente

O front-end não deve receber credenciais do banco nem abrir conexão com MySQL. O fluxo futuro será:

Angular → HTTPS → API NestJS → Prisma → MySQL

Essa separação protege credenciais e centraliza autorização e regras de servidor.

21. Laboratório guiado

Abra o laboratório de anatomia de componente.

Etapa 1 — Altere o estado

Modifique título e status. Observe o cartão renderizado.

Etapa 2 — Examine as camadas

Alterne entre classe, template, estilos e composição. Identifique a responsabilidade de cada arquivo.

Etapa 3 — Observe o seletor

O componente pai utiliza <app-task-card />. O navegador recebe uma visualização equivalente depois do processamento do framework.

Etapa 4 — Relacione com o projeto

Liste três partes da Knowledge AI que merecem componentes próprios e justifique.

22. Sobre o laboratório estático

O laboratório desta aula simula o resultado do componente com JavaScript executável para abrir sem instalar Angular. Os arquivos em src/app/ mostram a fonte Angular equivalente. Nas próximas aulas, o projeto evoluirá para um espaço de trabalho Angular real.

23. Erros comuns

Achar que Angular substitui HTML e CSS

Templates e estilos continuam usando esses fundamentos.

Copiar código AngularJS

$scope e controllers antigos não pertencem à arquitetura moderna.

Colocar tudo no componente raiz

A aplicação fica difícil de testar e evoluir.

Criar componentes para cada linha

Fragmentação excessiva aumenta navegação sem criar responsabilidade real.

Editar arquivos gerados da compilação

Altere as fontes em src, não a saída que será sobrescrita.

Conectar Angular diretamente ao MySQL

Isso expõe credenciais e ignora a API.

24. Boas práticas

preserve os fundamentos da Web;
use TypeScript estrito;
comece com componentes standalone;
dê responsabilidade clara a cada componente;
escolha seletores descritivos;
mantenha templates legíveis;
separe estilos globais e locais conscientemente;
utilize geradores, mas examine o código criado;
não coloque segredos no front-end;
mantenha acessibilidade desde o primeiro componente.

25. Exercícios

Exercício 1 — Classificação

Explique se Angular é linguagem, biblioteca ou framework.

Exercício 2 — Anatomia

Identifique classe, metadata, seletor, template e estilos.

Exercício 3 — Árvore

Desenhe uma árvore de componentes para o painel de tarefas.

Exercício 4 — Responsabilidade

Decida se cabeçalho, botão e página inteira devem ser componentes neste projeto.

Exercício 5 — Segurança

Explique por que Angular não deve acessar MySQL diretamente.

26. Desafio

Projete os componentes iniciais:

App;
AppHeader;
DashboardPage;
MetricCard;
TaskList;
TaskCard.

Para cada um, escreva responsabilidade, dados recebidos e eventos produzidos, mesmo que inputs e outputs sejam implementados somente na Aula 4.3.

27. Lista de verificação de conclusão

Sei explicar o que Angular é.
Diferencio Angular e AngularJS.
Diferencio Angular e TypeScript.
Entendo framework e SPA.
Sei o papel do Angular CLI.
Diferencio espaço de trabalho e aplicação.
Identifico os arquivos principais.
Entendo a anatomia de um componente.
Sei o que é componente standalone.
Não conectaria o front-end diretamente ao MySQL.

28. Critérios de avaliação

Critério	Pontos
Modelo mental do Angular	20
Ambiente e espaço de trabalho	15
Anatomia do componente	25
Composição e responsabilidades	20
Segurança e arquitetura	10
Exercícios e explicação	10
Total	100

Resumo

Nesta aula, aprendemos que:

Angular é um framework, não uma linguagem;
TypeScript, HTML e CSS continuam sendo fundamentais;
AngularJS é uma tecnologia diferente e antiga;
o CLI cria e opera o espaço de trabalho;
componentes combinam classe, template, seletor e estilos;
código novo utiliza componentes standalone por padrão;
componentes formam uma árvore;
Angular fala com APIs e não diretamente com MySQL.

Próxima aula

Na Aula 4.2, criaremos templates dinâmicos com interpolação, property binding, eventos e control flow usando @if e @for.