Formação Angular

Passo a passo

1. 1 Fundamentos Angular

   Para iniciar com Angular vamos conhecer como construir uma aplicação do zero utilizando sua principal ferramenta, a CLI (Command Line Interface). Além disso, criaremos componentes e entenderemos quais recursos do framework nos auxiliam na manutenção, reaproveitamento de código e na comunicação entre distintos componentes.

   Descobriremos como uma Single Page Application gerencia o fluxo de navegação através do recurso de roteamento, também aprenderemos como utilizar o cliente HTTP do Angular, para integração de dados do backend.

   E ainda mais, conheceremos como manipular formulários, desde uma simples validação até aquela que necessita uma resposta do servidor.

   • 

     Artigo Javascript ou Typescript? | Alura Cursos Online

   • 

     Curso Angular: Começando com o framework

     10h

   Faça esse curso e:

   • Utilize os recursos do framework para acelerar o desenvolvimento
   • Aprenda a criar componentes Angular
   • Entenda como transmitir informação entre componentes
   • Integre dados com API’s REST
   • Transforme seus componentes em páginas

   Mais detalhesdo curso Angular: Começando com o framework

   • 

     Curso Angular: Boas práticas em arquiteturas e formulários

     10h

   Faça esse curso e:

   • Entenda como começar um projeto com melhores validações de tipos utilizando o modo strict
   • Organize melhor seu projeto Angular utilizando módulos
   • Melhore a performance da sua aplicação conhecendo o Lazy Loading
   • Aprenda a criar formulários simples com módulo de Formulários Template Driven
   • Crie formulários elaborados utilizando o módulo de Formulários Reativos
   • Desenvolva validações síncronas e assíncronas para seus formulários.
   • Aprenda como utilizar token JWT no seu projeto Angular

   Mais detalhesdo curso Angular: Boas práticas em arquiteturas e formulários

   • 

     Curso Angular: Controle o fluxo de navegação

     12h

   Faça esse curso e:

   • Aprenda como utilizar a composição para criar componentes reutilizáveis e melhorar sua produtividade.
   • Entenda como realizar a operação de upload de fotos no seu front-end.
   • Otimize o seu site utilizando serviços do tipo Resolver.
   • Controle o fluxo de navegação do seu usuário com guarda de rotas.
   • Aprenda a manipular as requisições da sua aplicação criando serviços do tipo Interceptor.

   Mais detalhesdo curso Angular: Controle o fluxo de navegação

2. 2 Acessibilidade no Angular

   Neste passo, entenderemos como o Angular implementa um dos recursos mais importantes para o desenvolvimento de páginas Web, a acessibilidade. Para isto iremos criar componentes implementando o WCAG, que é um guia de como criar conteúdo acessível para web do W3C, conhecendo recursos para criar atalhos de teclado, instruções para formulários, integrado com componentes dinâmicos e animações.

   • 

     Alura+ O que é acessibilidade?

   • 

     Curso Angular: Design de componentes com acessibilidade

     10h

   Faça esse curso e:

   • Aprenda a utilizar leitores de tela
   • Entenda e aplique regras da WCAG
   • Avance no uso de diretivas
   • Integre o seu componente com Reactive Forms

   Mais detalhesdo curso Angular: Design de componentes com acessibilidade

   • 

     Curso Angular: Avançando no design de componentes com acessibilidade

     10h

   Faça esse curso e:

   • Crie uma API modal do zero
   • Aplique regras de acessibilidade da WCAG
   • Aprenda a criar componentes dinamicamente
   • Descubra como o Angular funciona por debaixo dos panos
   • Avance no uso de diretivas
   • Crie animações com auxílio do módulo Animations

   Mais detalhesdo curso Angular: Avançando no design de componentes com acessibilidade

   • 

     Vídeo Acessibilidade na Web - Alura Live#47 - YouTube

3. 3 Testando uma aplicação Angular

   Após dominar a criação de uma aplicação Angular, necessitamos consolidar a qualidade do código desenvolvido e garantir o funcionamento estável da aplicação ao adicionarmos novas funcionalidades. Para isto, os testes automatizados são as principais formas de garantir estas premissas de desenvolvimento. O Angular contém um conjunto de bibliotecas disponíveis e prontas para serem utilizadas que abrangem vários tipos de testes, e nesta seção conheceremos estas ferramentas e como utilizá-las no dia a dia.

   • 

     Curso Angular: Testes automatizados com Jasmine e Karma

     14h

   Faça esse curso e:

   • Teste serviços e componentes de maneira gradativa
   • Aprenda o papel do Jasmine e do Karma na criação de testes
   • Aprenda os fundamentos e remova vícios na criação de testes
   • Organize seus testes de maneira escalável
   • Entenda como TestBed funciona e sua importância
   • Crie lançadores customizados, inclusive scripts para servidores de CI
   • Gere métricas de cobertura e tenha confiança em seus testes

   Mais detalhesdo curso Angular: Testes automatizados com Jasmine e Karma

   • 

     Curso Angular: Avançando com testes automatizados

     14h

   Faça esse curso e:

   • Aprenda a testar diretivas de maneira escalável
   • Domine o uso de fakeAsync
   • Entenda as diferenças entre testes funcionais e de integração com o DOM
   • Aprenda quando usar o módulo HttpClientTestingModule
   • Utilize mock providers em testes de componentes
   • Teste a acessibilidade do seu componente
   • Avance no uso de Spies

   Mais detalhesdo curso Angular: Avançando com testes automatizados

4. 4 Avançando com bilbiotecas

   O Angular usa nativamente em seu framework algumas bibliotecas que possibilitam um código mais robusto e elegante. Uma dessas bibliotecas é a famosa RxJS. Aqui vamos conhecer o funcionamento desta biblioteca em uma aplicação Angular e entender como ela potencializa as possibilidades do projeto, principalmente quando o assunto é assincronicidade.

   • 

     Curso Angular e RxJS: Programação reativa

     06h

   Faça esse curso e:

   • Entenda o conceito de Observables
   • Prepare as informações vindas do backend utilizando os operadores map e pluck
   • Aprenda a debugar o fluxo de um observable utilizando o operador tap
   • Controlar o fluxo das informações utilizando o switchMap e merge
   • Simplifique a utilização dos dados utilizando o pipe async
   • Otimizar as chamadas ao servidor utilizando os operadores filter, debounceTime e distinctUntilChanged

   Mais detalhesdo curso Angular e RxJS: Programação reativa