Desde que fizemos este post em 2013, nossa equipe já trabalhou em diversos projetos em AngularJs. Se você deseja contratar uma empresa para um novo projeto ou para consultoria em um projeto existente, fala conosco! Envie um e-mail para contato@vizir.com.br.

O que é?

É um framework MVC(Model-View-Controller) JavaScript mantido pelo Google, que tem como objetivo simplificar o desenvolvimento de aplicações WEB.

Porque usar?

Certas aplicações tem como principal característica a alta complexidade e dinamismo de suas páginas HTML, fazendo com que parte da lógica seja empurrada para o Cliente(Javascript). Esses tipos de aplicação necessitam de uma maior organização do código no front-end e o AngularJS consegue realizar essa tarefa muito bem, permitindo que você quebre o seu código em partes, separando assim suas responsabilidades. Além de contar com Two-Way Data Binding e incentivar o uso de Dependency Injection.

Componentes:
Podemos dizer que o AngularJs é composto de:
-Módulos
-Diretivas
-Controllers
-Services
-Routes

Diretivas
As diretivas são elementos do framework que trazem ‘um novo poder’ ao HTML . Elas são definidas dentro do documento HTML e são utilizadas para que a manipulação do DOM seja feita de forma mais transparente e/ou para adicionar novos comportamentos às tags existentes.

Vamos ao nosso primeiro exemplo Angular utilizando algumas dessas diretivas:

Apesar de ser bastante simples esse código ja mostra um pouco o poder do AngularJS e de suas diretivas. Na 1ª linha utilizamos a ng-app, que inicializa a aplicação e define onde será o elemento root desta, na linha 3 importamos a lib AngularJS e na linha 6 usamos a diretiva ng-model para fazer com que o Angular faça o two-way data-binding entre o model nome e a view dentro da tag span, fazendo com que ela sempre represente o estado do model. O {{}} é onde o Angular define onde serão feitos os data-bindings.

Uma outra diretiva muito utilizada é o ng-repeat que itera sobre um Array e renderiza um template para cada elemento deste, vamos à um exemplo :

A diretiva ng-repeat recebe como parâmetro uma expressão de repetição que controla quantas vezes a tag onde ela esta definida será renderizada.

Veja que além da ng-repeat utilizamos também a diretiva ng-init que executa algumas tarefas antes do início da aplicação, no nosso caso ele inicializa o array de nomes bairroDoLimoeiro.

Utilizaremos ainda em nossos exemplos algumas outras diretivas, mas antes disso vamos proseguir com a nossa introdução e falar sobre uma parte também muito importante do AngularJs – os Controllers.

Controllers

Segundo a documentação oficial o Controller é o comportamento por trás do DOM e é também responsável por inicializar e/ou adicionar comportamentos ao objeto $scope, o qual permite a comunicação entre a View e o seu Controller. A diretiva ng-controller é utilizada para definir em qual parte do documento HTML ele será utilizado.

Vamos refazer o nosso código para utilizar um Controller:

Esse código faz exatamente a mesma coisa que o anterior com a única diferença de que o array bairroDoLimoeiro esta sendo definido agora no objeto $scope do SimpleController e como foi falado anteriormente o $scope faz a ligação entre a View e o Controller e isto possibilita que a nossa View conheça o array, mesmo ele não sendo declarado dentro dela.

É importante também notar que o $scope é injetado no Controller. Esta injeção acontece na hora em que ele esta sendo instanciado, neste momento o Angular injeta todas as suas dependências, incluindo o $scope.

Vamos fazer agora um novo método no Controller para adicionar novos nomes à lista:

A primeira coisa que devemos fazer é colocar a diretiva ng-controller no body, para que o AngularJS entenda que tudo dentro deste elemento é controlado pelo nosso Controller, utilizamos então a diretiva ng-click, que funciona de maneira semelhante ao onClick e adicionamos o método addName ao nosso Controller.

Note que temos acesso ao método addName na View e ao modelo name no Controller, tudo isso é possível graças ao objeto $scope e ao data-binding do Angular.

Importante!: No Angular o Model de uma View é considerado todos os atributos adicionados ao objeto $scope.

Módulos

São esses componentes que realizam a inicialização e encapsulam os controllers, diretivas, services e routes de uma aplicação AngularJS e são definidas pela diretiva ng-app.

Vamos criar um módulo simples para a nossa aplicação:

Para criar um novo módulo utilizamos a chamada ‘var module = angular.module(‘moduleName’, [])’, o primeiro parâmetro define o nome do módulo e o segundo é um array de dependências, no nosso caso nenhuma.

Para que o módulo conheça o nosso Controller precisamos avisa-lo sobre a existência deste e para isso utilizamos a chamada module.controller(‘ControllerName’, function($scope){…});

Com a adição do módulo à nossa aplicação exemplo, ainda não foi possível ver vantagem nenhuma, muito pelo contrário, o código ficou até um pouco maior, mas e se resolvêssemos retirar a lógica de adicionar novos nomes do Controller ou algum outro Controller precisasse utilizar a lista bairroDoLimoeiro. Como faríamos para que essa funcionalidade fosse compartilhada entre dois ou mais Controllers? Precisaríamos então utilizar um outro componente do Angular – os Services, e a utilização do módulo será necessário para isso.

Services

De acordo com a documentação oficial, Services são objetos Singletons que realizam tarefas específicas comuns em uma aplicação WEB.

Esses componentes podem ser utilizados para compartilhar informações entre controllers, servir como comunicação com o servidor e também como ser a camada que contém a lógica de negócio, deixando o Controller cuidar somente do fluxo da aplicação.

Vamos refatorar nosso código para fazer uso de uma Service:

Temos também que avisar o módulo sobre a existência de nossa Service com a função: module.factory(‘serviceName’, function(){});. Com isso o nosso Controller ficou muito mais limpo, deixando a lógica de adição de novos nomes definidos no nosso Service, vale lembrar que esse nosso Service poderia acessar uma API para a obtenção da lista e adição dos nomes em uma aplicação real.

Podemos ver também que o Controller não precisa conhecer as suas dependências, pois estas são injetadas diretamente nele.

Bom, a partir desses exemplos já é possivel notar algumas das vantagens que o Angular nos traz para desenvolvimento de aplicações muito dinâmicas. Com o two-way data-binding e diretivas ele elimina quase por completo a necessidade de ficarmos manipulando DOM utilizando jQuery e ele nos ‘força’ à utilizar a Injeção de Dependência, que facilita a testabilidade e traz uma maior modularização para o código.

Muita coisa ficou de fora nessa introdução ao Angular como o uso de Routes, o uso de filtros, a criação de diretivas e falar sobre os tipos de services existentes, mas já foi possível ter uma idéia do poder desse framework e seus benefícios.