Ken Williamson

Novatec

Authorized Portuguese translation of the English edition of titled Learning AngularJS, ISBN 9781491916759
2015 Ken Williamson. This translation is published and sold by permission of O'Reilly Media, Inc.,
the owner of all rights to publish and sell the same.
Traduo em portugus autorizada da edio em ingls da obra Learning AngularJS, ISBN 9781491916759
2015 Ken Williamson. Esta traduo publicada e vendida com a permisso da O'Reilly Media, Inc.,
detentora de todos os direitos para publicao e venda desta obra.
Novatec Editora Ltda. [2015].
Todos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998. proibida a reproduo desta
obra, mesmo parcial, por qualquer processo, sem prvia autorizao, por escrito, do autor e da Editora.
Editor: Rubens Prates
Traduo: Lcia A. Kinoshita
Reviso gramatical: Mari Kumagai
Assistente editorial: Priscila A. Yoshimatsu
Editorao eletrnica: Carolina Kuwabata
ISBN: 978-85-7522-430-4 IG20150423
Histrico de impresses:
Maio/2015

Primeira edio

Novatec Editora Ltda.

Rua Lus Antnio dos Santos 110
02460-000 So Paulo, SP Brasil
Tel.: +55 11 2959-6529
Email: novatec@novatec.com.br
Site: www.novatec.com.br
Twitter: twitter.com/novateceditora
Facebook: facebook.com/novatec
LinkedIn: linkedin.com/in/novatec

captulo 1

Introduo ao AngularJS

O AngularJS do Google um framework JavaScript MVC (Model-View-Controller, ou Modelo-Viso-Controlador) completo, que facilita bastante
a criao rpida de aplicaes que executem adequadamente em qualquer
plataforma desktop ou mvel. Em um perodo de tempo muito curto, o
AngularJS passou de uma opo de cdigo aberto desconhecida para um
dos frameworks JavaScipt do lado cliente mais conhecido e mais amplamente utilizado. O AngularJS 1.3 e as verses mais recentes, combinados
com a jQuery e o Twitter Bootstrap, oferecem tudo que necessrio para
implementar rapidamente frontends HTML5 de aplicaes JavaScript
que usem web services REST para os processos em backend. Este livro
mostrar como usar todos os trs componentes do frontend para ter
domnio sobre a eficcia dos servios REST no backend e implementar
rapidamente aplicaes mveis e desktop eficientes.

Frameworks JavaScript do lado cliente

As aplicaes JavaScript do lado cliente executam no dispositivo do
usurio ou em um PC e, desse modo, deslocam a carga de trabalho para
o hardware do usurio, distante do servidor. At bem recentemente, os
frameworks MVC para web do lado do servidor como o Struts, o Spring
MVC e o ASP.NET eram as opes preferidas da maioria dos projetos de
desenvolvimento de software baseados em web. Os frameworks JavaScript
do lado cliente, porm, so modelos sustentveis, que oferecem muitas
vantagens em relao aos frameworks web convencionais como simplicidade, desenvolvimento rpido, agilidade na operao, testabilidade e
20

Captulo 1 Introduo ao AngularJS

21

a capacidade de empacotar toda a aplicao e implant-la em todos os

dispositivos mveis e na Web com relativa facilidade. Voc pode implementar sua aplicao uma s vez, implant-la e execut-la em qualquer
lugar ou plataforma, sem fazer modificaes. bastante eficiente.
O AngularJS torna esse processo ainda mais rpido e fcil. Ele ajuda a criar
aplicaes de frontend em dias em vez de meses, alm de oferecer suporte
completo para testes de unidade que ajudam a reduzir o tempo de QA
(Quality Assurance, ou Garantia de qualidade). O AngularJS tem um conjunto
rico de documentao de usurio e um timo suporte da comunidade para
ajudar a responder perguntas durante o seu processo de desenvolvimento.
Os modelos e as vises do AngularJS so muito mais simples do que aqueles
que voc encontra na maioria dos frameworks JavaScript do lado cliente. Os
controladores, geralmente ausentes em outros frameworks JavaScript do lado
cliente, so componentes funcionais bsicos do AngularJS.
A figura 1.1 mostra um diagrama de uma aplicao AngularJS e todos os
componentes MVC relacionados. Depois que a aplicao AngularJS
iniciada, o modelo, a viso, o controlador e todos os documentos HTML
so carregados no dispositivo mvel do usurio ou no desktop e executam
totalmente no hardware desse usurio. Como podemos ver, chamadas
so feitas aos servios REST no backend; nesse local, esto toda a lgica
e os processos de negcios. Os servios REST do backend podem estar
em um servidor web privado ou na nuvem (que o que ocorre com mais
frequncia). Os servios REST na nuvem podem escalar, passando de um
punhado de usurios para milhes deles, com relativa facilidade.
Parciais (partials) HTML5
Backend
Viso
Modelo

Servio
REST

Controlador

Figura 1.1 Diagrama de uma aplicao AngularJS MVC.

22

Introduo ao AngularJS

Aplicao single-page
O AngularJS usado com mais frequncia para criar aplicaes que
estejam de acordo com o conceito de SPA (Single-Page Application). As
SPAs so aplicaes que tm somente uma pgina HTML como ponto
de entrada; todo o contedo da aplicao adicionado e removido dinamicamente dessa pgina nica. Voc pode ver o ponto de entrada de
nossa SPA no cdigo de index.html que se segue. A tag <div ng-view></div>
o local em que todo o contedo dinmico ser inserido em index.html:
<!-- chapter1/index.html -->
<!DOCTYPE html>
<html lang="en" ng-app="helloWorldApp">
<head>
<title>AngularJS Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script
<script
<script
<script

src="js/libs/angular.min.js"></script>
src="js/libs/angular-route.min.js"></script>
src="js/libs/angular-resource.min.js"></script>
src="js/libs/angular-cookies.min.js"></script>

<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>

medida que o usurio clicar nos links da aplicao, o contedo existente

associado tag ser removido e novos contedos dinmicos sero associados mesma tag. Em vez de o usurio esperar que uma nova pgina seja

Captulo 1 Introduo ao AngularJS

23

carregada, o novo contedo ser dinamicamente exibido em uma frao

do tempo que seria necessrio para carregar uma nova pgina web HTML.
Voc pode fazer download do cdigo-fonte da aplicao Hello,
World do captulo 1 a partir do GitHub (http://bit.ly/lajs-github).

Bootstrapping da aplicao
Bootstrapping (inicializao) do AngularJS o processo de carregar o
AngularJS quando uma aplicao iniciada. Carregar as bibliotecas do
AngularJS em uma pgina dar incio ao processo de bootstrap. O arquivo index.html ser analisado e o parser procurar a tag ng-app. A linha
<html lang="en" ng-app="helloWorldApp"></html> mostra como ng-app est definida. O cdigo a seguir apresenta o JavaScript iniciado por essa linha no
arquivo index.html. Como podemos ver, app.js o local em que a aplicao
AngularJS helloWorldApp est definida como um mdulo do AngularJS, e
esse o ponto de entrada da aplicao. A varivel helloWorldApp nesse arquivo
poderia ter qualquer nome.Entretanto vou cham-la de helloWorldApp por
questes de uniformidade:
/* excerto de chapter1/app.js */
'use strict';
/* Mdulo da aplicao */
var helloWorldApp = angular.module('helloWorldApp', [
'ngRoute',
'helloWorldControllers'
]);

Dependency Injection (Injeo de dependncias)

A DI (Dependency Injection, ou Injeo de dependncias) um padro
de projeto em que as dependncias so definidas em uma aplicao como
parte da configurao. A injeo de dependncias ajuda a evitar a neces-

24

Introduo ao AngularJS

sidade de criar dependncias da aplicao manualmente. O AngularJS

utiliza a injeo de dependncias para carregar as dependncias dos
mdulos quando uma aplicao iniciada. O cdigo de app.js da seo
anterior mostra como as dependncias do AngularJS so definidas.
Como podemos ver, duas dependncias esto definidas conforme necessrias aplicao helloWorldApp na inicializao. As dependncias esto
definidas em um array na definio do mdulo. A primeira dependncia
o mdulo ngRoute do AngularJS, que disponibiliza o roteamento aplicao. A segunda dependncia corresponde ao nosso mdulo controlador
helloWorldControllers. Discutiremos os controladores em detalhes posteriormente, mas, por enquanto, basta entender que eles so necessrios s
nossas aplicaes no momento da inicializao.
A injeo de dependncias no um conceito novo. Ela foi introduzida
h mais de dez anos e tem sido usada consistentemente em diversos
frameworks de aplicaes; a DI estava presente no ncleo do popular
framework Spring, escrito em Java. Uma das principais vantagens que
ela reduz a necessidade de cdigo boilerplate, cuja escrita, normalmente,
um processo que consome tempo de uma equipe de desenvolvimento.
A injeo de dependncias tambm ajuda a deixar uma aplicao mais
testvel. Essa uma das principais vantagens de usar o AngularJS para
criar aplicaes JavaScript. As aplicaes AngularJS so muito mais fceis
de testar do que as aplicaes criadas com a maioria dos frameworks
JavaScript. Com efeito, h um framework de teste que foi criado especificamente para facilitar os testes de aplicaes AngularJS. Falaremos mais
sobre testes no final deste captulo.

Rotas no AngularJS
As rotas no AngularJS so definidas por meio da API $routeProvider. As
rotas so dependentes do mdulo ngRoute, e por isso que esse mdulo
um requisito quando a aplicao iniciada. O cdigo de app.js a seguir
mostra como definimos as rotas em uma aplicao AngularJS. Duas rotas
esto definidas a primeira / e a segunda /show:

Captulo 1 Introduo ao AngularJS

25

/* excerto de chapter1/app.js */
helloWorldApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider){
$routeProvider.
when('/', {
templateUrl: 'partials/main.html',
controller: 'MainCtrl' }).
when('/show', {
templateUrl: 'partials/show.html',
controller: 'ShowCtrl'
});

As duas rotas definidas esto diretamente mapeadas aos URLs definidos

na aplicao. Se um usurio clicar em um link na aplicao especificada
como www.nomeDeAlgumDominio/show, a rota /show ser seguida e o
contedo associado a esse URL ser exibido. Se o usurio clicar em um
link especificado como www.nomeDeAlgumDominio/, a rota / ser seguida
e esse contedo ser exibido.

Modo HTML5
O arquivo app.js completo ser mostrado a seguir. A ltima linha em
app.js ($locationProvider.html5Mode(false).hashPrefix('!');) utiliza o servio
locationProvider. Essa linha de cdigo desabilita o modo HTML5 e habilita o
modo hashbang do AngularJS. Se voc habilitar o modo HTML5 passando
true, a aplicao usar a API HTML5 History. O modo HTML5 tambm oferece URLs elegantes aplicao, como /nomeDeAlgumaApp/blogPost/5 no lugar dos URLs padres do AngularJS como /nomeDeAlgumaApp/#!/blogPost/5
que usam o #!, conhecido como hashbang.
/* Arquivo chapter1/app.js completo */
'use strict';
/* Mdulo da aplicao */
var helloWorldApp = angular.module('helloWorldApp', [
'ngRoute',
'helloWorldControllers'

26

Introduo ao AngularJS
]);
helloWorldApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {

$routeProvider.
when('/', {
templateUrl: 'partials/main.html',
controller: 'MainCtrl'
}).when('/show', {
templateUrl: 'partials/show.html',
controller: 'ShowCtrl'
});
$locationProvider.html5Mode(false).hashPrefix('!');
}]);

O modo HTML5 pode oferecer URLs elegantes, porm exige mudanas

na configurao do servidor web na maioria dos casos. As mudanas
so diferentes para cada servidor web em particular, e tambm podem
apresentar divergncias em diferentes instalaes de servidor. Alm disso,
o modo HTML5 trata mudanas em URL de maneira diferente, usando
a API HTML History para navegao.
Usar o modo HTML5 exige somente uma mudana de configurao no
AngularJS; neste livro, no discutiremos as mudanas necessrias no
servidor, pois nosso foco est no AngularJS. O site do AngularJS contm
documentao a respeito das mudanas necessrias em todos os servidores
web modernos quando o modo HTML5 estiver habilitado. Usar esse modo
oferece algumas vantagens, porm ficaremos com o modo hashbang nos
exerccios de nosso captulo.
O modo hashbang usado para suportar ferramentas de pesquisa convencionais, que no tenham a capacidade de executar JavaScript em sites Ajax
como aqueles criados com o AngularJS. Quando uma ferramenta de pesquisa convencional fizer uma pesquisa em um site que use hashbangs, criado com o AngularJS, a ferramenta substituir #! por ?_escaped_fragment_=.
As ferramentas de pesquisa convencionais esperam que o servidor tenha
snapshots HTML no local em que _escaped_fragment_= estiver apontando.
Os snapshots HTML so simplesmente cpias da verso renderizada de
HTML do site ou da aplicao.

Captulo 1 Introduo ao AngularJS

27

Ferramentas de pesquisa modernas

Felizmente, as ferramentas de pesquisa modernas tm a capacidade de
executar JavaScript, conforme anunciado pelo Google em uma nota de
imprensa divulgada no dia 23 de maio de 2014 (http://bit.ly/1EWcX3P). O
modo hashbang tambm permite que aplicaes AngularJS armazenem
pginas solicitadas por Ajax no histrico do navegador. Geralmente, esse
processo simplifica o uso de marcadores (bookmarks) nos navegadores.

Templates do AngularJS
As parciais (partials) do AngularJS, tambm chamadas de templates,
so sees de cdigo que contm cdigo HTML associado tag
<div ng-view></div></div> mostrada no arquivo index.html anteriormente neste captulo. Se voc observar o arquivo app.js completo novamente, poder
ver que valores diferentes de templateUrl esto definidos para cada rota.
Os arquivos main.html e show.html listados a seguir mostram as duas parciais definidas (templates). Os templates contm somente cdigo HTML
e no tm nada em especial por enquanto. Mais tarde, usaremos a linguagem integrada de templates do AngularJS para exibir dados dinmicos
em nossos templates:
<!-- chapter1/main.html -->
<div>Hello World</div>
<!-- chapter1/show.html -->
<div>Show The World</div>

medida que o usurio clicar nos diferentes links, o valor atribudo a

<div ng-view> ser substitudo pelo contedo dos arquivos de template
associados. O valor do controlador definido para cada rota referencia o
componente associado ao controlador (do padro MVC) definido para
cada rota em particular.
As prximas sees oferecem uma viso geral concisa de cada componente MVC do AngularJS e como esses componentes so usados, permitindo uma melhor compreenso de como o AngularJS funciona. De

28

Introduo ao AngularJS

modo diferente da maioria dos frameworks JavaScript do lado cliente, o

AngularJS oferece componentes para modelo, viso e controlador, que
podero ser usados em todas as aplicaes. Geralmente, isso ajuda os
desenvolvedores que tenham familiaridade com padres de projeto a
dominar rapidamente os conceitos do AngularJS.

Vises do AngularJS (MVC)

Muitos frameworks JavaScript do lado cliente exigem que voc realmente
defina as classes de viso (view) em JavaScript, e essas classes podem
conter de algumas a centenas de linhas de cdigo. No isso que ocorre
com o AngularJS. O AngularJS extrai todos os templates definidos para
uma aplicao e cria as vises no DOM (Document Object Model, ou
Modelo de objetos de documentos) para voc. Sendo assim, seu nico
trabalho ao criar as vises ser criar os templates.
Criar as vises no AngularJS um processo simples, em que se utiliza
principalmente HTML e CSS. A simplicidade das vises do AngularJS
permite economizar bastante tempo na criao de aplicaes AngularJS.
Discutiremos a criao de templates com mais detalhes no captulo 5.

Modelos do AngularJS (MVC)

Muitos frameworks JavaScript do lado cliente tambm exigem que voc
crie classes de modelos (model) em JavaScript. Isso tambm no ocorre
com o AngularJS. O AngularJS tem um objeto $scope, usado para armazenar
o modelo da aplicao. Os escopos so associados ao DOM. O modelo
acessado por meio de propriedades de dados atribudas ao objeto $scope.
O $scope do AngularJS ajuda a simplificar consideravelmente as aplicaes
JavaScript. Outros frameworks JavaScript geralmente incentivam a insero de grandes quantidades de lgica de negcios nas classes do modelo
para o framework em particular. Infelizmente, essa prtica normalmente
resulta em uma lgica de negcios duplicada. Em um projeto de grande
porte, isso pode resultar em milhares de linhas de cdigo inteis. Discutiremos os modelos com mais detalhes no captulo 7.

Captulo 1 Introduo ao AngularJS

29

Controladores do AngularJS (MVC)

Os controladores (controllers) do AngularJS correspondem s fitas adesivas
que mantm os modelos e as vises conectados. O controlador o local em
que voc deve colocar toda a lgica de negcios especfica de uma viso em
particular quando no for possvel coloc-la em um servio REST. A lgica
de negcios quase sempre deve ser colocada em servios REST no backend
sefor possvel; isso ajuda a simplificar as aplicaes AngularJS.
Quando a lgica de negcios inserida em uma aplicao for usada por
vrios controladores, ela dever ser colocada em servios AngularJS que
no sejam REST. Esses servios podem ento ser injetados em qualquer
controlador que precise acessar a lgica. Discutiremos os servios que
no so REST no captulo 8 com mais detalhes.

Lgica de negcio dos controladores

O cdigo a seguir mostra o contedo do arquivo controllers.js. No incio
do arquivo, definimos o mdulo helloWorldController. Ento definimos dois
novos controladores MainCtrl e ShowCtrl e os associamos ao mdulo
helloWorldController. A lgica de negcios especfica do controlador MainCtrl
definida nesse controlador. Da mesma maneira, a lgica de negcios
especfica do controlador ShowCtrl definida no controlador ShowCtrl. Observe que $scope injetado em ambos os controladores. O $scope injetado
em cada controlador especfico desse controlador, e no ser visvel aos
demais controladores:
/* chapter1/controllers.js */
'use strict';
/* Controladores */
var helloWorldControllers =
angular.module('helloWorldControllers', []);
helloWorldControllers.controller('MainCtrl', ['$scope',
function MainCtrl($scope) {
$scope.message = "Hello World";
}]);

30

Introduo ao AngularJS
helloWorldControllers.controller('ShowCtrl', ['$scope',
function ShowCtrl($scope) {
$scope.message = "Show The World";
}]);

Como podemos ver, estamos usando o modelo para preencher as mensagens a serem exibidas nos templates. O cdigo a seguir mostra os templates
modificados que usam os valores do modelo recm-criados. A linha
$scope.message = "Hello World" no controlador MainCtrl usada para criar uma
propriedade chamada message, adicionada ao escopo (que armazena os atributos do modelo). Ento usamos a marcao com chaves duplas ({{}}) no
template main.html para obter acesso e exibir o valor atribudo a $scope.message:
<!-- chapter1/main.html -->
<div>{{message}}</div>

O uso de chaves duplas a maneira de o AngularJS exibir propriedades

do escopo na viso. A sintaxe de chaves duplas, na verdade, faz parte da
linguagem integrada de template do AngularJS.
De modo semelhante, usamos o valor atribudo propriedade message
com a linha $scope.message = "Show The World" no controlador ShowCtrl para
preencher a mensagem exibida no template show.html. Usamos a marcao
de chaves duplas no template show.html como fizemos anteriormente para
obter acesso e exibir a propriedade do modelo:
<!-- chapter1/show.html -->
<div>{{message}}</div>

Integrando o AngularJS a outros frameworks

O AngularJS pode ser integrado a aplicaes existentes que usem outros
frameworks. Podem ser outros frameworks JavaScript do lado cliente ou
frameworks web como Spring MVC ou CakePHP. Voc pode partir de
uma aplicao implementada em Java e adicionar novas funcionalidades
do lado cliente muito facilmente usando o AngularJS, reduzindo consideravelmente o tempo de desenvolvimento.

Captulo 1 Introduo ao AngularJS

31

Adicionar um novo carrinho de compras do AngularJS em uma aplicao Java existente um bom exemplo a ser considerado. A aplicao Java
existente poderia estar implementada com o framework Spring e usar o
Spring MVC como framework web. Adicionar um carrinho de compras
implementado em Java usando o Spring MVC pode ser um processo
demorado. Isso, porm, no o que ocorre com o AngularJS.
Voc pode criar um carrinho de compras rapidamente com o AngularJS
e ter o cdigo pronto para funcionar em algumas horas, integrando
facilmente o carrinho na aplicao Java existente. Ser possvel no s
criar o carrinho de compras como tambm adicionar testes de unidade
rapidamente para aumentar a cobertura do cdigo testado e reduzir os
defeitos da aplicao. O AngularJS foi concebido para ser testvel desde
o incio; esse um dos recursos fundamentais do AngularJS e um dos
motivos principais para selecion-lo em relao a outros frameworks
JavaScript do lado cliente. Discutiremos mais sobre os testes de aplicaes
AngularJS na prxima seo.

Testando aplicaes AngularJS

Nos ltimos anos, as ferramentas de gerao de verses com CI
(Continuous Integration, ou Integrao contnua) como o Travis CI, o
Jenkins e outras ganharam popularidade e passaram a ser mais usadas.
As ferramentas de CI tm a capacidade de executar scripts de teste durante um processo de gerao de verso e fornecer feedback imediato na
forma de resultados de testes. As ferramentas de CI ajudam a automatizar
o processo de testar softwares e, com frequncia, podem alertar os desenvolvedores a respeito de defeitos no software assim que eles ocorrerem.
H dois tipos de testes no AngularJS que se integram bem s ferramentas de CI. O primeiro tipo de testes o teste de unidade (unit testing). A
maioria dos desenvolvedores tem familiaridade com os testes de unidade;
geralmente, esses testes podem identificar defeitos de software com antecedncia no processo de desenvolvimento ao testar pequenas unidades
de cdigo. O segundo tipo de testes o teste E2E (End-to-End, ou Fim a
fim). Os testes E2E ajudam a identificar defeitos de software ao testar de
que modo os componentes de software se conectam e interagem.

32

Introduo ao AngularJS

H vrias ferramentas de testes usadas para executar testes de unidade em

aplicaes AngularJS. Duas das mais populares so o Karma e o JS Test
Driver. O Karma, porm, est se tornando rapidamente a principal opo
das equipes de desenvolvimento AngularJS .A ferramenta de teste E2E
mais popular para testes fim a fim de aplicaes AngularJS uma nova
ferramenta chamada Protractor. Ambas as ferramentas se integram bem
s ferramentas de CI.
As equipes de desenvolvimento AngularJS de grande porte descobriro
que testar aplicaes AngularJS com ferramentas de integrao contnua
proporcionar uma enorme economia de tempo. Com frequncia, um
teste de CI que falhe ser a primeira indicao de um defeito para as
equipes de grande porte. Equipes pequenas tambm percebero muitas
vantagens nos testes baseados em CI. Os desenvolvedores AngularJS devem
desenvolver testes de unidade e testes fim a fim sempre que for possvel.
Ao longo deste livro, abordaremos tanto os testes de unidade quanto os
testes fim a fim. Usaremos o Karma e o JsTestDrive para testes de unidade,
e o Protractor para testes E2E.

Concluso
Discutiremos modelos, vises e controladores com mais detalhes nos
prximos captulos, usando esses componentes para criar aplicaes funcionais que demonstrem a eficcia do AngularJS. Mostraremos como todos
os trs componentes funcionam em conjunto para simplificar a tarefa de
criar aplicaes JavaScript do lado cliente. Tambm discutiremos a criao
de testes de unidade e de testes fim a fim para aplicaes AngularJS.
O captulo 2 focar em ajudar voc a configurar um ambiente de desenvolvimento para HTML5. Tambm faremos download das verses mais
recentes do AngularJS, da jQuery e do Twitter Bootstrap, e as adicionaremos ao nosso projeto de exemplo.