Repositório com o intuito de documentar os estudos do curso de Angular da Alura.

• Integração com Web API's

  • SPAs e consumo de APIs
  • Nomenclatura do servidor
  • HttpClient e injeção de dependência
  • Consumindo dados da API
  • Isolando a acesso em serviços
  • Tipando a API
  • Ciclo de vida de um componente

• Single Page Applications e rotas

  • Gerar componente pelo CLI
  • BrowserModule e CommonModule
  • Single Page Application e Rotas
  • Lidando com rotas inexistentes
  • Segmentos de rotas

• Novo componente, novos conceitos

  • Componente exclusivo para listar fotos
  • Implementando a lógica do Grid
  • A função Array.slice
  • Change Detection
  • Sobre a interface OnChanges

• Melhorando a experiência do usuário

  • Binding de eventos
  • Pipe e implementação
  • Resolvers
  • Implementando Resolvers
  • RxJS e seu Subject
  • Padrão debounce com RxJS
  • Paginação de dados
  • LoadButton

• Lapidando ainda mais a aplicação

  • Submódulos
  • Integração com Font Awesome
  • Component container e ng-content
  • Componentizando o filtro
  • Output property
  • Criando uma diretiva customizada

• Componente de login

  • Validação de formulários
  • Importando o módulo de validação
  • Componentizando mensagens de validação
  • Enviando credenciais para a API
  • Redirecionamento pós login
  • Redirecionando depois do login
  • ViewChild: obtendo referências do template
  • Focus automático
  • Detectando a plataforma de execução

• Autenticação e o papel do token

  • Acesso do header de resposta
  • Acessando o headers
  • Armazenamento do token
  • Local de armazenamento do token
  • Segurança do token
  • Cabeçalho da aplicação

• Usuário logado e proteção de rotas

  • Separação de responsabilidades
  • Entendendo BehaviorSubject
  • Async pipe
  • Implementação do logout
  • Guarda de rotas
  • A diretiva routerLink

• Registro de novos usuários

  • Validação do formulário
  • Criando nosso próprio validador
  • Validador assíncrono
  • Submissão dos dados
  • Sobre a classe FormGroup

• Rotas filhas e lazy loading

  • Rotas filhas
  • Build do projeto
  • Lazy loading e code splitting
  • Refinando o uso de serviços
  • Interceptadores e envio do token

• Upload de fotos

  • Rodapé
  • O formulário upload de fotos
  • Validando o formulário
  • Obtendo os dados do formulário
  • Upload da foto
  • FormData
  • Adequando a exibição das fotos

• Lapidando o upload

  • Um botão mais elegante
  • Preview de imagens
  • Variável de templates
  • *ngIf e else
  • Escondendo um elemento
  • Seleção automática de arquivos
  • Bloqueando acesso não autenticado

• Detalhes da foto

  • Rotas parametrizadas
  • Extraindo parâmetros de rotas
  • Segmento de rota
  • Buscando a foto selecionada da API
  • Serviço para obtenção de segmentos de rotas

• Comentando fotos

  • Buscando comentários
  • Comentários como componente
  • Lidando com o refresh de comentários
  • Lapidando a experiência do usuário

• Remoção de fotos e novos componentes

  • Permissão de comentários
  • Remoção de fotos
  • Ocultando elementos que requerem permissão
  • Revisão - O Pipe Async
  • Sobre liberação de recursos

• Componente de notificação

  • Modelando dados do componente
  • O modificador readonly
  • A camada de serviço do componente
  • Revisão sobre Subject
  • Implementando o componente
  • Utilizando o novo componente
  • Revisão sobre comunicação entre componentes
  • Lapidando o componente
  • Um pequeno detalhe
  • Consolidando seu conhecimento

• Curtindo fotos

  • Exibindo apenas quando logado
  • Revisando o papel do serviço Renderer
  • Preparando o serviço
  • Criando Observables com of
  • Curtindo fotos
  • Um pouco mais sobre Rxjs

• Diferenciando ambientes de deploy

• Dados de login: Usuário: flavio e Senha: 123
• Site para decodificar token: https://calebb.net/
• O BehaviorSubject armazena a última emissão até que alguém apareça para consumi-la.
• Com o Async pipe conseguimos capturar a emissão do Observable diretamente do nosso template.
• O guarda de rotas serve para darmos consistência para nossa aplicação, liberando acesso apenas para as rotas que fazem sentido para nosso usuário.
• Em um formulário, para saber habilitar um botão quando os dados tiverem dados, mesmo tendo dados assincronos usa-se pending dessa forma [disabled]="signupForm.invalid || signupForm.pending"
• Um input com o type="file" básico, em que o accpet="image/*", faz com que apenas arquivos de imagem possam ser selecionados, ou seja, uma espécie de filtro.
• Exemplo do uso da diretiva *ngIf/else:

    <div *ngIf="show; else message">
        Welcome
    </div>
    <ng-template #message>
        Error!
    </ng-template>

• O operador switchMap cancela o Observable anterior passando o fluxo para um novo Observable, garantindo assim que a emissão tenha apenas o valor emitido pelo Observable retornado por switchMap.

• Sobre Pipe Async:

  • Observables associados ao pipe async são liberados quando o componente cujo o template faz parte é destruído, livrando o desenvolvedor desta responsabilidade.
  • Permite que o template de um componente realize a inscrição de um observable fornecendo o valor emitido diretamente no template.

• API: Rodar com a versão do node 8.0.0
• Frontend: Rodar com a versão do node 12.19.0