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.
Ao ter o primeiro contato com Angular há um grande fluxo de novas informações para assimilar e entender. Qualquer abstração de código leva a uma nova camada de um código que, mesmo mais simples, é desconhecido.
Por isso, é importante ter atenção, paciência e percepção ao começar os estudos de bibliotecas desse tipo. Nesse artigo, vamos abordar pontos importantes para facilitar o aprendizado.
História e versões
A história do Angular começa com a primeira versão em 2009. Desenvolvido dentro da Google, o framework era baseado em JavaScript e seguia a filosofia de programação declarativa, estendendo o HTML para facilitar a criação de interfaces com conteúdo dinâmico.Entretanto, com o crescimento da web e o uso da biblioteca, ficaram claros defeitos que exigiam muitos ajustes no código. Assim, uma nova versão foi lançada em 2016, uma reescrita focada em TypeScript, programação reativa e vários outros conceitos e melhorias. Inicialmente, a nova versão foi chamada de Angular 2.
Por ser uma reescrita do zero, decidiu-se por separar ambos. Assim, o que era chamado de Angular 2 é um framework, e a antiga versão é outro. Porém, Angular 2 é um nome ligado à versão 2.0, o que geraria confusão entre as pessoas com novas atualizações.
O que então era Angular 2, hoje é apenas Angular e a versão antiga chama-se AngularJS. Dessa forma, o novo framework poderia crescer e receber novas atualizações sem gerar confusão.
Após a versão 2, houve a atualização para a versão 4, pulando a versão 3. Isso ocorreu para evitar mais confusão já que o pacote do roteador havia sido distribuído com a versão 3.
Desde então, o Angular cresceu muito e atualizações com melhorias são lançadas frequentemente com suporte da Google, que o utiliza em grande parte de seus projetos. Em maio de 2021, o framework se encontrava na versão 12.0.
Entre as versões 2 e 12 não houve mudanças drásticas, e por isso, o aprendizado não se perde. As atualizações são focadas em melhorias pontuais e incrementais, que não diferem significativamente na experiência de aprendizado e desenvolvimento.
O que é o Angular?
Quando falamos de Angular, geralmente estamos falando do framework, mas nem sempre é assim. Angular é um ecossistema completo, uma plataforma de desenvolvimento que inclui o framework e bibliotecas próprias, tendo em mente as necessidades comuns do desenvolvimento de interfaces e ferramentas para testar, atualizar e fazer o build do projeto.
Como framework, Angular é baseado em componentes, que são trechos de código reutilizáveis escritos em HTML, TypeScript e CSS. Geralmente representam um elemento da interface. Podem ser testados, usando frameworks como Jest e Jasmine, sendo o último o padrão em projetos Angular gerados pela CLI.
O HTML possui propriedades especiais como diretivas e interpolação que permitem construir conteúdo dinâmico, usando comportamentos e valores definidos na classe do componente escrita em TypeScript.Dessa forma, a biblioteca é popular por ser muito conectada a conceitos como separação de responsabilidades, padrões de projetos e arquitetura modular.
A hierarquia desses componentes também é muito importante. Esses artefatos podem ser compostos por vários outros, e dessa forma, podem se comunicar, sendo essa comunicação com o componente acima ou abaixo.
Angular é uma plataforma completa para desenvolvimento de interfaces, focada no desenvolvimento de aplicações escaláveis, e com pilares na Orientação a Objetos e padrões MVC. Além disso, as possibilidades não estão limitadas à web, com soluções para desenvolvimento de aplicativos móveis e desktop.
Pré-requisitos e leitura do código
Os requisitos são: HTML, CSS e JavaScript. A biblioteca não utiliza JavaScript puro e sim TypeScript, uma versão do JavaScript com funcionalidades adicionais como tipagem. Também é interessante conhecer Orientação a Objetos que é muito utilizada durante o desenvolvimento.
Ainda que você não tenha uma base sólida em todos os requisitos, os projetos são bem estruturados o que facilita o desenvolvimento, porque a clara definição e replicação das estruturas permite que muito código possa ser gerado por outras ferramentas (como a CLI e extensões para editores de código).
Por outro lado, como o Angular é muito verboso e bem automatizado, a leitura de código se torna importante. Entender o que o framework fez, o que compõe um artefato e perceber padrões como injeção de dependências são pontos importantes para o aprendizado.
Um componente, por exemplo, não passa de uma classe escrita em TypeScript, mas, como o Angular possui muitas ferramentas prontas para transformar essa classe em um componente, alguns trechos de código ao redor dela podem fazer uma pessoa iniciante acreditar que não faz a menor ideia do que está acontecendo ali.
Outro ponto importante: utiliza-se muitas classes de pacotes Angular. Como dito anteriormente, o framework é parte de uma plataforma de desenvolvimento que conta com várias bibliotecas. É essencial entender que a plataforma possui vários pacotes para várias tarefas diferentes, como rotas e formulários.
Estruturas e padrões
O mais simples componente possível em uma aplicação Angular ainda carrega um bom código em TypeScript. Como esse código é padronizado, nem sempre entendemos o que realmente faz ou como funciona. Até por isso, criar componentes geralmente pode seguir dois caminhos: escrever do zero seguindo a estrutura do primeiro componente criado ou usar a Angular CLI (que também será comentada neste artigo). Nenhum dos dois métodos é um problema, faz parte.
Mas procure sempre observar o código que foi criado para você e, ao invés de entender tudo, procure pontos que sejam familiares: palavras-chave, nomes, operações. Isso ajuda a desmistificar aquele código. No fim, o Angular pode usar várias classes próprias via herança, tipos próprios, mas nunca fará algo completamente distante e indecifrável, por mais que sejam muitas camadas de lógica internas.
De toda forma, quando falamos de estruturas de artefatos aqui, estamos inevitavelmente falando de TypeScript, o que não significa que você deve conhecer tudo de TypeScript, muito pelo contrário. No início, procure se atentar às seguintes funcionalidades:
- Classes, interfaces e herança (
extendseimplements); - Métodos, atributos e construtores;
- Decorators;
- Sintaxe de declaração de tipos;
- Injeção de dependência.
Você verá essas estruturas por todo o código, e entendendo-as, pode se sentir mais confortável e confiante. Um exemplo simples é o próprio componente, que contém os padrões citados:
import { Component, OnInit } from ‘@angular/core’;
@Component({ // Decorator
selector: ‘botao’
templateUrl: ‘./botao.component.html’,
styleUrls: [‘./botao.component.css’],
})
export class BotaoComponent implements ngOnInit {
constructor(private exemploService: ExemploService) { // injeção de dependência
}
ngOnInit { // método
}Relacionado a isso, a documentação do Angular pode ajudar muito. Como a maioria dos dados que são manipulados, e métodos que são utilizados, implementam alguma interface ou classe, é muito proveitoso verificar a documentação e entender quais são os formatos, entradas e saídas desses artefatos.
Principais padrões
Itens importantes de se ter em mente no início são:
- Components – Seção na documentação oficial
- Templates – Seção na documentação oficial
- Diretivas Embutidas – Seção na documentação oficial
- Injeção de Dependências – Seção na documentação oficial
Os quatro itens acima são muito comuns de se usar, porque todos estão relacionados à criação de componentes.Components e Templates, juntos, geram componentes funcionais e visualizáveis. Enquanto Diretivas e Injeção de Dependências permitem operações mais sofisticadas. Simplificando ao máximo, Injeção de Dependências é um nome refinado para o método de receber como parâmetro objetos/funções que um código depende, ao invés de criar essas dependências diretamente dentro do escopo do código. Lógico que esse processo exige algumas configurações e cuidados, mas o comportamento é esse. Injeção de Dependências, inclusive, é um conceito usado por toda a programação, no frontend e no backend, e começar a usá-la pelo Angular é uma ótima forma de aprender, porque não exige nenhuma configuração.
Diretivas parecem atributos HTML. São colocadas no template, e acessam o elemento/componente para operar algum tipo de lógica. Elas dão flexibilidade ao código, permitindo que o template se torne dinâmico.
Diretivas podem ser criadas, mas os pacotes Angular possuem várias para que ações comuns possam ser feitas com menos código. O pacote ‘@angular/common’ é o mais comum e permite usar condicionais e laços no template, como abaixo.
<ul *ngIf=”usuarioLogado”>
<li *ngFor=”let transacao of extrato”>{{ transacao.valor }}</li>
</ul>Acima, se a variável `usuarioLogado` for verdadeira, a lista será mostrada e para cada item de `extrato` teremos uma `li`, usando o laço `for` com o `ngFor`.Ferramentas: Angular CLI e DevTools
As ferramentas oferecidas pelo Angular são soluções que melhoram a experiência de desenvolvimento. Aqui, temos duas ferramentas muito úteis para começar a usar o quanto antes: CLI e DevTools.
Angular CLI
A CLI é uma ferramenta que pode ser instalada na sua máquina para trabalhar em aplicações Angular com mais praticidade. Criar projetos, criar artefatos e outras ações rotineiras são facilitadas pela CLI. Outro ponto importante para qualquer iniciante é entender que a CLI é uma aplicação que roda no terminal, oferece comandos para que você use no seu projeto, mas não é parte do framework, apenas outra solução que faz parte do ecossistema da plataforma.
Se quiser saber mais sobre a Angular CLI, pode visitar a documentação: Angular CLI.
Angular DevTools
Uma das coisas mais difíceis no desenvolvimento com frameworks é entender comportamentos inesperados. Um dado não aparece no componente que deveria, ou uma ação não é executada quando se espera. Como toda essa lógica é implementada várias camadas acima do HTML e JavaScript puro, não é tão simples procurar o problema. Mas o DevTools resolve isso. Essa ferramenta é uma extensão para seu navegador baseado em Chromium (Google Chrome, Microsoft Edge, Brave, Vivaldi, entre outros) que detecta websites que utilizam Angular e oferece algumas ferramentas de análise.
- Baixe o Angular DevTools na Chrome Web Store
- Leia a documentação oficial da ferramenta
- Para acessar a DevTools, após a instalação, é necessário abrir as Ferramentas do Desenvolvedor (CTRL + Shift + I, por padrão) e procurar pelas aba Angular.
A funcionalidade mais interessante em um primeiro momento é a aba Components. Nela, é possível verificar toda a árvore de componentes renderizados no momento, e em cada componente ver suas propriedades, dados provenientes do componente-pai, eventos, etc.
Assim fica fácil verificar qual é o atual estado de um componente, qual o valor daquela propriedade naquele momento sem precisar de vários console.log().
Programação reativa, RxJS e Observables
O Angular utiliza muito o padrão Observable para trabalhar com dados assíncronos. É um tópico relativamente mais avançado, e não é obrigação de nenhum iniciante entender o que está acontecendo a fundo.
Assim, tenha muita atenção e tente sempre entender separadamente o que é Angular e o que é RxJS.
Conclusão
Vimos alguns pontos que compõem a plataforma Angular, de pré-requisitos a ferramentas complementares, mas como planejar seus estudos?
É interessante ler a documentação de forma linear, seguindo tutoriais, definições e explicações de conceitos. Vale ressaltar que a documentação está em inglês, mas navegadores atuais permitem tradução das páginas, o que pode ajudar.
E lembre-se, Angular e seus pré-requisitos são conteúdos extensos, paciência faz parte do processo, como também aceitar que não precisa aprender tudo de uma vez só. Experimente e desfrute do aprendizado, e não tenha medo de aprender tentando.
