25%OFF no 1º ano | 50%OFF No 2º ano

Últimos dias!

Últimos dias!

00

DIAS

00

HORAS

00

MIN

00

SEG

64h

Para conclusão

8
Cursos
2
Vídeos extras
5
Artigos

Por que estudar Angular?

Criado e mantido pelo Google, o Angular é um framework tão completo, que é considerado uma verdadeira plataforma de desenvolvimento, possibilitando a criação de aplicações robustas, seguras e escaláveis, utilizando tecnologias como TypeScript, HTML e CSS. Nesta formação você aprenderá a:

  • Compreender os conceitos de arquitetura do framework
  • Desenvolver o seu primeiro CRUD (Criar, Ler, Atualizar e Deletar) usando o Angular
  • Evoluir a aplicação com novas funcionalidades e refatoração de código
  • Trabalhar com formulários orientados a templates, uso de diretivas e comunicação entre componentes
  • Programar de forma reativa utilizando a biblioteca RxJS

Clique aqui e acesse o Tech Guide para acompanhar sua evolução e matricule-se na formação para planejar à sua trilha de estudos com acesso direto pelo Dashboard.

Em caso de dúvidas, acesse o Fórum ou interaja com a comunidade no Discord.

Vamos mergulhar?!

Por que estudar esta formação?

  • Guia de aprendizado

    Conteúdos pensados para facilitar seu estudo

  • Do básico ao avançado

    Formação completa para o mercado

  • Você dentro do mercado

    Do zero ao sonhado emprego em sua área de interesse

Comece essa formação agora mesmo e capacite-se para seu próximo projeto!

Conheça os planos

Com quem você vai aprender?

  • Nayanne Batista

    Nayanne (Nay) é uma paraibana arretada que fez transição de carreira para a TI depois de concluir um doutorado na área da saúde e ser professora no ensino superior. Graduada em Análise e Desenvolvimento de Sistemas, já atuou como Dev Frontend em projetos e hoje é Instrutora na Alura. Acredita completamente no poder transformador da educação e da tecnologia na vida das pessoas. Ama livros e café! :)

  • Nayanne Batista

    Nayanne (Nay) é uma paraibana arretada que fez transição de carreira para a TI depois de concluir um doutorado na área da saúde e ser professora no ensino superior. Graduada em Análise e Desenvolvimento de Sistemas, já atuou como Dev Frontend em projetos e hoje é Instrutora na Alura. Acredita completamente no poder transformador da educação e da tecnologia na vida das pessoas. Ama livros e café! :)

  • DIEGO CARLOS MARTINS GAYOSO

    Brasiliense, apaixonado por games e programação.

  • DIEGO CARLOS MARTINS GAYOSO

    Brasiliense, apaixonado por games e programação.

  • Mario Souto

    Vivo no 220v, sempre atrás de um filme/rolê novo e codando desafios aleatórios em JavaScript. Adoro fazer sites e falar/dar aulas sobre isso no @nubank, meu canal no YouTube DevSoutinho e na @alura

  • Mario Souto

    Vivo no 220v, sempre atrás de um filme/rolê novo e codando desafios aleatórios em JavaScript. Adoro fazer sites e falar/dar aulas sobre isso no @nubank, meu canal no YouTube DevSoutinho e na @alura

Passo a passo
  1. 1 Explore as bases do Angular

    Nesta etapa inicial, você mergulhará no universo do Angular, começando pela criação de aplicações usando a poderosa ferramenta Angular CLI.

    Vamos aprofundar nossa compreensão na estrutura de componentes e explorar os conceitos fundamentais, tais como templates, diretivas, services e injeção de dependências.

    Você também verá como fazer a configuração de rotas da aplicação e vai aproveitar o poder do HTTPClient do Angular para executar operações CRUD no seu back-end.

    Além disso, você verá a construção de formulários e a aplicação de validações, utilizando as duas abordagens do angular - data driven (formulários reativos) e template driven - proporcionando uma base sólida para sua evolução.

    • Artigo Como começar com Angular

    • Artigo Node.js para Frameworks Front-end | Alura

    • Curso Angular 14: aplique os conceitos e desenvolva seu primeiro CRUD

      10h
      • Utilize a ferramenta Angular CLI para criar um projeto e diversos tipos de arquivos
      • Entenda a estrutura de um componente em Angular
      • Aprenda como usar property binding, interpolação, event binding e two-way data binding
      • Conheça algumas das principais diretivas do Angular
      • Adicione navegação dinâmica entre componentes através das rotas
      • Aplique injeção de dependências na aplicação
      • Realize requisições HTTP através da classe HttpClient e desenvolva um CRUD
    • Curso Angular 14: evoluindo a aplicação

      08h
      • Aprenda a construir formulários reativos
      • Aplique validações no formulário através da classe Validators
      • Acrescente a funcionalidade de busca na aplicação
      • Adicione paginação aos dados
      • Envie parâmetros na URL por meio do HttpParams
      • Implemente a função "favoritar"
      • Utilize o serviço Router para recarregar um componente
    • Artigo Angular: como funciona um componente? | Alura

    • Curso Angular: formulários orientados a templates

      08h
      • Conheça o formulário orientado a template
      • Entenda como usa o FormsModule e suas diretivas
      • Sabia como utilizar validações padrões
      • Entenda como criar diretivas validadoras
      • Implemente validação assincrona com uso de API
  2. 2 Gerencie o ciclo de vida de componentes e fluxo de dados reativos com a biblioteca RxJS

    Aperfeiçoe sua habilidade em controlar o comportamento dos componentes em várias fases de sua existência, desde a inicialização até a destruição, entendendo hooks do ciclo de vida como ngOnInit, ngOnChanges e ngOnDestroy.

    Aprofunde-se na utilização da biblioteca RxJS para programação reativa no Angular. Este passo detalha a criação de observables, a aplicação estratégica de operadores de transformação e combinação e a implementação de fluxos de dados assíncronos, proporcionando uma gestão eficiente de dados reativos em suas aplicações.

    • Curso Angular: ciclo de vida

      06h
      • Entenda como funciona o ciclo de vida de componentes no Angular
      • Conheça quais são os hooks de ciclo de vida
      • Entenda como implementar cada hooks e criar as lógicas para cada um deles
    • Vídeo O que é Programação Reativa? | #AluraMais - YouTube

    • Curso RxJS e Angular: programando de forma reativa

      08h
      • Conheça o padrão de projeto Observer
      • Entenda como utilizar Observables
      • Saiba como debugar o fluxo do observable com o operador tap
      • Aprenda a manipular os dados retornados do backend com o operador map
      • Otimize a busca typeahead com os operadores switchMap, filter e debounceTime
      • Realize unsubscribe automático através do pipe async
      • Lide com erros na aplicação utilizando catchError e throwError
  3. 3 Melhore a experiência do usuário com animações e interações atrativas no Angular

    Aqui, você mergulhará no mundo das animações e interações envolventes para aprimorar significativamente a experiência de uso em aplicações Angular. Este passo não só ensinará técnicas de animação, mas também fornecerá insights sobre como gerenciar efetivamente o estado dos componentes para otimizar o desempenho e garantir a estabilidade da sua aplicação.

    • Artigo A importância do motion design na experiência do usuário | Alura

    • Curso Angular: torne sua aplicação interativa e personalizada com animações

      06h
      • Aprenda a utilizar o módulo de animações do Angular
      • Entenda como adicionar gatilhos nos elementos do template com o método trigger
      • Saiba como animar diferentes estados do elemento com os métodos state e style
      • Aplique diferentes formas de adicionar animações às transições de estado do elemento com os métodos transition e animate
      • Conheça os estados reservados void e coringa
      • Anime elementos que não estão anexados ao DOM com :enter e :leave
    • Artigo Como o Motion Design pode contribuir para a UX/UI | Alura

    • Curso Angular: aprimore suas técnicas de animação e crie interfaces ainda mais atraentes

      08h
      • Adicione estilos intermediários às animações com keyframes
      • Personalize a velocidade e aceleração usando cubic-bezier
      • Crie animações simultâneas com group
      • Anime elementos aninhados com query
      • Atualize dados da aplicação utilizando BehaviorSubject
      • Sequencie suas animações com stagger
      • Desabilite animações quando necessário
  4. 4 Acessibilidade no Angular: aprimorando formulários, modais e rotas

    Neste último passo você aprenderá como melhorar a acessibilidade de uma aplicação utilizando o framework Angular. Serão abordadas melhorias na acessibilidade em aspectos como a navegação entre as rotas da aplicação, formulários, gerenciamento de foco e fornecimento de feedback auditivo às interações dos usuários. O curso propõe desafios para que você aplique os conhecimentos adquiridos.

    • Alura+ Fronteiras do Front-end | EP 08: Tour sobre Acessibilidade na web

    • Site Acessibilidade web - Hipsters #21 - Hipsters Ponto TechHipsters Ponto Tech

    • Curso Acessibilidade no Angular: aprimorando formulários, modais e rotas

      06h
      • Aprimore a acessibilidade em suas aplicações Angular usando diretivas como RouterLinkActive para realçar visualmente links ativos e aria-current em conjunto com títulos descritivos para proporcionar uma navegação mais clara
      • Utilize atributos ARIA para fornecer descrições acessíveis e identificação semântica
      • Reforce a acessibilidade em formulários e botões, integrando atributos como aria-invalid, aria-describedby e aria-disabled
      • Integre diretivas do Angular, como focusTrap do módulo a11yModule do Angular CDK (Component Development Kit), para aprimorar o gerenciamento do foco e garantir uma experiência ainda mais acessível
      • Aprenda a manipular eficientemente o DOM com Renderer2 e ElementRef para melhorar a experiência de uso, abordando casos como o gerenciamento de foco e controle de scroll
      • Aplique estratégias avançadas, incluindo o uso dinâmico do LiveAnnouncer para fornecer feedback auditivo de forma adaptativa e personalizada em resposta às interações e eventos da aplicação

Escola

Front-end

Além dessa, a categoria Front-end conta com cursos de HTML, CSS, React, Angular, JavaScript, jQuery,e mais...

Conheça a Escola

Comece a estudar agora na maior escola de tecnologia do país