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
• Configurando o Ambiente de Desenvolvimento

Primeiros Passos

• Criando um novo projeto Angular 17 usando o Angular CLI
• Explorando a estrutura do projeto e os arquivos
• Executando e servindo a aplicação
• Exibindo dados usando interpolação e expressões

Componentes

• Compreendendo o papel dos componentes no Angular 17
• Criando e utilizando componentes
• Passando dados entre componentes usando inputs e outputs
• Utilizando hooks de ciclo de vida dos componentes

Diretivas

• Compreendendo a diferença entre diretivas estruturais e de atributo
• Criando e utilizando diretivas embutidas como ngIf, ngFor, ngSwitch, etc.
• Criando e utilizando diretivas personalizadas

Pipes

• Compreendendo o propósito dos pipes no Angular 17
• Criando e utilizando pipes embutidos como date, currency, json, etc.
• Criando e utilizando pipes personalizados

Serviços

• Compreendendo o papel dos serviços no Angular 17
• Criando e utilizando serviços
• Injetando dependências usando providers

Módulos

• Compreendendo o papel dos módulos no Angular 17
• Criando e utilizando módulos
• Importando e exportando módulos

Data Binding

• Compreendendo a diferença entre data binding unidirecional e bidirecional
• Criando e utilizando property binding, event binding e sintaxe banana-in-a-box
• Usando variáveis de referência de template

Roteamento

• Compreendendo o papel do roteamento no Angular 17
• Criando e configurando rotas
• Navegando entre rotas usando routerLink e router.navigate()
• Usando parâmetros de rota, parâmetros de consulta e fragmentos

Formulários

• Compreendendo a diferença entre formulários orientados a template e formulários reativos
• Criando e validando formulários usando controles de formulário, grupos de formulário, arrays de formulário, etc.
• Usando validadores embutidos como required, minLength, maxLength, etc.
• Criando e utilizando validadores personalizados

Cliente HTTP

• Compreendendo o papel do cliente HTTP no Angular 17
• Criando e utilizando requisições HTTP para se comunicar com serviços de back-end
• Usando observáveis para gerenciar streams de dados assíncronos
• Usando interceptors para modificar ou gerenciar requisições ou respostas HTTP

Novo Fluxo de Controle Declarativo

• Explicando a nova sintaxe de blocos de controle de template e como ela simplifica tarefas comuns, como renderização condicional, laços de repetição e tratamento de coleções vazias
• Dando exemplos de uso dos novos blocos, como @if, @else, @switch, @case, @default, @for e @empty
• Comparando a nova sintaxe com a anterior, como *ngIf, *ngSwitch e *ngFor
• Menionando como os novos blocos de controle suportam aplicações sem zona com signals

Blocos de Carregamento Diferido

• Explicando o conceito de carregamento diferido e como ele pode melhorar o desempenho e a experiência do usuário em aplicações web
• Apresentando o novo bloco de controle @defer que habilita o carregamento preguiçoso do conteúdo do bloco e suas dependências
• Dando exemplos de uso do bloco @defer para diferentes cenários, como carregamento de componentes, diretivas, pipes, animações e estilos
• Menionando como o bloco @defer funciona com a nova API de transições de visualização

API de Transições de Visualização

• Explicando o propósito e os benefícios da API de transições de visualização, que permite aos desenvolvedores personalizar as animações e transições entre visualizações
• Apresentando a nova diretiva withViewTransitions que habilita o uso da API de transições de visualização
• Dando exemplos de uso da diretiva withViewTransitions com diferentes tipos de transição, como fade, slide, zoom e flip
• Menionando como a API de transições de visualização funciona com o roteador do Angular e o histórico do navegador

Outras Funcionalidades e Melhorias

• Resumindo brevemente algumas das outras funcionalidades e melhorias que o Angular 17 oferece, como:
• Suporte para passar @Component.styles como string
• O código de animações do Angular é carregável preguiçosamente (lazy-loadable)
• Suporte ao TypeScript 5.2
• A API de signal do núcleo agora está estável
• O suporte ao Node.js v16 foi removido e a versão mínima suportada é v18.13.0
• O Esbuild será o construtor padrão e o servidor de desenvolvimento padrão usará Vite