por Amanda Nalesso, Dev na Wavy 

Como a maioria das brilhantes criações, o Angular surgiu como um “acidente”. Em meados de 2009, Misko Hevery, então cientista da computação da Google, trabalhava para resolver uma dos enormes problemas que a companhia passava. Depois de quebrar muito a cabeça nosso expert conseguiu chegar a solução dos seus problemas, e no maior estilo da gigante da tecnologia, quis ir além:

“Olha só, acho que dá pra eu deixar isso um pouco mais genérico e liberar pra galera usar”

Baseado no modelo de arquitetura Model View Whatever (MVW), nasceu um framework JavaScript, inicialmente chamado de  AngularJS. Em sua segunda versão, lançada em 2016, um framework completamente novo foi disponibilizado, e adotando a linguagem TypeScript, criada pela Microsoft, o JS foi retirado de seu nome. Então, em versões superiores, é chamado apenas de Angular. Como citado neste vídeo, onde a Vanessa Tonini explica um pouco sobre essa diferença.

É o favorito de milhares de desenvolvedores ao redor do mundo, incluindo grandes empresas, onde possui elementos básicos que tornam a construção de aplicações utilizando HTML, CSS e JavaScript mais interessantes, simplificando seu desenvolvimento e facilitando a manutenção.

Antes de falarmos do Angular, vamos ver um pouco de TypeScript?

O TypeScript é uma linguagem que permite que você escreva seu código JavaScript na forma em que aprendeu naquela disciplina de introdução a orientação objeto, ou quando decidiu aprender Java.

SOS! Mas o que isso quer dizer?

Calma, eu vou explicar: com o TypeScript podemos programar orientado a objetos sem perder as vantagens do JavaScript. Ao compilar um código TypeScript é gerado um código JavaScript, e esse código é o que será executado no browser. Programar no paradigma orientado a objetos nunca foi tão legal!!! Quer testar um pouquinho? O TypeScript oferece um ambiente para colocar os conhecimentos em prática, dá uma olhada 🙂

Aqui você pode testar na prática como funciona.

Mas afinal, para que serve e como funciona o Angular?

Bem, o Angular otimiza o desenvolvimento das aplicações front-end de páginas web. 

O HTML permite a criação de páginas estáticas e, para uma aplicação web, é necessário mais do que isso. O Angular adapta e estende o HTML tradicional para uma melhor experiência com conteúdo dinâmico, com a ligação direta dos dados (two-way data-binding) que permite sincronização automática de models e views. Ele provê os recursos necessários para desenvolvimento de Single Page Applications (SPA), que consiste de uma única página web com o objetivo de fornecer uma experiência do usuário similar a de um aplicativo desktop, onde o código é carregado nesta única página de forma dinâmica, sem necessidade de recarregar a todo instante. Provê maior produtividade, e permite que o desenvolvedor quebre o código em partes, usando o novo paradigma de web components, separando suas responsabilidades.

Ele possui uma estrutura que organiza o código em partes, utilizando componentes, módulos e outras funcionalidades –  descritas a seguir – essa estrutura torna o ambiente de desenvolvimento mais organizado, e é chamado de Diagrama de uma aplicação Angular:

Componentes

O conceito de componentes é uma das bases atuais quando se trata de  framework para front-end. Quase tudo gira em torno deles, que são responsáveis por combinar e possibilitar a criação de códigos que podem ser reutilizados e testados sem problemas de colisões. Uma aplicação Angular é iniciada por um componente principal, o AppComponent, este, por sua vez, conecta uma hierarquia de outros componentes ao modelo de objeto de documento de página (DOM).

Um componente possui:

Imports:


<span class="crayon-o"><</span><span class="crayon-e">span </span><span class="crayon-v">style</span><span class="crayon-o">=</span><span class="crayon-s">"font-weight: 400;"</span><span class="crayon-o">></span><span class="crayon-e">import</span> <span class="crayon-sy">{</span> <span class="crayon-i">Component</span> <span class="crayon-sy">}</span> <span class="crayon-i">from</span> ‘<span class="crayon-sy">@</span><span class="crayon-v">angular</span><span class="crayon-o">/</span><span class="crayon-i">core</span>’<span class="crayon-sy">;</span><span class="crayon-sy">`</span><span class="crayon-sy">`</span><span class="crayon-sy">`</span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">span</span><span class="crayon-o">></span>

responsável por importar componentes e módulos que o angular provê.

Decorator:  


<span style=“font-weight: 400;”>@Component({ </span>
<span style=“font-weight: 400;”>selector: ‘app-root’, </span><span style=“font-weight: 400;”>
</span> <span style=“font-weight: 400;”>templateUrl: ‘./app.component.html’, </span><span style=“font-weight: 400;”>
</span> <span style=“font-weight: 400;”>styleUrls: [‘./app.component.scss’] </span><span style=“font-weight: 400;”>
</span><span style=“font-weight: 400;”>     })</span>


onde é possível definir propriedades de um componente.

E por fim a classe:

</span></div>
<div class="crayon-line"><span class="crayon-o"><</span><span class="crayon-e">span </span><span class="crayon-v">style</span><span class="crayon-o">=</span><span class="crayon-s">"font-weight: 400;"</span><span class="crayon-o">></span><span class="crayon-e">export</span> <span class="crayon-t">class</span> <span class="crayon-e">AppComponent</span> <span class="crayon-sy">{</span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">span</span><span class="crayon-o">></span></div>
<div id="crayon-5c62ca9c15190670997208-3" class="crayon-line"><span class="crayon-o"><</span><span class="crayon-e">span </span><span class="crayon-v">style</span><span class="crayon-o">=</span><span class="crayon-s">"font-weight: 400;"</span><span class="crayon-o">></span><span class="crayon-v">title</span> <span class="crayon-o">=</span> ‘<span class="crayon-i">app</span>’<span class="crayon-sy">;</span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">span</span><span class="crayon-o">></span></div>
<div id="crayon-5c62ca9c15190670997208-5" class="crayon-line"><span class="crayon-o"><</span><span class="crayon-e">span </span><span class="crayon-v">style</span><span class="crayon-o">=</span><span class="crayon-s">"font-weight: 400;"</span><span class="crayon-o">></span>     <span class="crayon-sy">}</span><span class="crayon-sy">}</span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">span</span><span class="crayon-o">></span></div>
<div>

para criar um novo component

Arquivos iniciais da estrutura Angular e do AppComponent (HTML, CSS, TS)

Módulos

Em Angular, um aplicativo é definido por um conjunto de módulos. Imagine que módulos são pequenas peças de lego, que você utiliza para formar ou construir coisas, no angular: agrupar, exportar e esconder componentes, diretivas, pipes e serviços relacionados. Isso serve para formar uma aplicação e são chamados de NgModules.Cada aplicação é composta por pelo menos uma classe NgModule que é o módulo root da aplicação.

O módulo root é chamado de AppModule e fica dentro do arquivo src/app/app.module.ts, como mostra a figura abaixo. Para definir um módulo, utiliza se o decorator de classe @ngModule, como mostra a imagem abaixo, o decorator utiliza um objeto de metadados com propriedades que definem esse módulo, algumas propriedades são:

 

  • Imports: que são arrays com outros módulos necessários para utilizar componentes declarados dentro de um módulo;
  • Declarations: recebe um array de componentes, diretivas e pipes que fazem parte do módulo;
  • Exports: define o conjunto de componentes e pipes, disponíveis para outros módulos;
  • Providers: declara os serviços, se um módulo for root, os serviços estarão disponíveis para toda a aplicação.

A imagem abaixo mostra na prática todas essas funcionalidades:

Aqui você encontra mais detalhes sobre Módulos Angular

Two-way data binding

Esta é uma das principais características do framework. Este termo também pode ser definido como associação de dados bidirecional, onde o dado entra através da view/template, sendo passado instantaneamente passado para uma propriedade da classe do componente (o que poderia aqui representar um modelo), e este dado já é exibido automaticamente em um elemento do DOM (Document Object Model) no template do componente.

Sua principal proposta é automatizar o tráfego de dados, de forma que a pessoa desenvolvedora não precise criar handlers para atualizar a view. Então, quando um valor de um componente mudar, o próprio framework, com a diretiva ngModel, será responsável por fazer esta atualização na página. A ligação de dados bidirecional combina a ligação de entrada e saída em uma única notação usando a diretiva ngModel.

Vamos colocar em prática?

As aplicações em Angular podem ser geradas através do Angular Command-Line Interface (CLI):

Para começar, vamos instalar!

Para utilizar o Angular CLI precisamos do NodeJS, o Angular precisa dele para funcionar, e uma vez instalado o Node, o NPM também é instalado. Para verificar a versão do Node instalada em sua máquina, basta rodar um dos seguintes comandos:

$ npm install -g @angular/cli

Ao instalar o Angular CLI, o comando ng, acrônimo para Angular, é habilitado, através dele é possível criar uma nova aplicação através do comando

$ ng new MilleniumFalcon

Através desse comando, uma pasta é criada contendo toda estrutura básica e configurações necessárias para o funcionamento de uma aplicação Angular, incluindo base para testes.

Digamos que você queira adicionar funcionalidades a aplicação, o comando generate provê tudo que é necessário para o desenvolvimento da aplicação, dentro dos padrões do Angular. Basta rodar o comando ng generate seguido pelo nome da funcionalidade que deseja acrescentar.

$ng generate

Com o generate, é possível gerar as seguintes funcionalidades:

Tá, mas como faço para usar o Angular?

Para trabalhar com Angular, basta um editor de texto, mas aqui utilizaremos  o Visual Studio code (VSCode). Essa é uma ferramenta criada pela Microsoft, gratuita, leve e que contém diversas funcionalidades, que torna o desenvolvimento mais produtivo. Ao abrir o projeto Angular criado anteriormente, veremos uma estrutura como esta:

Aqui você encontra mais detalhes sobre a da estrutura de um projeto Angular

Executando o projeto

Para executar o projeto, o Angular CLI disponibiliza um servidor HTTP, que torna possível a visualização da página e,  testes de forma simples e imediata.

Para executar  basta entrar na pasta do projeto e rodar o seguinte comando:

$ ng serve

Se o resultado for igual o da imagem, seu projeto já está pronto para ser acessado no navegador, e abrir o seguinte endereço: https:localhost:4200

Enquanto o comando estiver rodando, toda alteração feita no projeto, será automaticamente atualizada, sem a necessidade de carregar a página desde o início a cada alteração, mais um ponto para o Angular.

E tcharãaam!

Se os passos anteriores funcionaram, você verá uma página igual a essa! Se você chegou até aqui, deve estar se perguntando: Por que eu devo aprender Angular?

Eu posso tentar te convencer de que o Angular é uma ferramenta que vale a pena ser utilizada. Quando comecei a aprender Angular, uma das coisas que me chamou atenção, foi a praticidade no desenvolvimento e, organização dos arquivos dentro do projeto. Ele organiza o seu código em uma estrutura fácil de entender e manter, uma vez que ao criar um projeto em Angular, você tem disponível diversas funcionalidades já citadas nesse artigo que permitem modularidade, quebrando o código em pedaços.

Você pode optar por utilizar editores de texto e criar códigos de configuração extensos dentro da aplicação, mas, no Angular isso não é necessário, ou seja, economia de tempo!

Outra coisa que me chamou a atenção: atualização da página em tempo real. Eu sempre imaginei como seria interessante alterar algo no código e ver as alterações quase que instantaneamente. Bem, o Angular faz isso, com o comando ngserve rodando, todas as alterações que você faz no código são também atualizadas na página no exato momento, e existem módulos Lazy-Load, que ajudam a diminuir o tempo de inicialização da aplicação. Ótimo para grandes aplicações.

Uuuufa….

Muito difícil reunir todas as funcionalidades de um framework poderoso em um único post:, os recursos do Angular vão além dos tópicos apresentados aqui, deixei de fora tópicos como ferramenta de rotas, templates, diretivas, capacidade de injeção e dependência, entre outras coisas. O objetivo principal deste artigo foi mostrar o potencial desse framework venerável, e introduzir o assunto para aqueles que nunca tiveram contato com a ferramenta, e querem dar o próximo passo no desenvolvimento com Angular.

Para ajudar reuni aqui alguns links que podem ajudar você nessa jornada. Para saber mais:

Para saber mais sobre a arquitetura do Angular

Para explorar a interface de comando

Para visualizar e testar projetos angular

Para tirar todas as dúvidas sobre o Angular de uma forma fácil e rápida

Um pouco mais sobre a linha de comando (CLI) do Angular – e se você quiser saber

Um texto super legal com amis detalhes da arquitetura de componentes

https://edvins.io/deep-dive-into-the-angular-cli/

Se os conceitos ainda não ficaram muito claros