Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/loiane/curso-angular

:mortar_board: [PT-BR] Curso de Angular gratuito - loiane.training [EN] Source code of my free Angular training.
https://github.com/loiane/curso-angular

angular angular-cli angular10 angular9 angularv10 angularv9 curso cursoangular

Last synced: 30 days ago
JSON representation

:mortar_board: [PT-BR] Curso de Angular gratuito - loiane.training [EN] Source code of my free Angular training.

Awesome Lists containing this project

README

        

Curso Angular Gratuito
=================

[![Open in Visual Studio Codespaces](https://img.shields.io/endpoint?style=social&url=https%3A%2F%2Faka.ms%2Fvso-badge)](https://online.visualstudio.com/environments/new?name=Curso%20Angular&repo=loiane/curso-angular)

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/](http://loiane.training/curso/angular/)

### Playlist Youtube
* [Clique aqui para assistir a todos os vídeos já publicados](https://www.youtube.com/playlist?list=PLGxZ4Rq3BOBoSRcKWEdQACbUCNWLczg2G)

### 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](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: Comunicação entre componentes usando serviços
* 42: Injetando um serviço em outro serviço

## 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