Primeiros passos no Angular

Diferente do React ou do Vue, a curva de aprendizagem do Angular é um pouco mais complexa, então, por que aprender Angular?

Angular é um framework de desenvolvimento de aplicativos baseado em Typescript, como o React ou Vue. Ele é usado para a criação de aplicativos web de alta performance e escaláveis, permitindo a criação de interfaces complexas e interativas.

Quais são as principais diferenças entre Angular, React e Vue?

Angular, React e Vue são os frameworks mais usados para o desenvolvimento de aplicações web, porém cada um deles possui suas próprias características:

• Angular é um framework completo, ou seja, oferece várias ferramentas e recursos para ajudar os desenvolvedores a criarem aplicativos web de forma rápida e eficiente. Ele utiliza TypeScript, uma linguagem que permite que o JavaScript tenha tipagem forte,  temos uma grande facilidade em reutilizar o código e, em fazer a sua manutenção. Além disso, o Angular possui um sistema de rotas nativo, o que permite a criação de aplicativos com várias páginas e navegação entre elas seguindo o conceito de Single Page Application.
  
• O React, diferentemente do Angular, é uma biblioteca de JavaScript voltada para a criação de interfaces de usuário. Ele se concentra em ser simples e eficiente, o que é útil para aplicativos com muitos dados e interações. Também é baseado em componentes como o Angular, mas não possui um sistema de rotas nativo, suporte para estado global, entre outras funcionalidades, o que significa que precisaremos utilizar diversas bibliotecas de terceiros, como a de navegação no aplicativo.
  
• Já o Vue, por fim, é um framework progressivo, ou seja, pode ser utilizado tanto para projetos pequenos quanto para objetos grandes. Ele possui características semelhantes a Angular e React, como base em componentes e sistema de rotas nativo, mas é considerado mais fácil para aprendizagem e utilização. Também suporta a utilização de JavaScript puro e HTML, o que pode ser uma vantagem para desenvolvedores que não possuem experiência com TypeScript, porém é recomendável usar o TypeScript. Sendo assim, Vue é um framework que  pode ser uma ótima opção.
  

Resumidamente, Angular é completo e oferece uma série de recursos para criação de nossas aplicações web. React é uma biblioteca voltada para a criação de interfaces de usuário eficientes e Vue é um framework progressivo fácil de aprender e utilizar, com características semelhantes a Angular e React.

Por que Angular é importante para o mercado de trabalho?

Angular é um dos frameworks mais populares e é muito utilizado para o desenvolvimento de aplicativos web. É comum vermos o Angular sendo usado em muitas empresas de tecnologia de ponta, como Google, IBM e Microsoft, além disso, é também uma habilidade muito procurada em diversas outras empresas.

Uma outra coisa interessante é que o Angular é uma das tecnologias mais bem pagas no mercado, o que o torna uma ótima opção para desenvolvedores que buscam crescer profissionalmente.

Como começar um projeto usando Angular?

Para começar um projeto em Angular precisamos inicialmente instalar o Node.js e o Angular CLI.

Abra o terminal e execute os seguinte comandos:

Comece instalando o Node.js:

sudo apt-get install nodejs

Verifique se a instalação foi bem sucedida:

node -v

Instale o Angular globalmente

npm install -g @angular/cli

Verifique se a instalação foi bem sucedida:

ng -v

Após realizara instalação do framework podemos criar o nosso projeto com um comando muito simples:

ng new my-new-project

Ao rodar esse comando responda Sim para as perguntas que irão aparecer no terminal e escolha o tipo de estilização que usará. No nosso caso, escolhemos o CSS para simplificar.

Entre na pasta criado pelo comando, dentro desse diretório terão alguns arquivos importantes:

O app-routing.module é um módulo específico para a configuração de rotas. Ele é responsável por trabalhar com a navegação entre as páginas ou componentes do aplicativo.

O app.module é o módulo raiz do aplicativo. Ele é responsável por carregar todos os outros módulos e componentes do aplicativo, basicamente é responsável por importar e exportar funcionalidades. Ele contém a declaração dos componentes, dos serviços e das diretivas utilizadas no projeto.

O app.component é o componente principal que contém todos os outros componentes. Ele é criado automaticamente quando você inicia um novo projeto Angular é o ponto de partida para a estrutura do aplicativo. É responsável por carregar o template HTML, o estilo CSS do aplicativo e por gerenciar as interações com os componentes filhos.

Já os outros arquivos são responsáveis pelo CSS, HTML e Testes automatizados.

Para exemplificar, faremos uma página de login com o Angular. De início crie um novo componente para a página de login com o seguinte comando no diretório do projeto:

ng generate component login-component

ng generate component dashboard


Rodando esse comando no seu terminal, será criado uma pasta chamada login-componente e a pasta chamada dashboard-component, essas pastas terão uma estrutura semelhante a do app.module que explicamos anteriormente.

Como trabalhar com rotas no Angular?

A primeira parte para iniciar a página de login seria adicionar as rotas que usaremos. Adicione a rota de login e a de dashboard ao app-routing.module.ts:

Substitua o conteúdo do app.component.html:

Em seguida importaremos um módulo de formulários do próprio Angular:

Após isso será feito um formulário simples de login no arquivo html do login-component:

Nesse html usamos algumas propriedades do Angular muito importantes, como o ngIf, o ngModel e o ngSubmit.

O ngIf é uma propriedade do Angular que permite exibir ou ocultar um elemento HTML baseado em condição. Ele é usado para mostrar ou esconder algum componente de acordo com uma lógica específica.

O ngModel é usado para vincular o valor de uma variável do formulário a uma propriedade do componente e atualizar a propriedade do componente quando o valor do input é alterado. Ele altera o estado do componente.

ngSubmit é um evento do Angular que é acionado quando um formulário é enviado. Ele é usado para chamar uma função no componente quando o formulário é enviado.

Por último podemos alterar o login-component.ts:

Esse componente é onde usamos o estado dele para armazenar dados por onde acessamos as funções no conteúdo html. Ou seja, é nele que faremos a parte dinâmica do nosso componente.

No exemplo acima criamos as propriedades de e-mail, password, incorrect e loading. Essas variáveis são usadas no nosso html para fazer a verificação da senha, identificar o carregamento da tela e avisar caso a senha esteja errada.

No mesmo componente também é usada a função router.navigate, que é responsável por alterar a rota que estamos acessando.

Com isso feito podemos rodar o nosso projeto:

ng serve

ou

npm start


Agora veja o seu app, estilize o CSS, faça testes automatizados e entre no mundo do Angular.

Conclusão

Resumidamente, o Angular é uma ótima escolha para seus próximos projetos devido a sua arquitetura baseada em componentes, recursos avançados, comunidade ativa e suporte de empresas de tecnologia de ponta. É também  uma escolha inteligente para qualquer desenvolvedor. Ele possibilita a criação de interfaces completas e interativas, possibilita a criação de aplicativos mais escaláveis e de fácil manutenção, além de oferecer várias ferramentas avançadas.

Existem várias razões pelas quais escolher o Angular para os próximos projetos.O Angular é bastante completo, necessitando de poucas bibliotecas de terceiros, além de ter a estruturação do projeto mais organizada, já que a criação de componentes pode ser realizada com um simples comando. Apesar de ser um pouco mais difícil que os outros frameworks é algo que vale a pena o estudo.

Vale lembrar que o Angular é usado por muitas empresas citadas anteriormente. É altamente procurado por diversas empresas, saber usar o framework pode chamar atenção de muitos empregadores. Portanto, recomendo considerar o uso do Angular em seus próximos aplicativos.

Sucesso!