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

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

alexaugustobr/curso-angular