ESTUDO E DESENVOLVIMENTO DE CASO DE USO COM FRAMEWORK

ANGULARJS
Rafael de Castro Zorzo1
lder F. F. Bernardi2

RESUMO

A evoluo das tcnicas de desenvolvimento de aplicaes Web permite aos desenvolvedores

melhorar constantemente suas aplicaes e sistemas e fornecer melhor experincia ao usurio
final. O AngularJS um framework que fornece funes e uma arquitetura que atende
praticamente todas as necessidades no ambiente de programao para a Internet e por isso est
sendo aplicado frequentemente pelas empresas. Este artigo apresenta um estudo do
framework em sua parte conceitual e posteriormente apresenta resultados obtidos atravs do
desenvolvimento de um caso de uso que permite a avaliao do Angular. O prottipo
desenvolvido para avaliao da ferramenta determinou diversos fatores que demonstram a
qualidade e os resultados obtidos com a implementao do AngularJS em sistemas Web. O
resultado final da avaliao apresentou o retorno esperado, pois a ferramenta trouxe efeitos
positivos em todos os pontos avaliados dentro do contexto deste trabalho.

Palavras-chave: Aplicao. Sistema. Desenvolvimento. Abstrao. Facilidade.

INTRODUO

O desenvolvimento de aplicaes Web aprimorado constantemente em todos os

aspectos, desde a arquitetura e as metodologias empregadas at as linguagens de programao
que o compe. A arquitetura de uma aplicao Web est deixando de ser composta por
grandes quantidades de cdigos server-side, onde todo o processamento feito no servidor, os
cdigos so fechados e o consumo de banda maior aos proprietrios do sistema, e passando
a ter maior utilizao de cdigos client-side, onde o processamento dos scripts da pgina
ocorre na mquina do cliente e somente quando h necessidade de interao com o banco de
dados so feitas requisies ao servidor.
De forma a facilitar essa transio de cdigos server-side para client-side, foi
desenvolvido pela Google o framework AngularJS, cujo objetivo trazer ao lado cliente as
ferramentas e funcionalidades que so tradicionalmente implementadas em nvel servidor,
sem que haja risco sensibilidade dos dados trafegados. Como consequncia desse modo de

1
Rafael de Castro Zorzo, formando no curso de Tecnologia em Sistemas para Internet pelo Instituto Federal de
Educao, Cincia e Tecnologia Sul-rio-grandense, cmpus Passo Fundo (IFSul - Passo Fundo - RS). E-mail:
rafael@rafaelzorzo.com.br
2
Orientador, professor do IFSul. E-mail: elder.bernardi@passofundo.ifsul.edu.br
 2

desenvolvimento, pginas mais rpidas, intuitivas e interativas melhoram a experincia do

usurio na utilizao do sistema. Ainda, o AngularJS proporciona aos desenvolvedores uma
arquitetura facilmente escalvel, reutilizvel, testvel e de fcil manuteno, aumentando a
produtividade e a facilidade na depurao do sistema. Este aborda o uso de Single Page
Application (SPA), tcnica j difundida e aplicada na produo de sistemas para Internet.
(ANGULARJS)
O objetivo deste artigo demonstrar o que e como o AngularJS pode ser usado no
auxlio ao desenvolvimento de novos sistemas que pretendem atender a essa evoluo na
forma de criao das aplicaes, bem como sua capacidade de aumentar a produtividade dos
desenvolvedores, reduzir a utilizao de recursos dos servidores, promover o
desenvolvimento gil e a produzir melhor experincia ao usurio final.
Para isto, ser realizado um estudo da organizao dos componentes que compe a
arquitetura do framework e ser desenvolvido um prottipo baseado em um caso de uso para
por em prtica os conceitos levantados, sendo analisados ao final os resultados obtidos
durante o desenvolvimento. De forma mais especfica, os principais pontos abordados sero a
organizao da aplicao baseada no framework, a utilizao de templates3 e abstraes nas
requisies AJAX, o uso do Data Binding, a utilizao do desenvolvimento em pgina nica
(SPA), os filtros built-in e personalizados e a experincia de desenvolvimento com o
framework.

1 REFERENCIAL TERICO

Este referencial apresenta os conceitos estudados que so necessrios para o

entendimento deste artigo. Na seo 1.1, sero abordados os modelos bsicos de
desenvolvimento Web utilizadas atualmente. Na seo 1.2, sero descritos os conceitos que
esto diretamente ligados ao Framework AngularJS, objeto de estudo do trabalho.

1.1 Aplicaes e desenvolvimento Web

Segundo Nations (s. d.), Uma aplicao Web qualquer aplicao que utiliza o
navegador como cliente, seja uma aplicao simples como um quadro de mensagens ou um
complexo processador de palavras. As aplicaes Web atuais se utilizam de ferramentas

3
Templates so trechos de cdigo HTML separados do arquivo principal, com a finalidade de organizar a
aplicao.
 3

padro de desenvolvimento, como a HyperText Markup Language (HTML) (ROBBINS,

2013, p.1), Cascading Style Sheet, (CSS) (OLSSON, p. XIX) e geralmente usam combinaes
de scripts server-side (como PHP e JSP) e client-side (como JavaScript), juntamente a uma
tecnologia de banco de dados, como MySQL. (WELLING e THOMSON, 2009, p. 3)
O desenvolvimento Web a programao que permite a funcionalidade dos websites,
conforme necessidade do proprietrio. Normalmente, trabalha diretamente com a parte de
codificao e marcao, no adentrando a parte de projeto do sistema. (JANSSEN, s. d.)
A arquitetura de desenvolvimento para este ambiente mostra-se principalmente em
dois amplos e distintos tipos: tradicional e moderno, que sero conceituados a seguir.

1.1.1 Modelo de desenvolvimento web tradicional

As pginas se tornaram dinmicas graas aos webservers4 e s linguagens server-side,

que recebem as requisies e enviam o contedo requisitado junto a resposta para o cliente.
(FINK; FLATOW, 2014, p. 3)
O ciclo de vida destas aplicaes est disposto na Figura 1:

Figura 1: Ciclo de vida das aplicaes web tradicionais

Fonte: FINK; FLATOW, 2014

Quando o usurio abre a pgina, este faz uma requisio HTTP ao servidor (1), o qual
a responde com pginas HTML (2). Atravs da submisso de um formulrio ou link para
outra pgina, o usurio submete uma nova requisio HTTP ao servidor (3), e este retorna um
novo HTML, sendo necessria a recarga completa da pgina (4). Isso ocorre a toda interao

4
Webservers so computadores que provm arquivos conforme requisies recebidas. Basicamente, recebem
uma solicitao, decodificam essa solicitao e verificam qual arquivo est sendo solicitado. Caso esse arquivo
esteja disponvel, ele ento entregue em resposta solicitao. Exemplos de webserver: Apache e NodeJS.
 4

do usurio que faz uma chamada HTTP ao servidor, pois nesse tipo de aplicao, a maior
parte do desenvolvimento controlada pelo servidor. (FINK; FLATOW, 2014, p.7 e 8)
Esta abordagem de desenvolvimento gera um overhead 5desnecessrio de cabealhos e
requisies ao servidor, pois a cada reload 6realizado na pgina, todos os arquivos HTML,
CSS e JavaScript so baixados novamente, tornando a exibio do contedo mais lenta e
levando necessidade de um novo modelo de desenvolvimento, que aqui chamado de
modelo de desenvolvimento web moderno e ser abordado na prxima seo.

1.1.2 Modelo de desenvolvimento web moderno

Em contrapartida ao estilo de desenvolvimento tradicional, o modelo de

desenvolvimento moderno busca trabalhar de forma assncrona, sem bloqueio de uso do
sistema durante as requisies, onde a manipulao do documento realizada em linguagens
client-side nativas e amplamente suportadas (como JavaScript) que no necessitam de
instalao de plug-ins e so multiplataforma (no sentido de precisar de somente um navegador
que interprete as linguagens client-side em qualquer tipo de dispositivo). Esse modelo
composto pela utilizao de HTML ou HTML5 e Asynchronous JavaScript and XML
(AJAX)(W3SCHOOLS), trabalhando de forma independente da linguagem server-side, sendo
delegada a esta somente receber requisies geradas pelas chamadas AJAX e responder em
formato JavaScript Object Notation. (JSON)
Este modelo de desenvolvimento se tornou possvel do ponto de vista de
implementao quando o AJAX emergiu como um padro de criao de aplicaes Web e sua
capacidade foi vista por grandes empresas como a Google, abrindo portas para a evoluo da
linguagem JavaScript. A habilidade do AJAX em fazer requisies assncronas sem bloquear
a interface do usurio e atualizar somente uma seo da pgina sem precisar recarreg-la
revolucionou a experincia do usurio. Posteriormente, as bibliotecas JavaScript de
manipulao do HTML como jQuery (JQUERY) trouxeram abstraes s chamadas AJAX,
trazendo cada vez mais programadores a esse novo mundo das pginas Web. (FINK;
FLATOW, 2014, p.4 e 5). A insero do padro HTML5 tambm contribuiu para o
melhoramento e evoluo do JavaScript. (FINK; FLATOW, 2014, p.5)

5
Overhead o termo utilizado para descrever o custo excessivo na realizao de uma atividade. Na situao
apresentada no trabalho, significa o excesso de envio de requisies ao servidor web.
6
Reload o termo utilizado para designar a recarga completa de uma pgina.
 5

Nesse ambiente, as Single Page Applications (SPA) ganharam espao. A SPA uma
tcnica Web que utiliza uma nica pgina HTML como base para todas as pginas da
aplicao nas quais as interaes do usurio final so implementadas. (FINK; FLATOW,
2014, p. 3). Seu ciclo de vida est ilustrado na Figura 2:
Figura 2: Ciclo de vida da SPA

Fonte: FINK; FLATOW, 2014

Nas aplicaes de pgina nica, uma requisio inicial HTTP de abertura da pgina
enviada ao servidor (1), que retorna um documento HTML (2). Este HTML inicial, que nunca
recarregado ou reposto, exibido no navegador e as interaes do usurio so guiadas por
requisies AJAX. (FREEMAN, 2014, p. 46)
Ao invs de recarregar a pgina a cada nova requisio, so feitas requisies AJAX
ao servidor para solicitar os dados necessrios (3), os quais so retornados em JSON ou partes
de HTML pr-renderizadas, que sero atualizadas no Document Object Model (DOM) e
mostradas ao usurio final (4). Outro diferencial das aplicaes de pgina nica que a
transio de pginas realizada no lado cliente da aplicao. (FINK; FLATOW, 2014, p.12)
Portanto, este modelo se difere do tradicional em relao ao overhead de requisies,
tornando a aplicao mais leve e permite melhor usabilidade para o usurio final, devido ao
AJAX no bloquear a manipulao da pgina durante sua execuo. A grande maioria das
SPAs desenvolvida no lado do cliente, em oposio s aplicaes tradicionais que
interagem com o lado servidor e demandam recargas constantes de pginas inteiras. (FINK;
FLATOW, 2014, p. 3)
Dentro deste contexto de desenvolvimento moderno, o AngularJS tem chamado a
ateno por sua leveza e pela facilidade com a qual trabalha os conceitos e os paradigmas do
modelo moderno. A prxima seo exibir os conceitos bsicos do framework, comentando
inicialmente o que ele e posteriormente suas dependncias e sua arquitetura.
 6

1.2 AngularJS

O AngularJS um framework estrutural para desenvolvimento de aplicativos Web

dinmicos. Ele permite a utilizao do HTML como um template, possibilitando que a sintaxe
HTML seja estendida para representar de forma mais clara e sucinta os componentes da
aplicao. O AngularJS um arquivo JavaScript, no necessitando procedimentos de
instalao. (ANGULARJS)
A construo do AngularJS enfatiza pontos importantes do desenvolvimento. So eles:
Expanso: facilidade no entendimento de complexos aplicativos desenvolvidos, uma
vez que se entenda o bsico do Angular. Isso permite que a aplicao cresa e seja
incrementada conforme a necessidade do usurio;
Manuteno: a modularizao da aplicao facilita o debug do sistema, simplificando
a manuteno em longa data;
Testes: capacidade de encontrar falhas e corrigir estas falhas de maneira simples e
rpida antes da implantao ao usurio. (FREEMAN, 2014, p. 3)
O objetivo do AngularJS trazer grande parte das ferramentas e capacidades que so
codificadas no lado servidor para o lado cliente. Com isso, pretende-se facilitar o
desenvolvimento, os testes e a manuteno dos sistemas. O Angular permite tambm a
extenso do HTML expressando as funcionalidades atravs de elementos personalizados,
atributos, classes e comentrios. (FREEMAN, 2014, p. 45)
O framework faz uso dos conceitos de Data Binding e de injeo de dependncia, que
so importantes para o entendimento da ferramenta. O Data Binding uma tcnica que se
constitui em modificar algo no modelo (dados dos objetos) da aplicao e refletir no DOM as
novas informaes ou vice-versa. Bibliotecas como jQuery proveem maneiras de modificar
parte do DOM separadamente, sem a necessidade de recarregar a pgina completamente.
Neste caso, so adicionados somente dados no template, que so atualizados com a ajuda da
funo innerHtml. A execuo desta funo alcana o objetivo principal que a atualizao
do template de maneira assncrona, sem necessidade de novo carregamento da pgina, porm
demanda cuidados no triviais para o controle tanto dos dados no HTML quanto dos dados
nos objetos JavaScript. Com o uso do AngularJS, esse trabalho de verificao geralmente
automtico, e a preocupao com essa vinculao reduzida, alm de que ele implementa um
tipo de data binding chamado two-way data binding, que consiste em modificar o DOM e
refletir nos objetos do modelo ou modificar o modelo e espelhar a modificao no DOM.
(GREEN; SESHADRI, 2013, p. 4). J a injeo de dependncia um conjunto de princpios e
 7

padres de software que permite o desenvolvimento de aplicaes menos acopladas atravs da

incluso de bibliotecas/dependncias a um mdulo quando este for necessrio. Segundo
Jeremy (2013, p. 2), Injeo de dependncia tudo relacionado criao de cdigos pouco
acoplados.
Aps apresentadas as tcnicas essenciais ao entendimento dos conceitos usados pelo
AngularJS, a prxima seo descrever a arquitetura do framework, juntamente com os a
descrio dos componentes que constituem o framework.

1.2.1 Arquitetura do AngularJS

A arquitetura do AngularJS consiste na criao de mdulos de sistema que podem

trabalhar de forma separada ou conjunta. O Angular trabalha de forma a solicitar informaes
do lado servidor somente quando necessrio, sendo todas as outras atividades da aplicao
controladas por ele na camada de viso. (MARCO)
A organizao das aplicaes criadas com o AngularJS geralmente apresenta a
estrutura ilustrada na Figura 3:

Figura 3: Organizao de uma aplicao AngularJS

Fonte: MARCO, 2013.

A ideia principal que cada mdulo possa conter suas prprias configuraes, rotas e
sua prpria lista de dependncias. Quando o usurio acessa uma determinada URL dentro do
sistema, a rota controlada pelo mdulo carrega na tela o template e o controlador JavaScript
 8

responsvel pelo template. Feito isso, o usurio passa a manipular o template gerando troca de
informaes e requisies ao servidor. Esse fluxo de dados representado na Figura 4:
Figura 4: Fluxo de dados em aplicao AngularJS

Fonte: STROPEK, 2013.

Na Figura 4, o usurio interage com a view, que est vinculada ao controlador atravs
de diretivas do AngularJS dentro do template carregado no momento do roteamento. Quando
as interaes do usurio resultam em chamadas ao servidor (como salvar dados de um
formulrio), essa ao tratada pelo controller, que utiliza algum service do AngularJS (como
o $http) para abstrair a interao com o server, que retorna os dados conforme a funo
chamada. Estes dados retornados em formato JSON so espelhados no model, que
posteriormente so refletidos na view atravs da tcnica de two-way data binding fornecida
pelo Angular. (STROPEK, 2013)
As subsees seguintes conceituam os componentes que possibilitam a organizao da
aplicao em mdulos e o fluxo de dados descrito atravs da Figura 4.

1.2.1.1 Mdulos

Os mdulos so basicamente containers para as demais partes do aplicativo (como

controladores, servios, filtros, diretivas, entre outros). Eles so fragmentos da aplicao, que
se interligam com os demais mdulos para formar o sistema. O objetivo da modularizao
ter o menor acoplamento possvel da aplicao, podendo estes serem utilizados em outros
sistemas, caracterizando o reaproveitamento de cdigo. (ANGULARJS)
 9

1.2.1.2 Controladores

Os controladores so funes JavaScript usadas para ampliar o escopo do AngularJS.

Eles podem ser usados para iniciar o estado do objeto $scope e atribuir comportamento a este
objeto. Quando um controlador atrelado ao DOM atravs da diretiva ng-controller, o
Angular vai instanciar um objeto de Controller, usando o nome especificado no construtor da
funo. Neste momento, um objeto $scope filho estar disponvel como um parmetro
injetvel para a funo de construo do Controlador. (ANGULARJS)
Segundo Freeman (2014, p. 22), O controller fica entre o modelo e a viso e conecta-
os. O controlador responde interao do usurio, atualizando os dados do modelo e
fornecendo viso os dados de que ela necessita [...]. Ele responsvel por definir como o
aplicativo ser iniciado. (GREEN; SESHADRI, 2013, p. 142)

1.2.1.3 Diretivas

Segundo Branas (2014, p. 18), Uma diretiva uma extenso do vocabulrio HTML
que permite ao desenvolvedor a criao de novos comportamentos. Essa tecnologia permite a
criao de componentes reutilizveis para toda a aplicao, em forma de atributos,
elementos, classes e comentrios. atravs das diretivas que o controlador recebe as aes
geradas pelo usurio, e tambm atravs destas que os dados modificados so espelhados na
viso.

1.2.1.4 Expresses

Segundo Branas (2014, p. 53), Uma expresso uma simples parte de cdigo que
ser avaliada pelo Framework e pode ser escrita entre chaves duplas, como por exemplo
{{teste}}. conhecida como interpolao e permite a fcil interao com qualquer objeto
dentro do scope.. Ainda, a expresso permite a adio de clculos, como {{2 + 2}}, e pode
trabalhar em conjunto aos filtros para transformao da apresentao do contedo na tela.
(BRANAS, 2014, p. 54). atravs das expresses que o Angular mostra os dados presentes
no modelo da aplicao.
 10

1.2.1.5 Filtros

Os filtros so usados nas views para formatar os dados apresentados ao usurio. Uma
vez que o filtro definido no mdulo, ele pode ser utilizado por todos os controllers e vises
daquele mdulo. (FREEMAN, 2014, p. 221)
O AngularJS traz filtros built-in (como currency, que recebe um nmero e formata-o
para dlar ou date, que recebe um timestamp e transforma para uma data legvel, segundo
um formato), e tambm permite a criao de filtros personalizados. Basicamente, os filtros
so funes JavaScript que recebem um dado e formatam este dado para ser mostrado na
viso. (FREEMAN, 2014, p. 222)

1.2.1.6 Rotas

As rotas do AngularJS permitem que, ao modificar a URL, seja possvel o

carregamento e a apresentao de pginas (templates), bem como a instanciao de um
controller que trar o contexto a este template. (GREEN; SESHADRI, 2013, p. 38)
A forma como o servio $routeProvider trabalha de fcil entendimento: quando as
modificaes no mtodo $location.path atingem os mapeamentos realizados, a view
correspondente carregada e mostrada na tela. (FREEMAN, 2014, p. 583). O mdulo
ngRoute inclui uma diretiva chamada ng-view, que o local onde o template carregado ser
renderizado.

1.2.1.7 Servios

Os servios do AngularJS so objetos ou funes conectados atravs do uso de Injeo

de dependncia. Um exemplo simples de Servio dentro do AngularJS o $http, cuja
finalidade abstrair chamadas AJAX e facilitar a utilizao dos mtodos padro do protocolo
HTTP (GET, POST, PUT, DELETE). (ANGULAR)

2 ESTUDO DE CASO

Esta seo apresenta a descrio do estudo de caso abordado juntamente com os

pontos a serem avaliados com relao ao desenvolvimento do prottipo. Ainda, esto
presentes os objetivos do estudo de caso de forma geral, a metodologia aplicada para
 11

avaliao dos objetivos e a descrio do cenrio da aplicao. Por fim, so apresentados de

forma mais detalhada os resultados obtidos na utilizao do AngularJS, atrelados s
consideraes sobre o estudo de caso.

2.1 Descrio e objetivos de avaliao

A finalidade de reproduzir um caso de uso permitir a avaliao dos principais

objetivos do trabalho, que se relacionam ao estudo da arquitetura sugerida pelo framework, a
forma como este trabalha com AJAX e com a tcnica de Data Binding, a manipulao de
templates, a utilizao de filtros baseados em arrays JSON vinculados ao DOM, o uso de
SPA atravs do framework e a experincia de desenvolvimento resultada ao empreg-lo em
um sistema que pode vir a ser colocado em produo.
Na subseo seguinte, ser mencionada a metodologia empregada para avaliao dos
pontos propostos no estudo de caso.

2.2 Metodologia de avaliao

Para avaliar a experincia de desenvolvimento, foi montado e codificado um caso de

uso de cadastro de tickets e atendimentos. Dentro deste caso de uso, foi possvel a avaliao
da arquitetura sugerida pelo framework atravs da organizao dos diretrios do sistema e do
uso de SPA, que segue o modelo de desenvolvimento Web moderno onde o AngularJS est
inserido. Para anlise da forma de trabalho das requisies AJAX, foi montado um service
dentro do mdulo principal atravs do qual todos os outros mdulos comunicam-se com o
lado servidor da aplicao para obteno dos dados armazenados, abordando tambm a
tcnica de Data Binding para exibio destes dados na camada de viso e a utilizao dos
componentes de filtro do Angular para modificao da apresentao dos dados obtidos. A
manipulao de templates realizada em toda a aplicao e ser ilustrada atravs de figuras
da tela principal e demonstrao do funcionamento de rotas do Angular.

2.3 Cenrio de avaliao

O cenrio de avaliao da aplicao baseia-se em um caso de uso de cadastro de

tickets de suporte e atendimentos, conforme ilustrao do diagrama de classes da Figura 5:
 12

Figura 5: Diagrama de classes do caso de uso

Fonte: Autor

As classes Cidade e Plano so associadas classe Cliente, a qual obrigatoriamente

deve estar atrelada a uma cidade e a um plano. O cliente tem Tickets, atravs dos quais ele
pode informar problemas ocorridos. Os Atendimentos ligam-se diretamente ao Ticket, pois
atravs dos atendimentos que definido o Status do Ticket, podendo ser ele: Novo, que
representa um Ticket recm-aberto pelo cliente e que no recebeu atendimento; Em
andamento, que representa um Ticket que est sendo verificado; Concludo, que representa
um Ticket j atendido e resolvido. Para o desenvolvimento do lado cliente do prottipo, foram
utilizadas as linguagens padro de criao de sites (HTML, CSS e JavaScript), em conjunto
linguagem PHP para codificao server-side e o Sistema de Gerenciamento de Banco de
Dados (SGBD) MySQL para armazenamento dos dados.
Aps o desenvolvimento do caso de uso, foi possvel avaliar todos os tpicos
propostos anteriormente. O detalhamento da avaliao est ilustrado na seo seguinte,
denominada Avaliao da utilizao do AngularJS.

2.4 Avaliao da utilizao do AngularJS

Nas seguintes subsees, sero expostas as avaliaes referentes a cada ponto

abordado no trabalho atravs da demonstrao de cada tpico, ilustrao e explicao de sua
aplicao e os resultados obtidos.
 13

2.4.1 Organizao dos arquivos e componentes da aplicao

Com o desenvolvimento do caso de uso, foi possvel analisar a forma como o sistema
fica organizado e como ele pode ser expansvel. A Figura 6 apresenta a organizao dos
diretrios do caso de uso criado:

Figura 6: Organizao de diretrios do sistema

Fonte: Autor

Com base em tentativas de implementao, foi verificado que o modo ideal deixar o
mdulo principal (app.js) em um diretrio raiz e separar os outros mdulos em subdiretrios
que contm todos os arquivos referentes quele mdulo (templates, arquivos JavaScript,
arquivos de script server-side).
Desta maneira, possvel deixar no mdulo principal as funes cabveis a todos os
mdulos, e nos mdulos filhos, somente as funes especficas de cada um. Isso permite a
incluso de mdulos no sistema sem a necessidade de modificaes nos j existentes,
melhorando a expanso da aplicao e a possibilidade de reutilizao de cdigo.

2.4.2 Utilizao de templates

O uso de templates ocorre em toda a aplicao do caso de uso. Foram utilizados

templates fixos que no envolvem processamento (como o cabealho), templates fixos na tela
que executam funes (menu) e templates dinmicos, que mudam seus dados conforme aes
 14

do usurio e so carregados sob demanda. O modo de carregamento de um template

ilustrado na Figura 7:
Figura 7: Ilustrao dos passos para carregamento de um template

Fonte: Autor

O template criado em um arquivo especfico, para separ-lo do cdigo principal (1).

Esse arquivo ento referenciado no roteamento da aplicao, atravs do atributo
templateUrl, que indica o caminho para o arquivo e o atributo controller, que indica o
controlador que coordenar esse template (2). Quando a URL na barra de endereos do
navegador modificada e atende a um dos roteamentos criados, a ao realizada e o
template renderizado na diretiva ng-view (3), sendo finalmente exibido ao usurio final (4).
O AngularJS torna simples a implementao e o uso de templates dinmicos atravs
do uso de rotas. Conforme demonstrado na Figura 7, com poucos trechos de cdigo, pode-se
criar diversas rotas em uma aplicao e separar o contedo exibido nas pginas em arquivos
especficos. Esse modo de implementar templates implica na facilidade do emprego da tcnica
SPA, que ser retratada na subseo seguinte.
 15

2.4.3 Utilizao de SPA

Todo o caso de uso baseou-se na implementao da tcnica de Single Page

Application. Para uma anlise mais adequada dessa tcnica, foi implementado um menu
lateral que contm links para os mdulos. Atravs das mudanas na URL executadas pela
seleo de um mdulo no menu, ocorre a modificao no mtodo JavaScript window.location,
abstrado pelo AngularJS atravs do service $location. A Figura 8 apresenta o caminho
percorrido pelo servio $routeProvider quando feita qualquer modificao na URL:

Figura 8: Interpretao da URL pelas rotas do AngularJS

Fonte: Autor

Toda a vez que realizada alguma modificao na URL (1), o servio $location
percorre todas as rotas configuradas nos mdulos e verifica se alguma condiz com a nova
URL, carregando o template inline ou o template localizado no caminho informado (2). A
implantao de rotas realizada atravs dos mtodos do servio $routeProvider (when, que
indica Quando a URL condizer com e otherwise, que executado caso nenhuma rota
combine com o contedo da URL), incluindo na diretiva ng-view (3), que fica na pgina
principal o template carregado (4).

2.4.4 Data Binding

O uso do Data Binding ocorre em todos os formulrios e listagens do caso de uso. Ao

realizar qualquer ao sobre um registro (listar, editar, remover ou adicionar) atravs da viso
que resulte em uma modificao dos objetos do $scope, essa modificao automaticamente
 16

espelhada na viso. O mesmo ocorre quando algo alterado no modelo: feita a alterao, o
AngularJS j transmite as modificaes camada de viso. Para que isso ocorra, o AngularJS
analisa o template ao carreg-lo, verificando as diretivas e as marcaes inseridas. A partir
disso, o framework produz uma viso ao vivo, atravs da qual ele trabalha para transmitir as
informaes tanto do modelo para a viso quanto da viso para o modelo.
A abstrao que o framework fornece para realizar este tipo de manipulao
automatiza todo o processo de vinculao e sincronizao entre os dados presentes no modelo
com os dados mostrados no template ao usurio final.

2.4.5 Filtros built-in e personalizados

Os filtros da aplicao foram utilizados em todos os mdulos que permitem listagem

de dados. Estes foram usados para filtragem de dados das listas (buscas por Nome, por
exemplo) e juntamente exibio dos dados (como mscara de Valor, para exibio em casas
decimais). Tambm foi criado um filtro personalizado para exibio do CPF. A Figura 10
mostra o uso do filtro dentro do template e o cdigo do filtro personalizado.

Figura 10: Uso do filtro no template e cdigo de filtro personalizado

Fonte: Autor

Durante a execuo da diretiva dir-paginate no template (1), para cada cliente dentro
da lista de clientes que est no objeto $scope.clientes, o AngularJS submete o atributo
cliente.cli_cpf para o filtro cpf (2). Este, ento, formata o parmetro recebido e retorna ele
formatado, sendo ento exibido na tela. Um detalhe verificado que, em listas muito grandes,
 17

h a necessidade de cuidar o uso de filtros que envolvam muito processamento para que estes
no venham a travar a execuo do script.

2.4.6 Abstrao das requisies AJAX

A observao deste item foi realizada atravs da criao de um service inserido no

mdulo principal do sistema que contm os mtodos para as aes de listagem, insero,
edio e deleo de registros do banco de dados. A Figura 11 apresenta o cdigo do service
em questo:

Figura 11: Cdigo do service criado para ilustrar as chamadas AJAX

Fonte: Autor

Foi criado um service com nome Funcoes, que recebe por dependncia outro servio
provido pelo AngularJS chamado $http. O $http executa facilmente chamadas de 4 mtodos
padro do protocolo HTTP: GET, POST, PUT e DELETE. No mtodo GET, basta passar a
URL do recurso solicitado. J no mtodo DELETE, necessrio passar a URL e os
parmetros, caso sejam necessrios. Devido ao PHP no ter arrays especficos para
tratamento de JSON Post e chamadas PUT, necessrio informar o tipo de contedo a ser
 18

enviado atravs do parmetro headers. Essa abstrao fornecida pelo AngularJS para
operaes HTTP de grande valia para aplicaes baseadas na arquitetura REST.

2.4.7 Experincia de desenvolvimento

Para avaliar este quesito, foi realizado o desenvolvimento de um caso de uso. Os

principais pontos levantados so:
Expanso da aplicao: uma vez feita a diviso da aplicao em mdulos, o
framework favoreceu a expanso atravs de sua abstrao na parte de injeo de
dependncia. Para adicionar um novo mdulo na aplicao, por exemplo, basta
coloc-lo como dependncia dentro do mdulo principal ou, caso assim for preferido,
coloc-lo somente como dependncia nos mdulos que o utilizarem;
Reutilizao de cdigo: o AngularJS se mostrou muito eficiente na parte de
reutilizao do cdigo previamente desenvolvido, pois quando se tem um mdulo
pronto e bem definido, este mdulo geralmente ser utilizado em outras aplicaes.
Mesmo que a nova aplicao contenha campos diferentes, a lgica de criao
permanece igual, facilitando sua replicao. Outro detalhe importante que
normalmente todos os mdulos seguem o mesmo fluxo de chamadas, sendo possvel
fazer uma quantidade grande de mdulos a partir de um principal e em um espao
reduzido de tempo;
Mantenabilidade e testabilidade: no que diz respeito a manuteno e testes, a aplicao
se tornou limpa e a depurao se tornou simplificada. A modularizao auxilia muito a
fase de testes do sistema. Como o mdulo praticamente independente dos demais,
este pode ser testado separadamente dos outros, agilizando a busca por falhas. Alm
disso, atravs da reutilizao de cdigo, h ganhos na consistncia da aplicao, uma
vez que um mdulo previamente testado e ento replicado;
Experincia de uso do sistema: a aplicao desenvolvida com o uso do framework
apresentou uma boa experincia de uso. O uso da tcnica de SPA permite que o
usurio consiga alternar entre as pginas rapidamente, mesmo que ele tenha uma
conexo razovel com a internet. Alm disso, de forma extremamente abstrada pelo
Angular, as buscas (filtros) so quase instantneas, permitindo melhor visualizao
dos dados. As validaes em formulrios tambm melhoram a usabilidade da
 19

aplicao, uma vez que pode ser desabilitado o boto de submisso do formulrio
enquanto este no atingir as regras de validao impostas pelo sistema.
Dadas as avaliaes acima, a experincia de desenvolvimento com o framework
AngularJS foi muito interessante e produtiva. Alm de ser altamente otimizado para
renderizar e vincular dados, o Angular abstrai diversas atividades que nem sempre so
simples de desenvolver ou de controlar.

2.4.8 Consideraes da avaliao

O AngularJS se mostrou um timo framework ao que ele proposto. Altamente

otimizado, ele fornece equipe de desenvolvimento praticidade e robustez, juntamente com
grandes abstraes em tarefas no triviais para a maior parte dos desenvolvedores. Aliado
organizao da aplicao, proporciona simplicidade e qualidade de cdigo, resultando melhor
entendimento da estrutura e da codificao do sistema.

CONSIDERAES FINAIS

Este trabalho props um estudo e desenvolvimento de um caso de uso a partir da

utilizao do framework de desenvolvimento web AngularJS. A aplicao das ferramentas e
funcionalidades fornecidas pelo AngularJS permite a criao de sistemas Web rpidos e
intuitivos, inserindo o usurio em um ambiente agradvel de navegao e manipulao das
pginas. Para os desenvolvedores, o uso da ferramenta no escopo do projeto a ser criado traz
vantagens relevantes, como a facilidade na codificao, a possibilidade de reutilizao de
cdigos devido modularidade do projeto e a clareza na leitura do cdigo.
A otimizao, abstrao e leveza da tecnologia permite sua aplicao em muitos
ambientes de desenvolvimento Web, seja em sites demonstrativos (onde somente exibido
contedo, sem formulrios), geralmente mais simples, ou complexos softwares de gerncia,
com alta interao do usurio ao sistema. Logicamente, o AngularJS no a ferramenta mais
adequada para todas as demandas de desenvolvimento, porm um dos principais
frameworks quando se quer melhorar a produtividade da equipe de desenvolvimento e
fornecer tima experincia ao usurio final.
 20

STUDY AND DEVELOPMENT OF USE CASE WITH ANGULARJS FRAMEWORK

ABSTRACT

The web application development techniques allows developers to constantly improve your
applications and systems and provide better experience to final users. The AngularJS is a
framework that provides function and an architecture that support practically all requirements
in Internet programming environment and therefore is being applied frequently in companies.
This article presents a study of the conceitual part of framework and after presents the
obtained results through a case of use that allow AngularJS evaluation. The developed
prototype for tool evaluation determined a lot of factors that demonstrate the quality and the
results received by AngularJS implementation in Web systems. The final result of evaluation
shows the expected return, because the tool took positive effects in all evaluated points.

Keywords: Application. System. Development. Abstraction. Ease.

 21

REFERNCIAS

ANGULARJS. What is Angular?. Disponvel em:

<https://docs.angularjs.org/guide/introduction>. Acesso em: 09 nov. 2014.

BRANAS, Rodrigo. AngularJS Essentials. Birmingham: Packt Publishing, 2014. Disponvel

em: <http://it-ebooks.info/book/3899/>. Acesso em: 05 nov. 2014.

FINK, Gil; FLATOW, Ido. Pro Single Page Application Development: Using Backbone.js
and ASP.NET. Nova Iorque: Apress Media LLC.,2014. Disponvel em: <http://www.it-
ebooks.info/book/3692/>. Acesso em 08 nov. 2014.

FREEMAN, Adam. Pro AngularJS. Nova Iorque: Apress Media LLC., 2014. Disponvel
em: <http://it-ebooks.info/book/3847/>. Acesso em: 05 nov. 2014.

GREEN, Brad; SESHADRI, Shyam. AngularJS. Sebastopol: OReilly Media, 2013.

Disponvel em: <http://it-ebooks.info/book/2076/>. Acesso em: 05 nov. 2014.

JANSSEN, Cory. Web Development. Disponvel em:

<http://www.techopedia.com/definition/23889/web-development>. Acesso em 08 nov. 2014.

JEREMY, Clark. Dependency Injection: A Pratical Introdution. 2013. Disponvel em:

<http://www.jeremybytes.com/downloads/dependencyinjection.pdf>. Acesso em 09 nov.
2014.

JQUERY. What is jQuery?. Disponvel em: <https://jquery.com/>. Acesso em 18 mai. 2015.

MARCO. How to structure large angularJS applications. Disponvel em:

<http://entwicklertagebuch.com/blog/2013/10/how-to-structure-large-angularjs-
applications/>. Acesso em 24 mai. 2015.

NATIONS, Daniel. Web applications: What is a Web application?. Disponvel em

<http://webtrends.about.com/od/webapplications/a/web_application.htm>. Acesso em 09 nov.
2014.

OLSSON, Mikael. CSS Quick Syntax Reference. Nova Iorque: Apress Media LLC., 2014.
Disponvel em: <http://www.it-ebooks.info/book/3810/>. Acesso em 08 nov. 2014.

ROBBINS, Jennifer Nierdest. HTML5 Pocket Reference. Sebastopol: OReilly Media,

2013. Disponvel em: <http://www.it-ebooks.info/book/2516/>. Acesso em 08 nov. 2014.

STROPEK, Rainer. AngularJS with TypeScript and Windows Azure Mobile Services,
2013. Disponvel em: <http://goo.gl/O2NENn>. Acesso em 24 mai. 2015.

W3SCHOOLS. AJAX Tutorial. Disponvel em: <http://www.w3schools.com/ajax/>. Acesso

em: 18 mai. 2015.

WELLING, Luke; THOMSON, Laura. PHP and MySQL Web Development. Indianpolis:
Pearson Education, Inc., 2009. Disponvel em: <http://goo.gl/PpxW04>. Acesso em 06 nov.
2014.