Se dizer um desenvolvedor front-end e nunca ter ouvido falar de AngularJS é praticamente impossível nos dias de hoje. A framework desenvolvida pela Google e autodenominada pela mesma “Superheroic” dominou o mercado de ferramentas para desenvolvimento de aplicações web e se tornou referência ao ponto que qualquer ferramenta desenvolvida que não trabalhe junto com o AngularJS já começa perdendo.
<img fetchpriority="high" decoding="async" class="size-full wp-image-673 aligncenter" src="https://dtidigital.com.br/wp-content/uploads/2016/01/i-know.jpg" alt="i-know" width="960" height="406" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2016/01/i-know.jpg 960w, https://www.cms.dtidigital.com.br/wp-content/uploads/2016/01/i-know-300x127.jpg 300w, https://www.cms.dtidigital.com.br/wp-content/uploads/2016/01/i-know-768x325.jpg 768w" sizes="(max-width: 960px) 100vw, 960px" />
Mas afinal, o que é o AngularJS?
“Superheroic JavaScript MVW Framework” conforme uma pesquisa rápida pela Google, o AngularJS é uma framework desenvolvida na linguagem JavaScript que tem como objetivo principal extender o HTML para otimizar o desenvolvimento de aplicações web. Mas para que isso?
A linguagem de marcação HTML, como imagino que todos nós conhecemos, apenas tem capacidade com seus recursos nativos de fazer páginas estáticas. Para o desenvolvimento de sistemas web é necessário muito mais do que páginas HTML estáticas, e o AngularJS vem com o objetivo de fornecer os recursos necessários para o desenvolvimento desse tipo de sistema.
Funcionalidades do AngularJS
Extender o HTML é apenas a proposta inicial da framework, hoje ela é capaz de muito mais do que isso:
<ul style="text-align: justify;">
<li style="font-weight: 400;">Suporte de fábrica à padrões de arquitetura e organização como MVC e SPA;</li>
<li style="font-weight: 400;">Extensão do HTML, permitindo que sejam criados novos elementos e componentes;</li>
<li style="font-weight: 400;">Criação de templates, promovendo assim a reusabilidade e a modularização;</li>
<li style="font-weight: 400;">Organização da manipulação do DOM;</li>
<li style="font-weight: 400;">Desacoplamento do servidor;</li>
<li style="font-weight: 400;">Testabilidade, tanto em testes unitários quanto em testes de ponto a ponto;</li>
</ul>
Como se organiza um projeto na framework?
Por ser uma framework front-end que adota a arquitetura Model-View-Whatever (MVW ou MV*), iremos tratar apenas do modelo de arquitetura do front-end, considerando que é irrelevante o que está sendo feito no servidor. Note que isso nem sempre é verdade nesse tipo de ferramenta, como por exemplo o Razer da Microsoft ou as JSP do Java, não independem do back-end, muito pelo contrário, elas se acoplam ao back-end. Quem já teve que alterar a tecnologia de um back-end que possua o front-end acoplado a ele sabe bem o custo disso.
Voltando a arquitetura do AngularJS, uma imagem será toda a explicação necessária:
<img decoding="async" class=" wp-image-661 aligncenter" src="https://dtidigital.com.br/wp-content/uploads/2016/01/image04.png" alt="image04" width="799" height="448" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2016/01/image04.png 467w, https://www.cms.dtidigital.com.br/wp-content/uploads/2016/01/image04-300x168.png 300w" sizes="(max-width: 799px) 100vw, 799px" />
A interação com o usuário é feita por meio da camada View, que possui as tecnologias que estamos cansados de conhecer. A camada Model mantem a consistência entre o modelo de uma view e seu respectivo controller na camada Controller, mas pode ficar tranquilo que falaremos mais desta consistência mais a frente.
A camada Controller é responsável por todas as lógicas da aplicação e de toda a comunicação com o servidor. Sendo um pouco mais específico, uma camada de Services seria a real responsável pela comunicação com o servidor, mas para manter a simplicidade do modelo ela não foi adicionada. Dentro da camada View temos as directives (falaremos mais também sobre elas mais tarde), que são as responsáveis pela manipulação do DOM.
É muito importante saber onde as coisas devem ser feitas. Por uma questão de boas práticas a manipulação do DOM deve ser feita sempre que possível nas directives e a lógica da aplicação, assim como a comunicação com o back-end deve ser feita nos controllers ou nos services. Fugir desse padrão te deixa um passo mais próximo de um “código espaguete”.
Não entraremos em detalhes de cada estrutura do AngularJS, considerando que o objetivo dessa matéria é apresentar a framework e suas principais funcionalidades. Para mais detalhes do AngularJS e de todas as suas estruturas, você pode consultar o guia oficial (<a href="https://docs.angularjs.org/guide">https://docs.angularjs.org/guide</a>) da framework.
Principais funcionalidades da framework
Para um desenvolvedor web clássico algumas das funcionalidades do AngularJS podem parecer mágica, outras realmente são, vamos mostrar aqui as principais:
Two-Way Data Binding
Vamos definir One-Way Data Binding como a atribuição de um valor a um elemento do DOM (input, span, entre outros) de acordo com o valor de uma variável em JavaScript. Por padrão, o que é exibido para o usuário não será alterado caso a variável seja alterada, afinal, nenhuma ligação com a referência da variável é feita.
Já consegue imaginar o que é o Two-Way Data Binding? Utilizando o conceito de model do AngularJS, podemos definir um model para nossa view, que no final é um conjunto de variáveis JavaScript dentro do escopo de seu controller, e associar essas variáveis a elementos do DOM. Quando isso é feito, sempre que o valor dessa variável for atualizado, seja no controller ou seja na view por meio de ação do usuário (preencher um input, etc) a alteração irá refletir em todos os pontos onde a varíavel foi associada.
Nunca mais você vai ter que se preocupar em coletar as informações atualizadas da view nem de atualizar as informações dela com novas informações do servidor, uma simples atribuição em uma variável desencadeara todo esse processo. Sendo assim o model da página está sempre sincronizado com a view e com o controller. 
Mais uma imagem que dispensaria os últimos três parágrafos:
&nbsp;
<img decoding="async" class="wp-image-668 aligncenter" src="https://dtidigital.com.br/wp-content/uploads/2016/01/image05.png" alt="image05" width="1036" height="772" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2016/01/image05.png 1866w, https://www.cms.dtidigital.com.br/wp-content/uploads/2016/01/image05-300x224.png 300w, https://www.cms.dtidigital.com.br/wp-content/uploads/2016/01/image05-768x573.png 768w, https://www.cms.dtidigital.com.br/wp-content/uploads/2016/01/image05-1024x763.png 1024w" sizes="(max-width: 1036px) 100vw, 1036px" />
&nbsp;
Templates
Utilizando de atributos customizados da framework, é possível que sejam geradas templates em HTML, que serão compiladas em cima do escopo de um controller específico. Nesse processo é feita a ligação dos atributos do model com os elementos do DOM desejados, gerando assim a view que o usuário irá ver.
Também são disponibilizadas ferramentas para composição de HTML, a mais famosa por exemplo é o atributo ng-repeat, que deve ser adicionado em um elemento do DOM e deve receber como valor um array JavaScript presente no model. Quando a view for compilada ele irá iterar sobre o array e irá repetir o elemento onde o atributo foi adicionado para cada elemento do array, sendo possível acessar esse elemento naturalmente, ou seja, funciona da mesma forma que um clássico foreach, só que tudo utilizando apenas HTML! Perfeito para fazer tabelas, grids e listas de qualquer tipo.
Um pequeno exemplo:
<img loading="lazy" decoding="async" class="size-full wp-image-669 aligncenter" src="https://dtidigital.com.br/wp-content/uploads/2016/01/image03.png" alt="image03" width="568" height="170" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2016/01/image03.png 568w, https://www.cms.dtidigital.com.br/wp-content/uploads/2016/01/image03-300x90.png 300w" sizes="(max-width: 568px) 100vw, 568px" />
<img loading="lazy" decoding="async" class="size-full wp-image-670 aligncenter" src="https://dtidigital.com.br/wp-content/uploads/2016/01/image01.png" alt="image01" width="249" height="106" />
<img loading="lazy" decoding="async" class=" wp-image-671 aligncenter" src="https://dtidigital.com.br/wp-content/uploads/2016/01/image02.png" alt="image02" width="590" height="165" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2016/01/image02.png 640w, https://www.cms.dtidigital.com.br/wp-content/uploads/2016/01/image02-300x84.png 300w" sizes="(max-width: 590px) 100vw, 590px" />
Expressions
Reparou no {{ num }} no exemplo anterior? Essas chaves duplas são as expressions da framework. Em uma template, o que for colocado dentro das chaves duplas na hora de compilação será resolvido, sendo assim, é possível fazer operações matemáticas entre variáveis ou valores constantes, operações em cima de strings entre outras operações.
Lembrando que todas as variáveis utilizadas na template obrigatoriamente tem que pertencer ao model da view, uma variável declarada no controller que não for adicionada no escopo não poderá ser referenciada.
Directives
Considerada por muitos a maior revolução do AngularJS, as directives são a solução proposta para a extensão do HTML, por meio delas é possível criar componentes customizados e reutilizáveis.
Mas o que é uma directive? É uma extensão do HTML, podendo ser um novo elemento ou um atributo para os elementos que já existem. Ao compilar a template esse elemento será convertido de acordo com o que foi especificado em sua declaração.
É possível definir um escopo isolado para a directive, tornando-a independente do controller vigente, é possível enviar parâmetros para ela, inclusive parâmetros que se encaixam no Two-Way Data Binding. De dentro da função principal da directive é possível ter acesso fácil ao elemento HTML que a representa, ou em que ela foi atribuída, aos atributos desse elemento, ao escopo desse elemento, ao conteúdo interno desse elemento, sendo assim, por meio do JavaScript é possível moldá-lo para ser e funcionar de acordo com a necessidade do programador. 
Muito pode ser dito sobre as directives, o suficiente para escrever mais uns três posts nesse blog. As oportunidades contidas nessa ferramenta são infinitas.
Conclusão
Seria ignorância da minha parte achar que eu poderia demonstrar todas as funcionalidades da framework em um simples post. Uma pessoa que conhece bem dela com certeza está me criticando por eu não ter comentado sobre a ferramenta de rotas da framework, a capacidade de injeção de dependência, como funcionam os escopos da aplicação, entre muitas outras funcionalidades. Quem sabe em um outro dia?
Para finalizar, um gráfico demonstrando o crescimento do interesse na framework e, relação a suas concorrentes em meses dos anos de 2012, 2013 e 2014:
<img loading="lazy" decoding="async" class="size-full wp-image-672 aligncenter" src="https://dtidigital.com.br/wp-content/uploads/2016/01/image00-1.png" alt="image00" width="998" height="519" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2016/01/image00-1.png 998w, https://www.cms.dtidigital.com.br/wp-content/uploads/2016/01/image00-1-300x156.png 300w, https://www.cms.dtidigital.com.br/wp-content/uploads/2016/01/image00-1-768x399.png 768w" sizes="(max-width: 998px) 100vw, 998px" />
&nbsp;
<h5>Por: Tadeu Barbosa</h5>
<h5>Revisão: Dandara Chaves</h5>
&nbsp;
&nbsp;

Chegou o momento de impulsionar os resultados da sua empresa! Para entrar em contato com a gente, clique no botão abaixo e preencha o formulário.

AngularJS – Uma introdução

One-stop shop em tecnologia

Confira outros artigos