Curso de Angular 17

Introdução ao Angular 17

• O que é o Angular?
• Angular vs React vs Vue
• Visão geral das funcionalidades e arquitetura do Angular 17
• Configuração do Ambiente de Desenvolvimento

Primeiros Passos

• Criação de um novo projeto Angular 17 utilizando Angular CLI
• Exploração da estrutura do projeto e dos ficheiros
• Execução e servidor da aplicação
• Exibição de dados utilizando interpolação e expressões

Componentes

• Compreensão do papel dos componentes no Angular 17
• Criação e utilização de componentes
• Passagem de dados entre componentes utilizando inputs e outputs
• Utilização de hooks de ciclo de vida dos componentes

Diretivas

• Compreensão da diferença entre diretivas estruturais e de atributos
• Criação e utilização de diretivas integradas como ngIf, ngFor, ngSwitch, etc.
• Criação e utilização de diretivas personalizadas

Pipelines (Pipes)

• Compreensão da finalidade dos pipelines no Angular 17
• Criação e utilização de pipelines integrados como date, currency, json, etc.
• Criação e utilização de pipelines personalizados

Serviços

• Compreensão do papel dos serviços no Angular 17
• Criação e utilização de serviços
• Injeção de dependências utilizando providers

Módulos

• Compreensão do papel dos módulos no Angular 17
• Criação e utilização de módulos
• Importação e exportação de módulos

Ligação de Dados

• Compreensão da diferença entre ligação de dados de mão única e bidirecional
• Criação e utilização de ligação de propriedades, ligação de eventos e sintaxe banana-in-a-box
• Utilização de variáveis de referência de template

Enrutamento

• Compreensão do papel do enrutamento no Angular 17
• Criação e configuração de rotas
• Navegação entre rotas utilizando routerLink e router.navigate()
• Utilização de parâmetros de rota, parâmetros de consulta e fragmentos

Formulários

• Compreensão da diferença entre formulários orientados a template e formulários reativos
• Criação e validação de formulários utilizando controlos de formulário, grupos de formulários, arrays de formulários, etc.
• Utilização de validadores integrados como required, minLength, maxLength, etc.
• Criação e utilização de validadores personalizados

Cliente HTTP

• Compreensão do papel do cliente HTTP no Angular 17
• Criação e utilização de pedidos HTTP para comunicar com serviços de backend
• Utilização de observáveis para gerir fluxos de dados assíncronos
• Utilização de interceptores para modificar ou tratar pedidos ou respostas HTTP

Novo Fluxo de Controlo Declarativo

• Explicação da nova sintaxe de blocos de controlo de templates e como ela simplifica tarefas comuns como renderização condicional, iterações e tratamento de coleções vazias
• Apresentação de exemplos de utilização dos novos blocos, como @if, @else, @switch, @case, @default, @for e @empty
• Comparação da nova sintaxe com a anterior, como *ngIf, *ngSwitch e *ngFor
• Menção a como os novos blocos de controlo suportam aplicações sem zona (zoneless) com sinais (signals)

Blocos de Carregamento Diferido

• Explicação do conceito de carregamento diferido e como ele pode melhorar o desempenho e a experiência do utilizador das aplicações web
• Introdução ao novo bloco de controlo @defer que permite o carregamento sob demanda do conteúdo do bloco e das suas dependências
• Apresentação de exemplos de utilização do bloco @defer para diferentes cenários, como carregamento de componentes, diretivas, pipelines, animações e estilos
• Menção a como o bloco @defer funciona com a nova API de transições de visualização

API de Transições de Visualização

• Explicação da finalidade e dos benefícios da API de transições de visualização, que permite aos desenvolvedores personalizar as animações e transições entre visualizações
• Introdução à nova diretiva withViewTransitions que permite o uso da API de transições de visualização
• Apresentação de exemplos de utilização da diretiva withViewTransitions com diferentes tipos de transição, como fade, slide, zoom e flip
• Menção a como a API de transições de visualização funciona com o enrutador Angular e o histórico do navegador

Outras Funcionalidades e Melhorias

• Resumo breve de algumas das outras funcionalidades e melhorias oferecidas pelo Angular 17, como:
• Suporte para passar @Component.styles como uma string
• O código de animações do Angular é carregável sob demanda
• Suporte para TypeScript 5.2
• A API de sinal (signal) core está agora estável
• O suporte para Node.js v16 foi removido e a versão mínima suportada é v18.13.0
• O Esbuild será o builder padrão e o servidor de desenvolvimento padrão utilizará Vite