Curso Angular Gratuito

Código fonte apresentado no curso de Angular gratuito do blog loiane.com - loiane.training

Código atualizado para Angular v10

Link do curso com certificado:

• http://loiane.training/curso/angular/

Playlist Youtube

• Clique aqui para assistir a todos os vídeos já publicados

Editor e plugins

Particularmente recomendo o uso do Visual Studio Code como editor - que é o mesmo usado nas aulas.

Para pacote de plugins, instale esse pacote de extensões VSCode que contém todos os plugins mostrados durante as aulas do curso: https://marketplace.visualstudio.com/items?itemName=loiane.angular-extension-pack.

✏️ Lista das aulas CRUD Angular + Spring

Módulo 1: Introdução

• Introdução e Criação do Projeto - 23/Ago
• Overview do Projeto e Instalando o Angular Material - 30/Ago
• Criando uma Toolbar - 06/Set
• Criando o Módulo de Cursos e Usando Roteamento com Lazy Loading - 13/Set
• Customizando o Tema do Angular Material - 20/Set

Módulo 2: Lista de Cursos

• Lista de Cursos com Material Table - 27/Set
• Melhorando o CSS e Criação do Módulo do Angular Material - 04/Out
• Criando Cursos Service - 11/Out
• Cursos Service: HTTP GET - 18/Out
• Lista de Cursos: Spinner (Carregando) - 25/Out
• Lista de Cursos: Tratamento de Erros - 01/Nov
• Criando Popup para Mensagem de Erros - 08/Nov
• Criando Pipe para Categoria do Curso - 15/Nov

Lista das aulas Curso Angular

Aulas publicadas/programadas

Introdução

• 01: Introdução + Arquitetura
• 02: Ambiente de desenvolvimento
• 03: Primeira app (Hello World)
• 04: Introdução ao Typescript para Angular
• 05: Módulos (ngModule)
• 06: Templates
• 07: Serviços (Services) e Injeção de dependência (DI)
• 08: Dica de produtividade: code snippets

Data binding e eventos

• 09: Property binding + Interpolation
• 10: Class e Style binding
• 11: Event binding
• 12: Two-way data binding
• 13: Input properties
• 14: Output properties
• 15: Ciclo de vida (life-cycle) do Componente
• 16: Acesso à variáveis locais do Template com ViewChild
• Extra: Atualizações do RC 5 e ngModule

Angular CLI: Introdução

• 17: Angular CLI: Instalação e criação de projetos: ng new e ng serve
• 18: Angular CLI: Criando components, services: ng generate
• Extra: Angular CLI: atualizando para versão RC5 (webpack)
• 19: Angular CLI: Usando pré-processadores (Sass, Less, Stylus)
• 20: Angular CLI: ng lint, ng test, ng e2e
• 21: Angular CLI: Estrutura do projeto
• 22: Angular CLI: Fazendo build
• 23: Angular CLI: instalando bibliotecas (bootstrap, materialize, lodash, jquery, etc)

Diretivas

• 24: Introdução e tipos de diretivas no Angular 2
• 25: ngIf
• 26: ngSwitch
• 27: ngFor
• 28: sobre o asterisco
• 29: ngClass
• 10: ngStyle
• 31: operador elvis
• 32: ng-content
• 33: Criando uma diretiva de atributo
• 34: HostListener e HostBinding
• 35: Property Binding de Diretivas
• 36: Criando uma diretiva de estrutura (ngElse)

Serviço (Service) e Injeção de Dependência (DI)

• 37: Introdução a Serviços
• 38: Criando um serviço (Service)
• 39: Injeção de Dependência (DI) + como usar um serviço em um componente
• 40: Escopo de instâncias de serviços e módulos
• 41: Injetando um serviço em outro serviço
• 42: Comunicação entre componentes usando serviços

Pipes

• 43: Pipes (usando pipes, parâmetros e pipes aninhados)
• 44: Criando um Pipe
• 45: Aplicando Locale (internacionalização) nos Pipes
• 46: Pipes: Criando um Pipe "Puro
• 47: Pipes: Criando um Pipe "Impuro"
• 48: Pipes: Async

Rotas

• 49: Rotas: Introdução
• 50: Rotas: Configurando rotas simples
• 51: Rotas: RouterLink: definindo rotas no template
• 52: Rotas: Aplicando CSS em rotas ativas-k
• 53: Rotas: Definindo e extraindo parâmetros de roteamento
• 54: Rotas: Escutando mudanças nos parâmetros de roteamento
• 55: Rotas Imperativas: Redirecionamento via código
• 56: Rotas: Definindo e extraindo parâmetros de url (query)
• 57: Rotas: Criando um módulo de rotas
• 58: Criando um módulo de funcionalidade
• 59: Rotas: Criando um módulo de rotas de funcionalidade
• 60: Rotas Filhas
• 61: Rotas Filhas: desenvolvendo as telas
• 62: Rotas: Dica de Performance: Carregamento sob demanda (lazy loading)
• 63: Rotas: Tela de Login e como não mostrar o Menu (NavBar)
• 64: Usando Guarda de Rotas: CanActivate
• 65: Usando Guarda de Rotas: CanActivateChild
• 66: Usando Guarda de Rotas: CanDeactivate
• 67: Usando Guarda de Rotas: CanDeactivate com Interface Genérica
• 68: Resolve: carregando dados antes da rota ser ativada
• 69: CanLoad: como não carregar a rota/módulo sem permissão
• 70: Definindo rota padrão e wildcard (rota não encontrada)
• 71: Estilo de url: HTML5 ou usando #

Formulários (Templates)

• 72: Formulários (template vs data / reativo) Introdução
• 73: Formulários - Criando o projeto inicial com Bootstrap 3
• 74: Forms (template driven) Controles ngForm, ngSubmit e ngModel
• 75: Forms (template driven) Inicializando valores com ngModel
• 76: Forms (template driven) Módulos e FormsModule
• 77: Forms (template driven) Aplicando validação nos campos
• 78: Forms (template driven) Aplicando CSS na validação dos campos
• 79: Forms (template driven) Mostrando mensagens de erro de validação
• 80: Forms (template driven) Desabilitando o botão de submit para formulário inválido
• 81: Forms (Dica): Verificando dados do Form no template com JSON
• 82: Forms (template driven) Adicionando campos de endereço (form layout Bootstrap 3)
• 83: Forms (template driven) Refatorando (simplificando) CSS e mensagens de erro
• 84: Forms (template driven) Form groups (agrupando dados)
• 85: Forms (template driven) Pesquisando endereço automaticamente com CEP
• 86: Forms (template driven) Populando campos com setValue e patchValue (CEP)
• 87: Forms (template driven) Submetendo valores com HTTP POST

Formulários (Reativos)

• 88: Formulários reativos (data driven) Introdução
• 89: Formulários reativos: Configuração (Módulo e Componente)
• 90: Formulários reativos: Criando um form com código Angular
• 91: Formulários reativos: Sincronizando HTML com FormGroup
• 92: Formulários reativos: Fazendo submit
• 93: Resetando o form
• 94: Formulários reativos: Aplicando validação nos campos
• 95: Formulários reativos: Acesso ao FormControl no HTML e CSS de validação dos campos
• 96: Formulários reativos: Endereço (migrando de template driven para form reativo)
• 97: Formulários reativos: Form groups (agrupando dados)
• 98: Formulários reativos: Autopopulando endereço com CEP (setValue e patchValue)
• 99: Formulários reativos: Verificar validação dos campos com botão submit
• 100: Formulários: Criando um serviço de Estados Brasileiros
• 101: Formulários: Serviço de consulta CEP + provideIn
• 102: Formulários reativos: Combobox simples (select)
• 103: Formulários reativos: Combobox com Objeto (ngValue e compareWith)
• 104: Formulários reativos: Combobox Múltiplo (Select Multiple)
• 105: Formulários reativos: Radio Button (Botão do tipo Rádio)
• 106: Formulários reativos: Checkbox Toggle
• 107: Formulários reativos: FormArray: Checkboxes Dinâmicos
• 108: Formulários reativos: Validação Customizada (FormArray Checkboxes)
• 109: Formulários reativos: Validação Customizada (CEP)
• 110: Formulários reativos: Validação entre dois campos (confirmar email)
• 111: Formulários reativos: Validação Assíncrona
• 112: Formulários reativos: Serviço de Mensagens de Erros
• 113: Formulários reativos: Reagindo à mudanças reativamente
• 114: Formulários reativos: Campo input customizado (ControlValueAcessor)
• 115: Formulários reativos: Classe base para Forms (herança no Angular)
• 116: Formulários reativos: Combobox aninhado: Estado + Cidade

Integração com server

• 117: Http / HttpClient: Introdução
• 118: Instalando Bootstrap 4
• 119: Http: Simulando Servidor REST (json-server)
• 120: Http GET: listar registros
• 121: Http: Dica: Variável de Ambiente
• 122: Http GET + Pipe Async
• 123: Http + RxJS: Unsubscribe Automático