Curso Desenvolvimento de Aplicações com AngularJS

Introdução

Introdução ao Angular 9

Ambiente de desenvolvimento (Node.JS, TypeScript, Angular CLI)

Hello, World! Criando primeiro projeto e o primeiro Componente

Introdução ao TypeScript para Angular

Módulos (ngModule)

Templates

Serviços (Services) e Injeção de dependência (DI)

Dicas plugins Angular para Atom e VS Code

Data binding

Property binding + Interpolation

Class e Style binding

Event binding

Two-way data binding

Input properties

Output properties

Ciclo de vida (life-cycle) do Componente

Acesso ao DOM e ao Template com ViewChild

Angular CLI

Angular CLI: Instalação e criação de projetos: ng new e ng serve

Angular CLI: Criando components, services: ng generate

Angular CLI: Usando pré-processadores (Sass, Less, Stylus)

Angular CLI: ng lint, ng test, ng e2e

Angular CLI: Estrutura do projeto

Angular CLI: Gerando build de produção

Angular CLI: instalando bibliotecas (bootstrap, jquery, materialize, lodash)

Diretivas

Introdução e tipos de diretivas no Angular 2

Diretivas: ngIf

Diretivas: ngSwitch, ngSwitchCase e ngSwitchDefault

Diretivas: ngFor

Diretivas: sobre o * e template

Diretivas: ngClass

Diretivas: ngStyle

Operador Elvis

ng-content

Criando uma diretiva de atributo: ElementRef e Renderer

Diretivas: HostListener e HostBinding

Diretivas: Input e Property Binding

Criando uma diretiva de estrutura (ngElse)

Serviços

Introdução a Serviços

Criando um serviço (Service)

Injeção de Dependência (DI) + como usar um serviço em um componente

Escopo de instâncias de serviços e módulos (singleton e várias instâncias)

Comunicação entre componentes usando serviços (broadcast de eventos)

Injetando um serviço em outro serviço

Pipes (Filtros)

Pipes (usando pipes, parâmetros e pipes aninhados)

Criando um Pipe

Aplicando Locale (internacionalização) nos Pipes

Pipes: Criando um Pipe ?Puro?

Pipes: Criando um Pipe ?Impuro?

Pipes: Async (assíncrono)

Rotas

Rotas: Introdução

Rotas: Configurando rotas simples

Rotas: RouterLink: definindo rotas no template

Rotas: Aplicando CSS em rotas ativas

Rotas: Definindo e extraindo parâmetros de roteamento

Rotas: Escutando mudanças nos parâmetros de roteamento

Rotas Imperativas: Redirecionamento via código

Rotas: Definindo e extraindo parâmetros de url (query)

Rotas: Criando um módulo de rotas

Criando um módulo de funcionalidade

Rotas: Criando um módulo de rotas de funcionalidade

Rotas Filhas

Rotas Filhas: desenvolvendo as telas

Rotas: Dica de Performance: Carregamento sob demanda (lazy loading)

Rotas: Tela de Login e como não mostrar o Menu (NavBar)

Usando Guarda de Rotas: CanActivate

Usando Guarda de Rotas: CanActivateChild

Usando Guarda de Rotas: CanDeactivate

Usando Guarda de Rotas: CanDeactivate com Interface Genérica

Usando Guarda de Rotas: Resolve: carregando dados antes da rota ser ativada

Usando Guarda de Rotas: CanLoad: como não carregar o módulo sem permissão

Definindo rota padrão e wildcard (rota não encontrada)

Formulários (Template Driven)

Formulários (template vs data / reativo) Introdução

Formulários ? Criando o projeto inicial com Bootstrap 3

Forms (template driven) Controles ngForm, ngSubmit e ngModel

Forms (template driven) Inicializando valores com ngModel (two-way data-binding)

Forms (template driven) Módulos e FormsModule

Forms (template driven) Aplicando validação nos campos

Forms (template driven) Aplicando CSS na validação dos campos

Forms (template driven) Mostrando mensagens de erro de validação

Forms (template driven) Desabilitando o botão de submit para formulário inválido

Forms (Dica): Verificando dados do Form no template com JSON

Forms (template driven) Adicionando campos de endereço (form layout Bootstrap 3)

Forms (template driven) Refatorando (simplificando) CSS e mensagens de erro

Forms (template driven) Form groups (agrupando dados)

Formulários Reativos (data-driven)

Formulários reativos (data driven) Introdução

Formulários reativos: Configuração (Módulo e Componente)

Formulários reativos: Criando um form com código Angular

Formulários reativos: Sincronizando HTML com FormGroup

Formulários reativos: Fazendo submit

Formulários reativos: Resetando o form

Formulários reativos: Aplicando validação nos campos

Formulários reativos: Acesso ao FormControl no HTML e CSS de validação dos campos

Formulários reativos: Campos de endereço (migrando um form template driven para form reativo)

Formulários reativos: Form groups (agrupando dados)

Formulários reativos: Autopopulando endereço com CEP (setValue e patchValue)