# Módulo 4 - Angular

## Identificação

- **Status:** concluído
- **Nível:** desenvolvimento front-end
- **Carga horária:** 20 horas
- **Formato sugerido:** 10 aulas de 2 horas
- **Projeto:** painel web da Knowledge AI em Angular

## Propósito

Este módulo transforma as regras e contratos TypeScript dos módulos anteriores em
uma aplicação front-end organizada por componentes, rotas, serviços e estados de
interface.

O aluno aprenderá Angular atual com componentes standalone, sem deixar de entender
por que projetos antigos podem utilizar `NgModule`.

## Competências

Ao final do módulo, o aluno será capaz de:

- explicar o que Angular é e o que um framework oferece;
- criar e executar um espaço de trabalho Angular;
- construir componentes standalone;
- utilizar templates, bindings, eventos e control flow;
- compor componentes com inputs e outputs;
- criar serviços e utilizar injeção de dependência;
- configurar rotas e layouts;
- criar formulários tipados e acessíveis;
- consumir APIs HTTP;
- representar estados de carregamento, sucesso, vazio e erro;
- utilizar signals e RxJS de forma consciente;
- criar interceptors;
- testar componentes e serviços;
- gerar uma compilação de produção.

## Sequência de aulas

| Aula | Tema | Produto da aula |
|---|---|---|
| [4.1](renderizadas/aula-01.html) | Introdução ao Angular e componentes | Primeiro componente da Knowledge AI |
| [4.2](renderizadas/aula-02.html) | Templates, bindings e control flow | Lista dinâmica de tarefas |
| [4.3](renderizadas/aula-03.html) | Composição, inputs e outputs | Biblioteca de componentes |
| [4.4](renderizadas/aula-04.html) | Serviços e injeção de dependência | Serviço de tarefas |
| [4.5](renderizadas/aula-05.html) | Rotas, layouts e navegação | Aplicação com múltiplas páginas |
| [4.6](renderizadas/aula-06.html) | Formulários e validação | Cadastro de tarefa acessível |
| [4.7](renderizadas/aula-07.html) | HTTP, APIs e RxJS | Integração com API simulada |
| [4.8](renderizadas/aula-08.html) | Signals e estado da interface | Painel reativo |
| [4.9](renderizadas/aula-09.html) | Interceptors, erros e acessibilidade | Fluxo resiliente |
| [4.10](renderizadas/aula-10.html) | Testes, compilação e projeto final | Painel Angular concluído |

## Projeto do módulo

O painel Angular da Knowledge AI deverá possuir:

- shell da aplicação;
- navegação por rotas;
- dashboard;
- lista e detalhes de tarefas;
- formulário de criação e edição;
- componentes reutilizáveis;
- serviço de domínio;
- integração HTTP simulada;
- estados de carregamento, vazio e erro;
- retorno acessível;
- testes essenciais;
- compilação de produção;
- README atualizado.

## Progressão técnica

```text
componente
→ template e binding
→ composição
→ serviço e DI
→ rotas
→ formulários
→ HTTP e RxJS
→ signals e estado
→ resiliência
→ testes e compilação
```

## Avaliação

| Critério | Pontos |
|---|---:|
| Componentes e composição | 20 |
| Templates e estado | 15 |
| Serviços e injeção | 15 |
| Rotas e formulários | 15 |
| HTTP e tratamento de erros | 15 |
| Acessibilidade | 10 |
| Testes e documentação | 10 |
| **Total** | **100** |

## Critérios de conclusão

- obter pelo menos 70 pontos;
- utilizar TypeScript estrito;
- não concentrar toda a aplicação no componente raiz;
- possuir navegação funcional;
- representar estados assíncronos;
- validar formulários;
- não inserir credenciais no front-end;
- manter testes essenciais aprovados;
- gerar a compilação sem erros;
- explicar a função de cada camada criada.

## Fontes oficiais de referência

- [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 de arquivos](https://angular.dev/reference/configs/file-structure)