/curso-angular

Curso Angular (v2+) do básico ao avançado

Primary LanguageTypeScript

Curso Angular (v2+) do básico ao avançado

Links

Aulas

Introdução

  • #001 Introdução ao Angular
  • #002 Ambiente de Desenvolvimento (Node.JS, TypeScript, Angular CLI)
  • #003 Hello, World! Criando primeiro projeto e o primeiro Componente
  • #004 Introdução ao TypeScript para Angular
  • #005 Módulos (ngModule)
  • #006 Templates
  • #007 Serviços (Services) e Injeção de dependência (DI)
  • #008 Dicas plugins Angular para Atom e VS Code

Data binding

  • #009 Property Binding e Interpolação
  • #010 Class e Style binding
  • #011 Event binding
  • #012 Two-way data binding
  • #013 Input properties
  • #014 Output properties
  • #015 Ciclo de vida (life-cycle) do Componente
  • #016 Acesso ao DOM e ao Template com ViewChild

Angular CLI

  • #017 Instalação e criação de projetos: ng new e ng serve
  • #018 Criando components, services: ng generate
  • #019 Usando pré-processadores (Sass, Less, Stylus)
  • #020 ng lint, ng test, ng e2e
  • #021 Estrutura do projeto
  • #022 Gerando build de produção
  • #023 instalando bibliotecas (bootstrap, jquery, materialize, lodash)

Diretivas

  • #024 Introdução e tipos de diretivas no Angular
  • #025 Diretivas: ngIf
  • #026 Diretivas: ngSwitch, ngSwitchCase e ngSwitchDefault
  • #027 Diretivas: ngFor
  • #028 Diretivas: sobre o * e template
  • #029 Diretivas: ngClass
  • #030 Diretivas: ngStyle
  • #031 Operador Elvis
  • #032 ng-content
  • #033 Criando uma diretiva de atributo: ElementRef e Renderer
  • #034 Diretivas: HostListener e HostBinding
  • #035 Diretivas: Input e Property Binding
  • #036 Criando uma diretiva de estrutura (ngElse)

Serviços

  • #037 Introdução a Serviços
  • #038 Criando um serviço (Service)
  • #039 Injeção de Dependência (DI) + como usar um serviço em um componente
  • #040 Escopo de instâncias de serviços e módulos (singleton e várias instâncias)
  • #041 Comunicação entre componentes usando serviços (broadcast de eventos)
  • #042 Injetando um serviço em outro serviço

Pipes (Filtros)

  • #043 Pipes (usando pipes, parâmetros e pipes aninhados)
  • #044 Criando um Pipe
  • #045 Aplicando Locale (internacionalização) nos Pipes
  • #046 Pipes: Criando um Pipe Puro
  • #047 Pipes: Criando um Pipe Impuro
  • #048 Pipes: Async (Assíncrono)

Rotas

  • #049 Rotas: Introdução
  • #050 Rotas: Configurando rotas simples
  • #051 Rotas: RouterLink: definindo rotas no template
  • #052 Rotas: Aplicando CSS em rotas ativas
  • #053 Rotas: Definindo e extraindo parâmetros de roteamento
  • #054 Rotas: Escutando mudanças nos parâmetros de roteamento
  • #055 Rotas Imperativas: Redirecionamento via código
  • #056 Rotas: Definindo e extraindo parâmetros de url (query)
  • #057 Rotas: Criando um módulo de rotas
  • #058 Criando um módulo de funcionalidade
  • #059 Rotas: Criando um módulo de rotas de funcionalidade
  • #060 Rotas Filhas
  • #061 Rotas Filhas: desenvolvendo as telas
  • #062 Rotas: Dica de Performance: Carregamento sob demanda (lazy loading)
  • #063 Rotas: Tela de Login e como não mostrar o Menu (NavBar)
  • #064 Usando Guarda de Rotas: CanActivate
  • #065 Usando Guarda de Rotas: CanActivateChild
  • #066 Usando Guarda de Rotas: CanDeactivate
  • #067 Usando Guarda de Rotas: CanDeactivate com Interface Genérica
  • #068 Usando Guarda de Rotas: Resolve: carregando dados antes da rota ser ativada
  • #069 Usando Guarda de Rotas: CanLoad: como não carregar o módulo sem permissão
  • #070 Definindo rota padrão e wildcard (rota não encontrada)
  • #071 Estilo de url: HTML5 ou usando #

Formulários (Template Driven)

  • #072 Formulários (template vs data / reativo) Introdução
  • #073 Formulários – Criando o projeto inicial com Bootstrap 3
  • #074 Forms (template driven) Controles ngForm, ngSubmit e ngModel
  • #075 Forms (template driven) Inicializando valores com ngModel (two-way data-binding)
  • #076 Forms (template driven) Módulos e FormsModule
  • #077 Forms (template driven) Aplicando validação nos campos
  • #078 Forms (template driven) Aplicando CSS na validação dos campos
  • #079 Forms (template driven) Mostrando mensagens de erro de validação
  • #080 Forms (template driven) Desabilitando o botão de submit para formulário inválido
  • #081 Forms (Dica): Verificando dados do Form no template com JSON
  • #082 Forms (template driven) Adicionando campos de endereço (form layout Bootstrap 3)
  • #083 Forms (template driven) Refatorando (simplificando) CSS e mensagens de erro
  • #084 Forms (template driven) Form groups (agrupando dados)
  • #085 Forms (template driven) Pesquisando endereço automaticamente com CEP
  • #086 Forms (template driven) Populando campos com setValue e patchValue (autocomplete CEP)
  • #087 Forms (template driven) Submetendo valores com HTTP POST

Formulários Relativos (data-driven)

  • #088 Formulários reativos (data driven) Introdução
  • #089 Formulários reativos: Configuração (Módulo e Componente)
  • #090 Formulários reativos: Criando um form com código Angular
  • #091 Formulários reativos: Sincronizando HTML com FormGroup
  • #092 Formulários reativos: Fazendo submit
  • #093 Formulários reativos: Resetando o form
  • #094 Formulários reativos: Aplicando validação nos campos
  • #095 Formulários reativos: Acesso ao FormControl no HTML e CSS de validação dos campos
  • #096 Formulários reativos: Campos de endereço (migrando um form template driven para form reativo)
  • #097 Formulários reativos: Form groups (agrupando dados)
  • #098 Formulários reativos: Autopopulando endereço com CEP (setValue e patchValue)
  • #099 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

Http

  • #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
  • #124 Capturando Erros (+ Erro com async)
  • #125 Erro Http: Alerta de Erro com Bootstrap
  • #126 Serviço de alerta genérico com Bootstrap 4
  • #127 Http: Criando formulário para criar e editar cursos
  • #128 HTTP POST Criando Cursos
  • #129 Http: Editando Cursos e Observables aninhados
  • #130 Http: Editando Cursos + Resolver (Rota)
  • #131 Http PUT Atualizando Cursos
  • #132 Http: Popup de Confirmação para remover Cursos
  • #133 Popup de Confirmação genérica Bootstrap 4 (com RxJS)
  • #134 Http: Serviço Genérico de CRUD
  • #135 Upload de Arquivo Formulário Upload com Bootstrap 4
  • #136 Upload de Arquivo: Back-end com Node.js
  • #137 Upload de Arquivo: Request com FormData
  • #138 Http: Removendo CORS com Angular Proxy
  • #139 Upload Arquivo: Barra de Progresso + Observando Eventos Http
  • #140 Criando operador RxJS customizado
  • #141 Download de Arquivo
  • #142 Criando tela de pesquisa
  • #143 Http: Passando Parâmetros na URL (HttpParams)
  • #144 Pesquisa/Busca com Programação Reativa

Depuração / Debug

  • #145 Debug com Augury
  • #146 Debug com Visual Studio Code

Build e Deploy

  • #147 Build de Produção + Suporte ao Internet Explorer
  • #148 Deploy em Produção (Firebase Hosting)
  • #149 Deploy em Produção com ng deploy (Firebase)
  • #150 Gerando Imagem Docker com Build de Produção
  • #151 Imagem Docker: Deploy Google Cloud (Cloud Run)
  • #152 Imagem Docker: Deploy Oracle Cloud
  • #153 Imagem Docker: Deploy Microsoft Azure
  • #154 Imagem Docker: Deploy Amazon AWS
  • #155 Conclusão e próximos passos