Angular: desenvolva aplicações SPA com componentes e gerenciamento de estado

Conhecendo o ecossistema Angular - Apresentação

Apresentando o instrutor e o curso

Olá! Seja bem-vindo a mais este curso da Alura. Meu nome é Yago Oliveira, sou coordenador, professor, instrutor e desenvolvedor de software há mais de 9 anos. Hoje, iniciaremos nossa jornada com o Angular. Tenho um grande apreço por esse framework, pois foi com ele que comecei a trabalhar entre 2018 e 2019, ainda na versão 6 do Angular. Vamos discutir isso ao longo do curso.

Introduzindo o projeto Deleite Bebidas

Para nos guiar e servir como ferramenta durante toda a nossa jornada, utilizaremos o projeto Deleite Bebidas, que é uma loja de bebidas lácteas, muito refrescante para o calor que está fazendo. Sentimos falta de ter um Deleite. Vamos explorar nosso banner e entender como construir toda essa aplicação.

Explorando a interface do projeto

Temos a parte da appbar ou do header, como tratamos mais adiante, um banner e nossas categorias de produtos: milkshakes, sorvetes, smoothies (vitaminas) e cafés gelados. Quando clicamos em adicionar, aparece um banner informando que temos um carrinho com o total estimado. Podemos adicionar outros produtos, que serão somados, e também conseguimos esvaziar o carrinho.

Requisitos e conhecimentos prévios

Para entendermos como construir tudo isso durante o curso, é muito importante que já tenhamos concluído todo o módulo básico antes de chegar aqui. É essencial que saibamos HTML, CSS, TypeScript e, consequentemente, JavaScript. Esse conhecimento prévio é fundamental para que possamos aproveitar ao máximo e focar no Angular, no CLI e nas funcionalidades interessantes que discutiremos.

Convidando para a jornada de aprendizado

Convidamos todos a embarcar conosco para realizar muitas atividades interessantes, construir essa aplicação, entender conceitos e colocar a mão na massa. Estamos ansiosos e aguardamos vocês!

Conhecendo o ecossistema Angular - Conhecendo o mundo Angular

Introduzindo o ferramental e a complexidade do desenvolvimento web

Para começar, vamos introduzir o ferramental que será abordado hoje. Vamos entender sua origem, seu destino e nos aprofundar em sua criação para compreender qual problema ele realmente resolve. No desenvolvimento web moderno, enfrentamos uma gama de funcionalidades e uma complexidade significativa para entregar o software, seja no navegador do computador ou no celular. Surge a pergunta: por que não utilizamos apenas JavaScript? Por que recorremos a ferramentas como Angular e outras disponíveis no mercado?

Primeiramente, a questão da performance é crucial. Aplicações modernas de front-end exigem uma renderização mais rápida, otimização de recursos e uma experiência mais fluida para o usuário. Se deixarmos tudo a cargo das pessoas desenvolvedoras, a chance de surgirem gargalos de performance é grande, devido às inúmeras nuances e detalhes que precisam ser considerados ao longo do desenvolvimento de uma aplicação.

Abordando a organização e arquitetura em projetos grandes

Com a variedade de opções e informações que precisamos gerenciar, organizar tudo isso se torna mais custoso. Em projetos com dezenas ou centenas de pessoas desenvolvedoras, como em aplicações para grandes redes de lojas ou franquias de restaurantes, é essencial manter tudo conciso e dentro de uma arquitetura bem estabelecida. Construir isso do zero, sem uma base sólida, é extremamente trabalhoso.

A complexidade das single-page applications (aplicações de página única) também é um desafio. Se ainda não estiver familiarizado com o conceito, recomendamos consultar nossos cursos do ciclo básico, onde explicamos isso detalhadamente. Em resumo, single-page applications são aplicações onde o navegador funciona como um aplicativo instalado, sem navegação entre páginas. Construir essas rotas e detalhes manualmente é trabalhoso, especialmente em termos de performance e gerenciamento de estado, que discutiremos mais adiante.

Explorando a comunicação com APIs e os desafios de não seguir padrões

As comunicações com APIs, embora o JavaScript ofereça ferramentas para isso, podem ser complexas de gerenciar manualmente. Ferramentas como o Angular, nosso objeto de estudo, evoluíram para abstrair e remover camadas de complexidade, proporcionando maior fluidez e segurança no desenvolvimento de software.

Quais são os desafios de não seguir esses padrões? Gerenciamento de estado complexo é um deles. Em aplicações com múltiplas funcionalidades, gráficos, interações e processos simultâneos, gerenciar tudo apenas com JavaScript é desafiador. Além disso, diferentes empresas podem implementar arquiteturas de formas distintas, resultando em padrões variados. Para evoluir o ecossistema, é importante convergir para soluções únicas.

Discutindo a testabilidade e a escolha do Angular

A testabilidade limitada é outro desafio. Se não nos importamos com arquitetura e acoplamento, a qualidade do código pode cair. Como garantir que novas funcionalidades não quebrem as existentes? O Angular já traz essa preocupação em seu código, permitindo que comecemos a escrever testes de forma mais eficiente.

Ao escolher um framework como o Angular para desenvolver aplicações, percebemos que essa decisão já incorpora uma forma de desenvolvimento que facilita a manutenção e evolução do software.

Comparando a construção de software com a construção civil

Tranquilo até aqui?

Se pensarmos em uma analogia, construir algo do zero sem um plano estruturado é como construir um prédio baseado apenas em vontades e ideias aleatórias, sem seguir padrões técnicos. Isso resultaria em uma estrutura sem fundações sólidas e sem o conhecimento adequado, crescendo de forma desorganizada, como algumas gambiarras que conhecemos. Na arquitetura de software, quando não seguimos nenhum padrão, criamos o que chamamos de "bola de lama", uma grande confusão. A arquitetura de software e o Angular vêm para resolver isso no front-end. O Angular não é apenas um framework, mas uma plataforma com um ecossistema completo, incluindo components, services, módulos e uma gama de funcionalidades que exploraremos ao longo do curso. Isso nos permite construir uma aplicação de forma organizada.

Explorando o ecossistema do Angular e sua evolução

Tudo isso está incluso no framework, então não precisamos construir rotas ou injeção de dependência do zero. Vamos nos aprofundar nesses conceitos, mas já temos isso pronto no núcleo da aplicação que usa Angular. O framework não é apenas uma ideia de "vou construir do meu jeito". O Google, mantenedor do Angular, já pensou em como construir essa aplicação de forma organizada, com engenheiros desenvolvendo uma maneira eficiente de estruturar o código, utilizando TypeScript.

Se não conhecemos o TypeScript, ele é um superset de JavaScript, trazendo funcionalidades adicionais como tipagem e conceitos de orientação a objetos mais estruturados. O Angular não surgiu do nada; é uma evolução que já dura mais de 15 anos. Começou com o AngularJS, que resolvia problemas de two-way data binding, onde mudanças na view refletiam no model e vice-versa, utilizando a arquitetura MVC. No entanto, havia dificuldades de evolução, principalmente em termos de performance, o que levou ao surgimento do Angular 2, que perdura até hoje. Ele foi remodelado para usar TypeScript e passou a ser baseado em componentes, abandonando a arquitetura MVC em favor do MVVM, amplamente usado em outras tecnologias do Google.

Apresentando as novidades do Angular moderno

A partir da versão 4, surgiram mudanças como standalone components, que dispensam a necessidade de módulos. Vamos explorar isso no curso, entendendo como montar telas de forma mais flexível, como se fossem peças de Lego. O Angular moderno utiliza Signals para reatividade, substituindo o RxJS, tornando a reatividade mais declarativa. Vamos explorar Signals no curso. Recentemente, o Google adotou uma estratégia de lançar novas versões do Angular semestralmente. Atualmente, estamos na versão 21, mas há suporte para versões anteriores por um ano e meio, permitindo uma transição tranquila.

Concluindo com o projeto Deleite Bebidas

O que vamos construir juntos? Vamos entender os fundamentos do Angular, explorar templates, diretivas, data binding, componentes e a arquitetura, compreendendo o papel de cada pasta e arquivo. Também construiremos uma aplicação real chamada Deleite Bebidas. As tecnologias que veremos incluem Angular, TypeScript e CLI, e aprenderemos como instalá-las. Estou ansioso para mostrar como codificar isso no próximo vídeo.

Conhecendo o ecossistema Angular - Criando primeiro projeto

Introduzindo o uso do Angular CLI

Agora que entendemos como funciona o Angular, sua origem, seu futuro, todas as nuances dessa aplicação e qual problema ele resolve, vamos começar a utilizá-lo de fato. Anteriormente, comentamos que, se precisássemos configurar tudo manualmente, teríamos que lidar com Webpack, configurar diversas tecnologias e realizar o build manualmente do TypeScript, caso não tivéssemos um ferramental completo que o Angular nos fornece.

Para usar tudo isso de forma mais automatizada, utilizamos a ferramenta chamada Angular CLI, que significa Command Line Interface (Interface de Linha de Comando). Com ela, podemos executar comandos via terminal, CMD ou PowerShell, como estamos vendo aqui, e interagir com o Angular. O Angular encapsula todas essas configurações necessárias, permitindo a interação através de linhas de comando no terminal.

Instalando o Angular CLI

Vamos tentar instalar. Primeiro, verificamos a versão do Node com o comando:

node -v

Estamos na versão 22.13.1, e durante o curso usaremos essa versão. Recomendamos que, ao seguir este curso, utilize sempre essa versão ou versões mais recentes, que geralmente oferecem maior compatibilidade. Se não souber o que é Node ou NPM, consulte os cursos básicos para relembrar. Em geral, o Node é o motor de JavaScript que executa todos os nossos comandos. Nossa interação com o Angular ocorre sobre o Node.

Para uma instalação simples, escrevemos:

npm install -g @angular/cli

O -g indica que a instalação é global, permitindo o uso dos comandos do pacote em qualquer terminal, sem estar atrelado a um projeto específico. Isso instalará a versão mais recente do Angular CLI. Se precisar de versões mais antigas, por exemplo, ao entrar em um projeto com uma versão anterior do Angular, como a 17, é recomendado usar a mesma versão do CLI do projeto. Consulte a documentação do Angular para instruções sobre como instalar versões anteriores.

Verificando a instalação do Angular CLI

Se estiver lidando com um projeto mais antigo, use a versão do CLI correspondente à do projeto. Como vamos começar um projeto do zero, continuaremos na versão 21 e podemos instalar a versão mais recente. Após dar "Enter", aguardamos a instalação, que adiciona 298 pacotes em aproximadamente 12 segundos.

Para verificar se tudo está correto, usamos o comando:

ng version

O ng é o comando usado para inicializar comandos do Angular, como criar novos projetos, instalar serviços e componentes. No decorrer do curso, utilizaremos bastante esse comando. Após executar ng version, verificamos que estamos na versão 21.1.1 do Angular CLI, com o Node.js na versão 22.13, como já mencionado, e também a versão do npm.

Inicializando um novo projeto Angular

Instalamos o Angular CLI, e é através dele que executaremos todos os comandos. Vamos começar instalando e rodando nosso primeiro comando para inicializar um pacote.

Vamos inicializar um pacote do zero e o nosso projeto que será explorado ao longo do curso. Assim como vimos a versão, vamos inicializar com:

ng new deleite-bebidas

Após pressionar "Enter", o projeto será criado.

Configurando o projeto inicial

O sistema começará a fazer uma sequência de perguntas para que possamos entender, e ele também, como vamos construir essa aplicação. A primeira pergunta é sobre o stylesheet, ou seja, a versão de CSS ou o superset de CSS que será utilizado para modificar a aparência da aplicação. Temos o Tailwind, uma biblioteca famosa de gestão. Se desejarmos, podemos instalar o Tailwind por padrão no projeto. Embora não seja o foco do curso, ela auxilia na construção de telas e interfaces de forma eficiente, através de classes. Também podemos usar o Sass, que é o SCSS, embutido na aplicação, e o LESS, que também é um superset de CSS. Neste curso, utilizaremos o CSS padrão, pois compreender todas essas tecnologias exigiria um conteúdo à parte. Vamos optar pelo básico, que é o CSS, já abordado em outros momentos. Após pressionar "Enter", surge a pergunta sobre habilitar o server-side rendering e a geração estática de site.

O que isso significa? Se estivermos gerando uma aplicação que será carregada no servidor, daí o nome server-side rendering (renderização do lado do servidor), podemos optar por sim. No entanto, não é o nosso caso atual, pois nossa aplicação rodará diretamente no navegador do cliente. Por exemplo, se estivéssemos construindo um blog ou algo que o Google ou outro buscador devesse indexar, deveríamos usar server-side rendering. Neste caso, não utilizaremos essa opção, então colocaremos "N" de "no" (não) e pressionaremos "Enter".

Escolhendo ferramentas de desenvolvimento

Neste momento, o sistema pergunta se queremos usar ferramentas de IA para melhorar nosso fluxo. Como estamos aprendendo e não em um ambiente produtivo onde tudo precisa ser feito rapidamente, estamos entendendo passo a passo o que estamos construindo. Portanto, deixaremos sem nenhuma ferramenta de IA, selecionando "none". No entanto, há uma lista de ferramentas disponíveis, como Cloud, Cursor, Gemini, JetBrains AI, Copilot, entre outras, e podemos escolher a que melhor se adequar às nossas necessidades. No curso, não utilizaremos nenhuma, justamente para compreender em detalhes o que estamos fazendo.

Finalizando a configuração do projeto

A instalação dos pacotes começou, e muitos arquivos serão gerados. Vamos aguardar a conclusão para entender o que cada um deles faz. Pronto, a geração de todos os arquivos foi concluída, e o Angular CLI já criou todos os arquivos necessários. Todos os arquivos base foram gerados, e os pacotes foram instalados. Ao executar:

ls

Podemos ver todas as pastas dentro do projeto. Na quarta linha do terminal, vemos o nome da pasta deleite-bebidas. Vamos acessar essa pasta com:

cd deleite-bebidas

Depois, limpamos o terminal com:

cls

E usamos ls novamente para visualizar todos os arquivos:

ls

As nuances e detalhes de cada um desses arquivos e páginas serão comentados no próximo vídeo, quando abrirmos essa pasta no VSCode. Aguardamos vocês lá.

Sobre o curso Angular: desenvolva aplicações SPA com componentes e gerenciamento de estado

O curso Angular: desenvolva aplicações SPA com componentes e gerenciamento de estado possui 208 minutos de vídeos, em um total de 40 atividades. Gostou? Conheça nossos outros cursos de Angular em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Conhecendo o ecossistema Angular
• Entendendo componentes e estrutura
• Implementando templates e interatividade
• Introduzindo reatividade com Signals
• Utilizando serviços e injeção de dependência