# 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`](../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.

```bash
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:

1. explicar o que Angular é;
2. diferenciar Angular, AngularJS, JavaScript e TypeScript;
3. explicar framework e SPA;
4. descrever o papel do Angular CLI;
5. diferenciar espaço de trabalho e aplicação;
6. identificar os arquivos principais;
7. explicar um componente;
8. entender `@Component`;
9. utilizar seletor, template e classe;
10. explicar componentes standalone;
11. reconhecer código antigo com `NgModule`;
12. 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:

```bash
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:

```bash
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.

```text
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:

```text
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:

```ts
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`

```ts
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

```ts
selector: "app-task-card"
```

Permite usar:

```html
<app-task-card />
```

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

## 11. Template

```html
<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

```ts
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

```css
: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:

```html
<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:

```ts
@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

```text
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:

```bash
ng generate component task-card
```

ou:

```bash
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á:

```text
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](../exemplos/aula-4.1/index.html).

### 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`.

## Fontes oficiais

- [Visão geral do Angular](https://angular.dev/overview)
- [Anatomia de componentes](https://angular.dev/guide/components)
- [Templates](https://angular.dev/guide/templates)
- [Angular CLI: ng new](https://angular.dev/cli/new)
- [Estrutura do espaço de trabalho](https://angular.dev/reference/configs/file-structure)