Para aprender Angular em 2025 (de graça)
Um guia de estudos para quem quer dar os primeiros passos no Angular. Começando pelos pontos que você pode ter maiores dificuldades e na sequência com materiais de apoio e um projeto para que você pratique.
Em nosso último post descrevi minha visão enquanto arquiteto sobre Angular como alternativa para 2025. Tal como disse, a curva de aprendizado do Angular pode ser um problema, sendo assim aqui segue um guia que pode te ajudar a se tornar produtivo em tempo hábil no framework.
Como sempre, vou propor um projeto prático e também apresentar os pontos que consideramos mais críticos na compreensão do Angular e alguns recursos para que você se guie.
Principais dificuldades
Primeiro vou te mostrar quais são os pontos que observo meus colegas enfrentarem as maiores dificuldades no aprendizado. Não precisa seguir estes links: apenas tenha em mente para os consultar mais tarde quando as dificuldades aparecerem, tá?
Não subestime o TypeScript - comece por aqui
A linguagem padrão adotada pelo Angular é o TypeScript: por se parecer muito com JavaScript é normalmente o elemento mais negligenciado no aprendizado (experiência própria: não cometa meu erro), mas há diferenças e é justamente aí que você pode sofrer sem necessidade.
A ideia principal por trás do TypeScript é ser um "JavaScript tipado", e isto faz toda a diferença: é fundamental que você saiba pelo menos como é o sistema de tipos oferecido pela linguagem e também como a linguagem implementa classes e interfaces (muita atenção a este último ponto).
Recomendo muito então que se você vai dar seus primeiros passos em Angular, leia pelo menos estes dois links:
- Página oficial da linguagem (a primeira página) - https://www.typescriptlang.org/ - sim, to falando sério. Ao menos na data de escrita deste post (dezembro de 2024) a introdução já vai ao menos te dizer aonde está entrando.
- Handbook - https://www.typescriptlang.org/docs/handbook/intro.html - não precisa ler inteiro, mas ao menos navegue pelas seções (The Basics pelo menos, seguido de Every day types)
Também não vemos grandes novidades vindas para o TypeScript nos últimos anos, mas ao menos em 2025 a linguagem não deve desaparecer e deve continuar sendo o padrão adotado pelo Angular, sendo assim: aprenda.
Entenda que é um framework
É fundamental que você esteja preparado para encarar um framework: no caso do Angular isto significa entender que não é você quem define o fluxo de execução, mas sim o Angular. Na Insights temos alguns conteúdos que podem te ajudar.
Para que fique claro a você o que é de fato um framework.
Ignore toda a parte referente a Java e Spring e foque nos conceitos presentes neste guia.
Há conceitos que você precisa entender bem:
- Injeção de dependências - (clássico escrito pelo Martin Fowler)
- Inversão de controle - wikipedia
- Ciclo de vida - quando um objeto é criado, preparado e destruído (no caso do Angular, leia este texto na documentação oficial)
Programação reativa com RxJS
Você irá usar o cliente HTTP do Angular para realizar requisições a APIs, e ele usa o RxJS por trás dos panos. Não digo que você precise ser expert em RxJS, mas ao menos saber o mínimo é necessário: vai evitar muitos murros em ponta de faca e tornar seu código muito melhor.
Leia estes dois links antes de prosseguir:
- Overview - vai te falar o básico do básico sobre o RxJS, apenas para que você se ambiente.
- Observable - guarde este link: este é o objeto retornado pelo HTTP Client do Angular por padrão.
Aprendendo do zero (e de graça)
Agora que você sabe os pontos que podem oferecer maior dificuldade segue um guia rápido para que você possa aprender Angular e também um mini projeto para que possa por tudo em ação.
Comece pelo tutorial oficial do Angular (o que estão ocultando)
No novo site do Angular há uma seção chamada "Tutorials" que você pode seguir, mas não a recomendo hoje. Há alguns problemas com ela:
- Learn Angular in your browser via playground - só se você quiser ter uma visão bem rápida sobre o que é o Angular.
- Build your first Angular app locally - é legal, mas ao misturarem demais texto e vídeo você vai se perder.
A vantagem dos tutoriais que estão no site oficial é que todos tratam da última versão do Angular (19). Mas se você está começando é necessário entender o básico: e o melhor tutorial pra isto, totalmente baseado em texto apenas não está mais no site.
Comece pelo Tour of Heroes - https://v17.angular.io/tutorial/tour-of-heroes
O Tour of Heroes ainda trata do Angular 17: não mudou tanta coisa assim de lá pra cá no que diz respeito aos conceitos fundamentais. Então você pode começar por ele sem problema.
Importante: faça do início ao fim, mantenha apenas esta aba aberta, não use outras abas. Repito: leia do início ao fim, vá escrevendo o código conforme acompanha o tutorial. Minha taxa de sucesso indicando este material tem sido de 100%.
Repito o link: https://v17.angular.io/tutorial/tour-of-heroes
A Loiane Groner mantém uma plataforma gratuita (é incrível isto) e que tem um curso completo de Angular pra você. Talvez não seja a última versão do Angular, mas vai te ajudar.
Aqui o link: https://loiane.training/curso/angular
Então caso tenha problemas nesta hora, apenas leia o conteúdo, tente absorver o máximo possível e siga em frente. Na sequência tente realizar o projeto que vou te propor.
Complemente com a teoria
Terminou o tutorial? Navegue pela documentação do Angular no site oficial https://angular.dev. Tá sem tempo? Leia apenas esta seção de cabo a rabo: https://angular.dev/essentials
Pondo em prática
Você pode implementar uma loja virtual, que tal? Recentemente descobri um projeto que achei interessantíssimo chamado "Fake Store API": é um backend completo pronto para que você possa treinar o uso do HTTP Client (especialmente se teve problemas com o backend oferecido pelo Tour of Heroes).
Você deverá implementar uma loja simples que tenha as seguintes páginas:
- A listagem de produtos, na qual clicando sobre o produto, você é direcionado para o detalhamento do que foi clicado.
- Implemente também um carrinho de compras: isto vai te permitir trabalhar com manutenção de estado na sua aplicação.
- O usuário de mentira ainda não tem uma conta? Fake Store API tem endpoints para a manutenção de usuários, então você pode implementar o registro e a autenticação de usuários também.
Aqui estão os links para que você possa conhecer o projeto:
- A documentação que expõe todos os endpoints: https://fakestoreapi.com/docs
- O código fonte no Github caso queira modificar a API para seu próprio uso - https://github.com/keikaavousi/fake-store-api
- E o link caso você queira fazer uma doação para o autor do projeto, que realmente merece! - https://fakestoreapi.com/donate
