Você está na página 1de 53

AngularJS na prtica (PT-BR)

Crie aplicaes web com AngularJS


Daniel Schmitz e Douglas Lira
Esse livro est venda em http://leanpub.com/livro-angularJS
Essa verso foi publicada em 2016-06-24

This is a Leanpub book. Leanpub empowers authors and publishers with the Lean
Publishing process. Lean Publishing is the act of publishing an in-progress ebook
using lightweight tools and many iterations to get reader feedback, pivot until you
have the right book and build traction once you do.
2013 - 2016 Daniel Schmitz e Douglas Lira

Tweet Sobre Esse Livro!


Por favor ajude Daniel Schmitz e Douglas Lira a divulgar esse livro no Twitter!
O tweet sugerido para esse livro :
Comprei o livro AngularJS na prtica do autor Daniel Schmitz. Mais informaes
em: https://leanpub.com/livro-angularJS
A hashtag sugerida para esse livro #livroangularjs.
Descubra o que as outras pessoas esto falando sobre esse livro clicando nesse link
para buscar a hashtag no Twitter:
https://twitter.com/search?q=#livroangularjs

Contedo
Introduo . . . . . . .
O que AngularJS?
Cdigo fonte . . . .
Errata . . . . . . . .

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

3
3
4
4

. . . . . . . . . . . . . . . . . . . . . . .

Uma nota sobre a nova verso desta obra . . . . . . . . . . . . . . . . . .

Parte 1 - AngularJS

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

.
.
.
.

Captulo 1 - Preparando o ambiente . . . . . . . . . . . .


Editor de textos . . . . . . . . . . . . . . . . . . . . .
Servidor Web . . . . . . . . . . . . . . . . . . . . . . .
Instalando o Apache . . . . . . . . . . . . . . . . . . .
Windows . . . . . . . . . . . . . . . . . . . . . . .
Linux . . . . . . . . . . . . . . . . . . . . . . . . .
Instalando o Node . . . . . . . . . . . . . . . . . . . .
Windows . . . . . . . . . . . . . . . . . . . . . . .
Linux . . . . . . . . . . . . . . . . . . . . . . . . .
Instalando o servidor web . . . . . . . . . . . . . . . .
Instalando o AngularJS . . . . . . . . . . . . . . . . .
Utilizando CDN . . . . . . . . . . . . . . . . . . . .
Realizando o download da biblioteca manualmente
Instalao atravs do npm . . . . . . . . . . . . . .
Instalando mais bibliotecas . . . . . . . . . . . . . .
Otimizando o seu projeto . . . . . . . . . . . . . . . .

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

7
7
7
8
8
8
9
9
10
11
11
12
13
14
17
18

CONTEDO

Captulo 2 - Conhecendo AngularJS .


DataBind . . . . . . . . . . . . . .
Controller . . . . . . . . . . . . .
Mtodos do controller . . . . . . .
Loops . . . . . . . . . . . . . . . .
Formulrios . . . . . . . . . . . .
Rotas e Deep linking . . . . . . . .
Como testar este exemplo . . . . .

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

23
23
24
26
27
28
29
36

Captulo 3 - Conectando AngularJS ao servidor


Uso do $http . . . . . . . . . . . . . . . . . .
Exemplo com $http . . . . . . . . . . . . . .
Uso do $resource . . . . . . . . . . . . . . . .
Exemplo simples com $resource . . . . . . . .

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

37
38
39
42
43

CONTEDO

Uma nota sobre PIRATARIA


Esta obra no gratuita e no deve ser publicada em sites de domnio pblico como
o scrib. Por favor, contribua para que o autor invista cada vez mais em contedo de
qualidade na lngua portuguesa, o que muito escasso. Publicar um ebook sempre
foi um risco quanto a pirataria, pois muito fcil distribuir o arquivo pdf.
Se voc obteve esta obra sem compr-la no site https://leanpub.com/livro-angularJS,
pedimos que leia o ebook e, se acreditar que o livro merea, compre-o e ajude o autor
a publicar cada vez mais. Obrigado!!

CONTEDO

Atualizao em JAN/2016
Prezados leitores, obrigado por adquirir o livro AngularJS na prtica. Esta obra
abrange todo o contedo sobre o Angular 1 e, como voc deve saber, o Angular 2
est a caminho (na verso beta). Como o Angular 2 algo totalmente diferente do
Angular 1, uma nova obra foi criada para suprir este contedo, que a nossa obra
Angular 2 na prtica.
Voc pode acess-la pelo link https://leanpub.com/livro-angular2 e se cadastrar para
receber informaes sobre o seu lanamento, que ocorrer em FEV/2016.
Como voc comprou Angular 1 na prtica estaremos fornecendo uma promoo
exclusiva na semana de lanamento do livro, para que possa tambm conhecer tudo
que o Angular 2 tem a oferecer!
A migrao do Angular 1 para o Angular 2 ter um captulo especial nesta obra,
que ser publicada assim que o Angular 2 for oficialmente lanado.

Introduo
A linguagem JavaScript vem tornando-se uma das mais usadas em todas as reas de
programao que esto ligadas a Web. uma linguagem que praticamente nasceu
com a Web, criada inicialmente para os navegadores Netscape, por volta de 1995.
Mais de 15 anos depois, javascript evolui de forma significativa com a criao de
novos frameworks, tornando-se a cada dia mais poderosa e utilizada. Um deles o
jQuery, amplamente conhecido e praticamente obrigatrio se voc deseja controlar
os elementos de uma pgina HTML, tambm chamado de DOM.
Nesta onda, diversos frameworks de qualidade surgem a cada dia, e dentre eles
temos o AngularJS, que ser o nosso principal objeto de estudo.
Seguindo a popularidade do Javascript, tornou-se natural que a linguagem que
executada no lado do cliente (navegador) pudesse tambm ser executada no lado do
servidor, gerando a plataforma NODE.JS, hoje em dia mundialmente conhecida e
utilizada.

O que AngularJS?
Este framework mantido pelo Google e possui algumas particularidades interessantes, que o fazem um framework muito poderoso.
Uma dessas particularidades que ele funciona como uma extenso ao documento
HTML, adicionando novos parmetros e interagindo de forma dinmica com vrios
elementos. Ou seja, com AngularJS podemos adicionar novos atributos no html para
conseguir adicionar funcionalidades extras, sem a necessidade de programar em
javascript.
AngularJS quase uma linguagem declarativa, ou seja, voc usa novos parmetros
na linguagem html para alterar o comportamento padro do html. Estes parmetros
(ou propriedades) so chamados de diretivas, na qual iremos conhecer cada uma ao
longo desta obra.
3

Introduo

Alm disso, fornecido tambm um conjunto de funcionalidades que tornam o


desenvolvimento web muito mais fcil e empolgante, tais como o DataBinding,
templates, fcil uso do Ajax, controllers e muito mais. Todas essas funcionalidades
sero abordadas ao longo desta obra.

Cdigo fonte
O cdigo fonte desta obra encontra-se em:
https://github.com/danielschmitz/livro-angular

Errata
Esta uma obra em constante evoluo, e erros podem aparecer. Caso encontre algo
errado, por favor envie um email para danieljfa@gmail.com.
Todos os erros corrigidos sero atualizados automaticamente, e publicados em
futuras verses da obra. Voc poder a qualquer momento obter uma nova verso,
visitando o site leanpub.com

Parte 1 - AngularJS

Uma nota sobre a nova verso


desta obra
Esta obra foi completamente refeita para atender melhor os padres de desenvolvimento web. Decidimos incluir diversas novas funcionalidades, e retirar outras, como
forma de melhor a experincia do leitor frente a tecnologia AngularJS.
Todos os leitores que leram a obra anterior podem obter o livro novamente atravs do
site da Leanpub, sem nenhum custo adicional. Nesta nova obra, estamos eliminando
a dependncia do Apache/PHP/Mysql e adicionando o Node.JS como uma parte
integrante ao desenvolvimento de aplicaes Web.

Captulo 1 - Preparando o
ambiente
preciso muito pouco para comear a aprender AngularJS. Em um nvel mais bsico,
voc precisa de um editor de textos e de um navegador web.
Com a evoluo do javascript nos ltimos anos, outra tecnologia ganhou destaque
no desenvolvimento web, que o Node.js, no qual iremos chamar simplesmente
de node. Node uma plataforma para executar javascript no lado do servidor,
construda sobre o motor Javascript do Google Chrome.

Editor de textos
Aqui deixamos livre a sua escolha por um editor de textos ou uma IDE. Lembre-se
que todo o nosso desenvolvimento focado em HTML e JavaScript, ou seja, voc no
precisar de algo poderoso para aprender AngularJS, apenas algo que complemente
o cdigo Javascript/HTML j est timo.
Nesta obra estamos usando extensivamente o Sublime Text 2, inclusive para
escrever o prprio livro, ento nos sentimos confortveis em recomend-lo.

Servidor Web
O AngularJS um framework para visualizao de dados e informaes, ele no
possui a funcionalidade de prover dados dinmicos, ou persistir informaes em um
banco de dados. Estas caractersticas so provenientes de um servidor Web.
7

Captulo 1 - Preparando o ambiente

Um dos servidores mais comuns nos dias de hoje o Apache. Geralmente o Apache
acompanhado do PHP, que um dos interpretadores de cdigo mais usados no
desenvolvimento web e do banco de dados MySql.
Tambm possvel criar um servidor web utilizando Node, algo que pode ser
feito via cdigo javascript, ou ento utilizar um framework que contm toda a
implementao necessria, como o express. Como o foco desta obra AngularJS,
e consequentemente javascript, iremos abordar o Apache, mas dar uma nfase maior
ao express.

Instalando o Apache
Windows
Se voc utiliza Windows, poder instalar o Wamp Server, disponvel no site oficial.
Faa o download da verso mais recente e instale o Wamp na configurao padro.
Aps instalado, voc poder incluir arquivos na seguinte pasta C:\wamp\www,
e poder utilizar o Apache, bem como o MySql e outros utilitrios acessando
http://localhost/.

Linux
Se usa Linux e uma verso derivada do debian, pode usar o gerenciador de pacotes
apt-get para instalar tudo para voc. O comando a seguir ir instalar o apache, o
php e o MySql.
$ sudo apt-get install apache2 apache2-utils
$ sudo apt-get install php5 php5-mysql php-pear php5-mcrypt
$ sudo apt-get install mysql-server

Captulo 1 - Preparando o ambiente

Instalando o Node
Windows
Se voc utiliza Windows, instale o node atravs do site oficial do Node. Faa o
download e instale o Node e deixe selecionado a opo npm, que o gerenciador
de pacotes do node, conforme a imagem a seguir.

Por padro o npm j vem selecionado, no desmarque esta opo

Alm do node, til instalar tambm o GIT, disponvel em https://git-scm.com/.

Captulo 1 - Preparando o ambiente

10

Marque esta opo para acessar o git atravs do cmd do windows

Linux
Podemos usar o gerenciador de pacotes apt-get do linux para instalar tudo que
precisamos, bastando apenas executar o seguinte comando.
$ sudo apt-get install git npm

Aps instalar todos os pacotes necessrios, necessrio criar um link simblico para
a palavra node, conforme o comando a seguir.
$ sudo ln -s /usr/bin/nodejs /usr/bin/node

Com isso o node, npm, git e outros pacotes relacionados estaro devidamente
instalados.

Captulo 1 - Preparando o ambiente

11

Instalando o servidor web


Precisamos de um servidor web mnimo para que possamos testar nossos exemplo
com AngularJS. Com node, podemos facilmente instalar o http-server, da seguinte
forma:
npm install http-server -g

Aps instalar o http-server, navegue at o diretrio em que deseja prover acesso e


digite:
$ http-server ./

Isso ir produzir um resultado semelhante ao exibido a seguir:


daniel@debian:~/www/temp$ http-server ./
Starting up http-server, serving ./
Available on:
http:127.0.0.1:8080
Hit CTRL-C to stop the server

Agora basta utilizar o endereo fornecido para acessar o diretrio criado. Desta
forma criamos rapidamente um servidor web simples, sem a necessidade de instalar
o Apache e realizar configuraes relacionadas a domnio ou virtual host.

Instalando o AngularJS
Para instalar o AngularJS, considere trs opes distintas na qual voc pode escolher.
Cada uma dela tem suas vantagens e desvantagens. Independente destas trs verses,
acesse o site oficial do AngularJS e clique no boto Download, fazendo surgir um menu
de opes de instalao, conforme a imagem a seguir.

Captulo 1 - Preparando o ambiente

12

Utilizando CDN
Inicialmente, voc pode adicionar o AngularJS diretamente no seu documento html,
sem ter que baixar nenhum pacote ou arquivo. preciso apenas duas alteraes na
estrutura de um documento HTML para que possamos ter o AngularJS instalado. A
primeira, e mais bvia, incluir a biblioteca javascript no cabealho do documento.
A segunda, e aqui temos uma novidade, incluir a propriedade ng-app no elemento
html em que queremos ativar o AngularJS. Neste caso, comeamos inserindo na
tag <html> do documento. O exemplo a seguir ilustra este processo.
HTML default para o AngularJS

<html ng-app>
<head>
<title>AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs\
/1.4.7/angular.min.js"></script>
</head>
<body>

Captulo 1 - Preparando o ambiente

13

</body>
</html>

Ateno
Devido a quebra de linha provocada pela URL da biblioteca javascript, percebe-se
uma contra barra \ aps a palavra angularjs. Esta contra barra deve ser omitida
se voc copiar/colar o cdigo diretamente do eBook. Ao invs de copiar o cdigo
do eBook, clique neste link para copiar diretamente do site codepen.

Na linha 1, temos o uso do ng-app que habilita o AngularJS a alterar o comportamento das tags html abaixo dele, permitindo assim que possamos utilizar mais
propriedades do AngularJS.
Na linha 4 inclumos a biblioteca AngularJS diretamente, atravs de uma URL na
qual chamamos de CDN.

Realizando o download da biblioteca manualmente


Pode-se realizar o download da ltima verso estvel do AngularJS, bastando
escolher a verso (nesta obra, seria a 1.4.7) e o tipo (Minified, umcompressed, zipped).
Escolha a verso zipped e clique em download.
Aps o download terminar, descompacte o arquivo e use o seguinte modelo,
considerando que o AngularJS descompactado est na pasta angular-1.4.7.

Captulo 1 - Preparando o ambiente

14

HTML para o AngularJS

<html ng-app>
<head>
<title>AngularJS</title>
<script src="angularjs-1.4.7/angular.min.js"></script>
</head>
<body>
</body>
</html>

Instalao atravs do npm


Podemos chamar este captulo de mini guia do npm.
Este ser o nosso padro de instalao de bibliotecas Javascript, e recomendo que
voc a utilize tambm. O gerenciador npm (Node Package Manager) poderoso e
fcil de usar, bastando apenas alguns comandos para que possamos instalar qualquer
biblioteca.
Crie a pasta C:\siteangular no Windows, ou /siteangular no Linux e, atravs
da linha de comando do seu sistema, execute a seguinte instruo:
cd ~/siteangular
$ npm init

ou no Windows:
cd c:\siteangular>
npm init

O comando npm init dentro do diretrio que criamos ir criar um arquivo chamado
package.json. Perceba que algumas perguntas sero feitas, que podem ser preenchidas ou no. Aps o npm init terminar, verifique o arquivo package.json, conforme
a figura a seguir :

Captulo 1 - Preparando o ambiente

15

Agora vamos instalar o AngularJS, atravs do seguinte comando:


$ npm install angular@1.4.7 --save

muito importante incluir a diretiva --save no comando, isso far com que
o arquivo package.json seja atualizado incluindo a biblioteca. A resposta deste
comando semelhante a figura a seguir. Perceba tambm que inclumos a verso
do AngularJS para que os exemplos apresentados nesta obra estejam compatveis.

Captulo 1 - Preparando o ambiente

16

Verifique o arquivo package.json aps instalar o angular.


{
name: "siteangular",
version: "0.0.0",
description: "Um site de teste",
main: "index.html",
scripts: {
test: "echo \"Error: no test specified\" && exit 1"
},
author: "Daniel",
license: "MIT",
dependencies: {
angular: "^1.4.7"
}
}

Perceba que a configurao dependencies foi adicionada, no final do arquivo. A

Captulo 1 - Preparando o ambiente

17

chave angular foi includa e a verso 1.4.7 referenciada. Isso importante para a
manuteno do seu projeto, j que podemos atualizar o AngularJS pelo npm.
Vamos supor que, ao invs da verso 1.4.7 deseja-se instalar a verso 1.4.5. Neste
caso, mesmo com a biblioteca 1.4.7 instalada podemos usar o comando npm install
angular@1.4.5 --save que tudo ser atualizado para a verso que voc informou.
Caso no informe a verso da biblioteca a ser instalada, a ltima estvel ser utilizada.
Estamos instalando passo a passo a biblioteca do AngularJS para expor as vantagens
do npm. Vamos criar agora o arquivo index.html, com o seguinte texto:
<html ng-app>
<head>
<title>AngularJS</title>
<script src="node_modules/angular/angular.min.js"></script>
</head>
<body>
</body>
</html>

Perceba que inclumos o AngularJS no documento HTML, mas no inclumos a


verso 1.4.7 do mesmo. Com isso, ao atualizar o AngularJS pelo npm, no ser
preciso alterar o nome do arquivo no documento HTML. Isso uma grande vantagem, principalmente quando temos diversas bibliotecas nas mais variadas verses
e precisamos atualiz-las.

Instalando mais bibliotecas


Veremos ao longo desta obra a instalao de outras bibliotecas javascript, como por
exemplo o bootstrap. Mas uma vez vamos usar o npm para realizar tal procedimento,
como no exemplo do comando a seguir.
$ npm install bootstrap --save

Aps instalar o bootstrap, podemos adicion-lo ao documento html, conforme o


exemplo a seguir.

Captulo 1 - Preparando o ambiente

18

<html ng-app>
<head>
<title>AngularJS</title>
<link rel="stylesheet" href="node_modules/bootstrap/css/boot\
strap.min.css">
<script src="node_modules/angularjs/angular.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js\
"></script>
</head>
<body>
</body>
</html>

Ou seja, teremos ao longo do desenvolvimento de nossas aplicaes a criao e


referncia de diversos arquivos que devero ser includos no documento HTML. A
princpio podemos deixar desta forma a organizao do arquivo index.html, caso
deseje partir para o entendimento do AngularJS, mas certifique-se de voltar neste
captulo quando puder, pois o prximo captulo importante para a organizao do
seu projeto.

Otimizando o seu projeto


Como vimos no html anterior, temos dois javascripts que sero adicionados ao
documento html. Em um projeto real, pode-se chegar a mais de dez arquivos,
contando com cdigo javascript e css. Cada arquivo deste uma requisio que
browser faz ao servidor, e em ambiente de produo temos que nos preocupar com
esta carga. O ideal, neste aspecto, juntar todos os arquivos javascript em um s,
fazendo com que somente uma requisio seja feita para carregar todo o javascript
da pgina.
Ento, resta a voc, a cada alterao de verso ou a cada incluso de um novo arquivo
js, junt-lo em um nico arquivo. Neste ponto devemos concordar que esta tarefa
muito tediosa, e possivelmente resultar em erros se for realizada manualmente.
Neste contexto entram os automatizadores de tarefas, como o grunt ou o gulp. Como
o gulp mais rpido e mais fcil de escrever, vamos fazer uma pequena abordagem

Captulo 1 - Preparando o ambiente

19

sobre ele, lembrando que o gulp nao o objeto principal de nossa obra, por isso
vamos criar algo bsico apenas para demonstrar a ferramenta.
O gulp uma biblioteca gerenciada pelo npm, ento podemos instal-la da seguinte
forma:
$ sudo npm install gulp -g

Perceba que existe um novo parmetro na instalao do gulp, que -g, indicando
que tal biblioteca deve ser instalada globalmente no sistema, j que usaremos o gulp
em qualquer tipo de projeto criado.
Aps instalar o gulp globalmente, preciso dizer ao nosso projeto siteangular que
usaremos esta biblioteca. Mas antes disso vamos analisar um ponto importante na
sua instalao. Perceba que o gulp uma ferramenta que vai automatizar alguns
processos que ns desenvolvedores deveramos ter feito, como unir vrios arquivos
javascript em um nico. Em nenhum momento o gulp ser usado pelo navegador,
pelos nossos sistemas e pelos clientes que usamo o nosso sistema. Isso torna ogulp
uma biblioteca que deve ser usada somente no desenvolvimento do sistema, e no
em produo.
Com isso, precisamos dizer ao projeto que o gulp usado apenas no desenvolvimento,
e isso feito atravs do atributo --save-dev que ser utilizado substituindo o
parmetro --save. Ento, para instalar o gulp em nosso projeto, faremos:
$ npm install gulp --save-dev

Observe que o arquivo package.json possui a referncia do gulp ao modo dev. Alm
do gulp, tambm precisamos do gulp-concat pois ser ele que ir concatenar os
arquivos javascript. Para instal-lo, faa:
$ sudo npm install gulp-concat -g
$ npm install gulp-concat --save-dev

Com todas as bibliotecas prontas, vamos iniciar a rotina para juntar todos os
arquivos. Isso feito atravs de um arquivo chamado gulpfile.js, que deve estar
na raiz do seu projeto.
A princpio, escreva o seguinte cdigo:

Captulo 1 - Preparando o ambiente

20

/siteangular/gulpfile.js

var gulp = require('gulp');


var concat = require('gulp-concat');
//Cria a tarefa default
gulp.task('default',function(){
});

Neste arquivo, criamos duas variveis, gulp e concat, e ento usamos o mtodo task
da varivel gulp para criar uma tarefa, que inicialmente no faz nada. Perceba que a
criao da varivel gulp usa o mtodo require, que no um mtodo do javascript,
mas sim do node.
Salve o arquivo e abra o terminal, e ento digite o seguinte comando:
$ gulp
[22:56:25] Using gulpfile ~/siteangular/gulpfile.js
[22:56:25] Starting 'default'...
[22:56:25] Finished 'default' after 57 s

O comando gulp ir automaticamente executar a tarefa default criada. Nesta tarefa,


vamos ento concatenar todos os javascripts e gerar um novo arquivo, que ser
chamado de script.min.js. Altere o arquivo gulpfile.js para o seguinte cdigo.
var gulp = require('gulp');
var concat = require('gulp-concat');
var js = [
'./node_modules/angular/angular.min.js',
'./node_modules/bootstrap/dist/js/bootstrap.min.js'
];
//Cria a tarefa default

Captulo 1 - Preparando o ambiente

21

gulp.task('default',function(){
gulp.src(js)
.pipe(concat('script.min.js'))
.pipe(gulp.dest('./js/'));
});

Agora inserimos alguns comandos na tarefa default, sendo o primeiro deles o


gulp.src, que indica um array com a fonte de arquivos que ser trabalhada. Aps o
src, usamos o mtodo pipe para conectar outro comando, o concat, que ir juntar
tudo aquilo que o src obteve. Depois, usamos novamente o pipe em conjunto com
o comando gulp.dest que ir salvar tudo que processado na pasta js. Ao executar
novamente o gulp, temos.
$ gulp
[23:34:59] Using gulpfile ~/siteangular/gulpfile.js
[23:34:59] Starting 'default'...
[23:34:59] Finished 'default' after 9.79 ms

Aps executar, verifique se o arquivo js\script.min.js foi criado, e atualize o


documento html conforme o cdigo a seguir.
<html ng-app>
<head>
<title>AngularJS</title>
<script src="js/script.min.js"></script>
</head>
<body>
</body>
</html>

O gulp possui muito mais funcionalidades, voc ver algumas delas ainda nesta obra,
mas lembre-se que nosso foco AngularJS.
Lembre que, ao atualizar a verso do AngularJS ou de qualquer outra biblioteca pelo
npm, deve-se executar novamente o gulp para que um novo arquivo script.min.js
seja criado.

Captulo 1 - Preparando o ambiente

22

Nesta obra, ns iremos concatenar somente as bibliotecas padro, como angular,


bootstrap, jquery entre outras. Os arquivos javascript do projeto no sero concatenados.

Captulo 2 - Conhecendo
AngularJS
Agora que temos o bsico em funcionamento, vamos aprender as principais regras
do AngularJS. Atravs delas ser possvel realizar diferentes tarefas que iro tornar
o desenvolvimento web muito mais simples e prazeroso.

DataBind
Uma das principais vantagens do AngularJS o seu DataBind. Este termo compreendido como uma forma de ligar automaticamente uma varivel qualquer a uma
outra. Geralmente, o DataBind usado para ligar uma varivel do JavaScript (ou um
objeto) a algum elemento do documento HTML.
No exemplo a seguir, estamos usando o AngularJS para ligar uma caixa de texto (o
elemento input do html) um cabealho.
<html ng-app>
<head>
<title>Hello World</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs\
/1.4.3/angular.min.js"></script>
</head>
<body>
Hello <input type="text" ng-model="yourName"/>
<hr/>
<h1>Hello {{yourName}}</h1>
</body>
</html>

23

Captulo 2 - Conhecendo AngularJS

24

Ver online
Alm da propriedade ng-app (linha 1), utilizamos para DataBind a propriedade ngmodel, para informar que este elemento estar ligado a uma varivel do AngularJS,
atravs da varivel yourName, na linha 8. Isso significa que qualquer alterao na
caixa de texto ir atualizar o valor da varivel.
Na linha 10, temos a chamada varivel atravs do comando {{yourName}}, que
imprime o valor da varivel. Como o DataBind dinmico, ao mesmo tempo
que algo escrito na caixa de texto, o seu referido bind realizado, atualizando
instantaneamente o seu valor.
Bind tambm pode ser realizado em objetos, mas antes de comear a aumentar a
complexidade do cdigo, vamos criar um controller para melhorar a organizao do
cdigo.

Controller
Um controller , na maioria das vezes, um arquivo JavaScript que contm funcionalidades pertinentes alguma parte do documento HTML. No existe uma regra para
o controller, como por exemplo ter um controller por arquivo HTML, mas sim uma
forma de sintetizar as regras de negcio (funes javascript) em um lugar separado
ao documento HTML.
Inicialmente, vamos criar um exemplo simples apenas para ilustrar como usar o
controller.
Uso do controller

<html ng-app="app">
<head>
<title>Hello World</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs\
/1.4.3/angular.min.js"></script>
<script src="simpleController.js"></script>
</head>
<body ng-controller="simpleController">
Hello <input type="text" ng-model="user.name"/>

Captulo 2 - Conhecendo AngularJS

25

<hr/>
<h1>Hello {{user.name}}</h1>
</body>
</html>

Ver online
Neste exemplo, aps incluir o arquivo simpleController.js, usamos a propriedade
ng-controller (linha 8) para dizer que, todo elemento abaixo do <body> ser
gerenciado pelo controller.
Na linha 9, adicionamos uma caixa de texto utilizando a propriedade ng-model e
atribumos o valor user.name. Neste caso, user um objeto e name uma propriedade
a este objeto. Na linha 11 temos o uso do bind no objeto user.
simpleController.js

var app = angular.module('app', []);


app.controller('simpleController', function ($scope) {
$scope.user = {name:"Daniel"}
});

Ver online
O arquivo simpleController.js contm a criao da app e a indicao do controller,
que criado de forma modularizada. O nome do arquivo javaScript no precisa ser o
mesmo, e com isso pode-se ter vrios controllers em somente um arquivo javaScript,
bastando apenas registr-lo na aplicao.
Perceba que, na linha 1, criamos um mdulo do angular na qual chamamos de app,
e depois registramos um controller este mdulo.
Neste controller, temos o parmetro $scope que um ponteiro para a aplicao em
si, ou seja, $scope significa a prpria pgina html. Como o controller foi declarado
no elemento <body>, $scope usado para todo este elemento. Usa-se o $scope para
criar uma conexo entre o model e a view, como foi feito no exemplo utilizando o
objeto user.

Captulo 2 - Conhecendo AngularJS

26

Mtodos do controller
O controller usado tambm para manipular regras de negcio que podem ou no
alterar os models. No exemplo a seguir, usamos o controller para definir uma varivel
e um mtodo para incrementar em 1 esta varivel.
Simples exemplo de contador

<html ng-app="app">
<head>
<title>Hello Counter</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs\
/1.4.3/angular.min.js"></script>
<script src="countController.js"></script>
</head>
<body ng-controller="countController">
<a href="#" ng-click="addOne()">Add 1</a>
<hr/>
<p>Counter value: {{counter}}</p>
</body>
</html>

Ver online
Neste exemplo, usamos a propriedade ng-click que ir chamar um mtodo dentro
do seu respectivo controller.

Captulo 2 - Conhecendo AngularJS

27

countController.js

var app = angular.module('app', []);


app.controller('countController', function ($scope) {
$scope.counter = 0;
$scope.addOne = function(){
$scope.counter++;
}
});

No controller, criamos a varivel counter e tambm o mtodo addOne, que manipula


a varivel, de forma que o seu valor refletido automaticamente na view (html)
atravs do dataBind.

Loops
Outra caracterstica do AngularJS utilizar templates para que se possa adicionar
contedo dinmico. Um loop sempre realizado atravs da propriedade ng-repeat e
obedece a uma varivel que geralmente um array de dados.
O exemplo a seguir ilustra este processo, utilizando a tag li para exibir uma lista
qualquer.
Usando loops

<html ng-app="app">
<head>
<title>Hello Counter</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs\
/1.4.3/angular.min.js"></script>
<script type="text/javaScript">
var app = angular.module('app', []);
app.controller('loopController', function ($scope) {

Captulo 2 - Conhecendo AngularJS

28

$scope.fruits = ['banana','apple','orange'];
});
</script>
</head>
<body ng-controller="loopController">
<ul>
<li ng-repeat="fruit in fruits">{{fruit}}</li>
</ul>
</body>
</html>

Ver online
Como visto neste exemplo, pode-se adicionar JavaScript no arquivo HTML, mas
no recomenda-se esta prtica. uma boa prtica de programao utilizar o
arquivo HTML apenas como a camada view, e o arquivo JavaScript como a
camada de controller, de acordo com os padres MVC.

Formulrios
Existem diversas caractersticas que um formulrio contm, tais como validao,
mensagens de erro, formato dos campos, entre outros. Neste caso, usamos o AngularJS de diferentes formas, e usamos vrios parmetros ng para controlar todo o
processo.
O exemplo a seguir exibe apenas algumas dessas propriedades, para que voc possa
entender como o processo funciona, mas durante a obra iremos verificar todos os
detalhes necessrios para construir um formulrio por completo.

Captulo 2 - Conhecendo AngularJS

29

Formulrio com validao

<html ng-app>
<head>
<title>Simple Form</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4\
.3/angular.min.js"></script>
</head>
<body>
<form name="myForm">
<span ng-show="myForm.$invalid">
Found erros in the form!
</span>
<input type="text" ng-model="name" name="Name" value="Your N\
ame" required/>
<button ng-disabled="myForm.$invalid"/>Save</button>
</form>
</body>
</html>

Ver online
Neste formulrio, usamos mais algumas propriedades, como por exemplo ng-show
que ir exibir ou no a tag <span> contendo a mensagem de erro do formulrio, e
ng-disabled que desativa o boto de submisso do formulrio.
O uso do myForm.$invalid um recurso do AngularJS que define se um formulrio
est invlido ou no. Como usamos uma caixa de texto com a propriedade required,
se o campo no estiver preenchido, o formulrio ficar invlido.

Rotas e Deep linking


O AngularJS possui um recurso chamado Deep Linking, que consiste em criar rotas
na URI do documento HTML para manipular partes do cdigo HTML de forma

Captulo 2 - Conhecendo AngularJS

30

independente, podendo assim separar ainda mais as camadas da sua aplicao. No


caso mais simples, suponha que exista uma lista de dados que so exibidos em uma
tabela, e que ao clicar em um item desta lista, deseja-se exibir um formulrio com os
dados daquela linha.
No documento HTML criado, existem dois componentes bem definidos pela aplicao. O primeiro a tabela com as informaes, e o segundo, o formulrio para edio
dos dados.
O uso de DeepLinking usa Ajax para carregar templates de forma dinmica, ento
necessrio que todo o exemplo seja testado em um servidor web.

Se organizarmos esta pequena aplicao em arquivos, teremos:


index.html
O arquivo principal da aplicao, que contm o cdigo html, o ng-app, a
incluso do AngularJS, entre outras propriedades.
app.js
Contm todo o cdigo javascript que define as regras de negcio da aplicao.
list.html
Contm a tabela que lista os dados.
form.html
Contm o formulrio de edio e criao de um novo registro.

Captulo 2 - Conhecendo AngularJS

31

index.html

<html ng-app="app">
<head>
<title>DeepLinking Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/\
angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/\
angular-route.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>DeepLink Example</h1>
<div ng-view></div>
</body>
</html>

Inicialmente criamos o arquivo index.html, que contm a chamada aos arquivos


javascript da aplicao. Alm dos arquivos javaScript, tambm usamos a propriedade
ng-app, que j aprendemos a usar em qualquer aplicao que use o framework.
Tambm adicionamos um segundo arquivo javascript, que responsvel pelo gerenciamento da rota, chamado de angular-route.js.

Ateno
Se voc olhar bem a incluso do arquivo javscript, ir perceber que inclumos o
arquivo angular.js e no angular.min.js .
Isso foi feito para mostrar que ambas os arquivos funcionam, mas o arquivo
minificado com a extenso .min.js incompreensvel para que possamos
detectar erros de javascript.
J o arquivo angular.js compreensvel para nossa leitura e os erros de javascript
que por ventura cometemos podero ser analisados com mais eficincia.

Captulo 2 - Conhecendo AngularJS

32

Resumindo, use o arquivo angular.min.js somente quando o seu sistema est


pronto e em produo. Caso contrrio, use o arquivo angular.js

Este mdulo criado atravs da definio de um nome para o ng-app, ficando desta
forma: ng-app="app". Assim, estamos criando um mdulo chamado App que deve
estar definido pela aplicao.
Como podemos ver, o arquivo index.html no tem nenhum contedo, apenas o
cabealho e uma div que possui a propriedade ng-view. Esta propriedade configura
o AngularJS para que toda a gerao de cdigo seja renderizada dentro desta tag.
Esta definio realizada no arquivo app.js, cuja parte inicial est descrita a seguir.
app.js

var app = angular.module('app',['ngRoute']);


app.config(['$routeProvider',function($routeProvider){
$routeProvider.
when('/',{controller:'listController', templateUrl:'list.html'}).
when('/edit/:name',{controller:'editController',templateUrl:'form.h\
tml'}).
when('/new',{controller:'newController', templateUrl:'form.html'}).
otherwise({redirectTo:'/'});
}]);
app.run(['$rootScope',function($rootScope){
$rootScope.fruits = ["banana","apple","orange"];
console.log('app.run');
}]);

Nesta primeira parte, usamos o mtodo angular.module para criar um mdulo, cujo
o nome app. O segundo parmetro a referncia ao mdulo ngRoute, que usado
para criar as rotas (lembre-se que ele deve ser incudo, conforme visto na linha 6 do
arquivo index.html).

Captulo 2 - Conhecendo AngularJS

33

Aps criar o mdulo e atribu-lo a varivel app, usamos o mtodo config para
configurar o mdulo, neste caso estamos configurando uma funcionalidade chamada
Router, que possui a funo de carregar templates e controllers de acordo com uma
URI, ou seja, um endereo repassado pelo navegador.
Na linha 5 temos a primeira configurao atravs do mtodo when, que informa ao
Router que, ao acessar a raiz do endereo web que o arquivo index.html est, deve
ser carregado o controller listController e o template list.html.
Tanto o template quanto o controller sero carregados no elemento html que
contm a propriedade ng-view do index.html.

Na linha 6 adicionamos mais uma rota, e agora configuramos que quando a URI for
/edit/:name, o controller editController e o template form.html sero carregados.
O atributo :name ser uma varivel que poder ser obtida no controller.
Tanto na linha 6 quanto na linha 7 usamos o mesmo template form.html que contm
um formulrio para edio ou insero de um registro.
Na linha 8, configuramos a rota padro da URI, que ativada quando nenhuma rota
configurada encontrada.
Na linha 11 usamos o mtodo app.run para configurar a varivel $scope da aplicao,
em um contexto global ao mdulo. Neste mtodo criamos a varivel fruits que
possui um contexto global aplicao.
Continuando no arquivo app.js, temos:

Captulo 2 - Conhecendo AngularJS

34

app.js

14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

app.controller('listController',function ($scope) {
console.log('listController');
});
app.controller('editController', function ($scope,$location,$routePa\
rams) {
$scope.title = "Editar Fruta";
$scope.fruit = $routeParams.name;
$scope.fruitIndex = $scope.fruits.indexOf($scope.fruit);
$scope.save = function(){
$scope.fruits[$scope.fruitIndex]=$scope.fruit;
$location.path('/');
}
});
app.controller('newController', function ($scope,$location,$routePar\
ams) {
$scope.title = "Nova Fruta";
$scope.fruit = "";
$scope.save = function(){
$scope.fruits.push($scope.fruit);
$location.path('/');
}
});

Criamos trs controllers para a aplicao, sendo que o primeiro, listController,


ainda no utilizado, mas pode ser til em um momento futuro.
Na linha 18 temos o controller editController que possui trs parmetros:

Captulo 2 - Conhecendo AngularJS

35

scope o escopo da aplicao que pode ser utilizada no template do controller


criado.
location Usada para realizar redirecionamentos entre as rotas
routeParams So os parmetros repassados pela URI
Na linha 19 preenchemos a varivel $scope.title, para que o ttulo do formulrio
mude, lembrando que o formulrio usado tanto para criar um novo registro quando
edit-lo.
Na linha 20 pegamos como parmetro o nome da fruta que foi repassada pela URI.
Este valor pego de acordo com o parmetro :name criado pela rota, na linha 6.
Na linha 22 obtemos o ndice do item que est para ser editado. Usamos isso para
poder editar o item no mtodo save criado logo a seguir.
Na linha 24 temos o mtodo save que usado para salvar o registro no array global.
Em uma aplicao real estaramos utilizando ajax para que o servidor persistisse
o dado. Na linha 26 redirecionamos a aplicao e com isso outro template ser
carregado.
Na linha 30, criamos o controller newController, que semelhante ao editController e possui o mtodo save onde um novo registro inserido no array fruits.
Vamos agora analisar o arquivo list.html que um template e carregado diretamente pelo roteamento do mdulo (app.js, linha 5).
list.html

<h2>Fruits ({{fruits.length}})</h2>
<ul>
<li ng-repeat="fruit in fruits"><a href="#/edit/{{fruit}}">{{fruit}\
}</a></li>
</ul>
<a href="#/new">New</a>

O template no necessita informar o seu controller, pois isso j foi feito pelo mdulo
do AngularJS (app.js, linha 5). Como a varivel fruits possui um escopo global, ela
pode ser usada pelo template e na linha 1, exibindo quantos itens existem no array.

Captulo 2 - Conhecendo AngularJS

36

Na linha 3 iniciamos a repetio dos elementos que pertencem ao array fruits e


inclumos na repetio um link para #/edit/. Esta a forma com que o roteamento
do AngularJS funciona, iniciando com # e repassando a URI logo a seguir. Na linha
5, criamos outro link, para incluir um novo registro. Novamente usamos a URI que
ser utilizada pelo roteamento do AngularJS.
O ltimo arquivo deste pequeno exemplo o formulrio que ir editar ou inserir um
novo registro.
form.html

<h2> {{title}} </h2>


<form name="myForm">
<input type="text" ng-model="fruit" name="fruit" required>
<button ng-click="save()" ng-disabled="myForm.$invalid">Save</butto\
n>
</form>
<a href="#/">Cancel</a>

Na linha 1 usamos o {{title}} para inserir um ttulo que criado pelo controller. O
formulrio possui apenas um campo cujo ng-model fruit que ser utilizado pelo
controller (app.js, linhas 25 e 35). Neste formulrio tambm utilizamos ng-disabled
para que o boto seja ativado somente se houver algum texto digitado na caixa de
texto. O boto save possui a propriedade ng-click, que ir chamar o mtodo save()
do controller.

Como testar este exemplo


O exemplo de deeplinking que exibimos deve ser testado atravs de um servidor web,
para que as requisies ajax possam ser realizadas com sucesso. Se voc instalou
o Apache, basta realizar o download do cdigo fonte desta obra e copiar a pasta
angularjs-deeplink. Caso esteja utilizando o pacote http-server do node, basta
realizar o download do projeto, navegar at a pasta angularjs-deeplink e executar
o comando http-server ./.

Captulo 3 - Conectando
AngularJS ao servidor
Agora que conhecemos um pouco sobre o AngularJS, podemos entender como
funciona a sua comunicao com o servidor. Assim como feito com jQuery e at
com javascript puro, a melhor forma de obter e enviar dados para o servidor atravs
de Ajax e o formato de dados para se usar nesta comunicao JSON.
Existem diversas formas de conexo entre cliente (neste caso, AngularJS) e servidor,
e nesta obra estaremos utilizando um conceito chamado RESTful, que uma
comunicao HTTP que segue um padro bastante simples, utilizando cabealhos
HTTP como POST, GET, PUT, DELETE.
Na forma mais simples de comunicao de dados, onde temos um objeto e as aes de
criar, editar, listar e deletar objetos, resumimos o padro RESTful s seguintes aes:
Mtodo

http://site.com/produtos

GET

Listar todos os produtos

POST

Editar uma lista de produtos

PUT

Criar um novo produto na lista de produtos

DELETE

Excluir uma lista de produtos

Mtodo

http://site.com/produto/1

GET

Obter o produto cujo id 1

POST

Em teoria nao possui funcionalidade

PUT

Edita ou cria um novo produto

DELETE

Exclui um produto cujo o id 1

As tabelas acima so uma sugesto que pode ser seguido ou no. Mesmo se
37

Captulo 3 - Conectando AngularJS ao servidor

38

simplificarmos os mtodos acima, o mnimo que podemos estabelecer que mtodos


GET no alterem dados, pois um mtodo GET pode ser facilmente acessado atravs
do navegador.
O AgularJS fornece duas formas distintas de trabalhar com estas conexes. A
primeira delas, e mais simples, atravs do servio $http, que pode ser injetado em
um controller. A segunda forma atravs do servio $resource que uma abstrao
RESTful, funcionando como um data source.

Uso do $http
O uso do $http no deve ser ignorado, mesmo que o $resource seja mais poderoso.
Em aplicaes simples, ou quando deseja obter dados de uma forma rpida, deve-se
utilizar $http.
$http uma implementao ajax atravs do XMLHttpRequest utilizando JSONP.
Iremos sempre usar JSON para troca de dados entre cliente e servidor.

A forma mais simples de uso do $http est descrito no exemplo a seguir:


$http na sua forma mais simples

$http({method:'GET', url:'/someUrl'}).success(function(data){
});

O mtodo get pode ser generalizado para:

Captulo 3 - Conectando AngularJS ao servidor

39

$http.get

$http.get('/someUrl').success(function(data){
});

Assim como existe o get, existem os outros tambm, conforme a lista a seguir:

$http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp

Para todos estes mtodos, o AngularJS configura automaticamente o cabealho da


requisio HTTP. Por exemplo, em uma requisio POST os cabealhos preenchidos
so:
Accept: application/json, text/plain, * / *
X-Requested-With: XMLHttpRequest
Content-Type: application/json
Alm dos cabealhos, o AngularJS tambm serializa o objeto JSON que repassado
entre as requisies. Se um objeto enviado para o servidor, ele convertido para
JSON. Se uma string JSON retorna do servidor, ela convertida em objeto utilizando
um parser JSON.

Exemplo com $http


Vamos criar um exemplo utilizando o servio $http, para obter uma lista de dados
e preencher uma tabela. Inicialmente, criamos um arquivo simples no servidor que,
em teoria, retornaria com informaes de uma lista de objetos em JSON. Como ainda
no estamos trabalhando com banco de dados, esta lista ser criada diretamente no
arquivo, em formato json.

Captulo 3 - Conectando AngularJS ao servidor

40

listFruits.html

{ "fruits":
[
{
"id": 1,
"name": "Apple",
"color": "Red"
},
{
"id": 2,
"name": "Banana",
"color": "Yellow"
},
{
"id": 3,
"name": "watermelon",
"color": "Green"
},
{
"id": 4,
"name": "Orange",
"color": "Orange"
}
]
}

Neste exemplo, estamos inserindo o arquivo listFruits.html na pasta c:\wamp\www\httpexample\ e podemos acess-lo atravs da url http://localhost/http-example/listFruits.ht
O prximo passo criar o arquivo index.html, que contm a camada view do
exemplo.

Captulo 3 - Conectando AngularJS ao servidor

41

index.html

<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4\
.3/angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="appController">
<button ng-click="getData()">Get Data</button>
<h2 ng-show="fruits.length>0">Fruits</h2>
<ul>
<li ng-repeat="fruit in fruits" >
{{fruit.id}} - {{fruit.name}} ({{fruit.color}})
</li>
</ul>
</div>
</body>
</html>

No arquivo index.html no temos nenhuma novidade, pois a regra de negcio est


no seu controller, onde realizamos o Ajax.
app.js

var app = angular.module('app',[]);


app.controller('appController',function ($scope,$http){
$scope.fruits = Array();
$scope.getData = function(){
$http.get("listFruits.html").success(function(data){
$scope.fruits = data.fruits;
console.log($scope.fruits);
}).error(function(data){

Captulo 3 - Conectando AngularJS ao servidor

42

alert("Error...");
console.log(data);
});
}
});

No controller da aplicao, criamos o mtodo getData, que executado quando


clicamos no boto GetData da view (index.html). Neste mtodo, usamos a varivel
$http para as requisies Ajax. Repare que ela repassada pelo parmetro do
controller, aps o $scope. Neste caso, o AngularJS encarrega-se de injetar o servio
http nesta varivel.
Na linha 6 temos o mtodo $http.get onde estamos realizando uma requisio
Ajax acessando o arquivo listFruits.html, que contm a resposta Json. Neste
mtodo, podemos concatenar outro mtodo chamado success, que executado se
a requisio HTTP GET for realizada com sucesso. Neste caso, a reposta do servidor
estar armazenada na varivel data, e poderemos acessar a varivel data.fruits
que contm o array de objetos que sero usados no loop da view.
Na linha 8 temos o uso do console.log que pode ser usado em conjunto com o
Firebug (Firefox) ou com o Google Chrome, para verificar resultados no console da
janela developer tools. Pode-se usar o developer tools para analisar as chamadas
ajax tambm, geralmente na aba Network.

Com este simples exemplo conseguimos mostrar como fcil realizar uma requisio
Ajax para obter dados do servidor. Pode-se usar o servio $http para toda a sua
aplicao, mas quando estamos utilizando RESTfull, existe outro servio que torna o
acesso ao servidor mais abstrato, chamado de resource, no qual veremos a seguir.

Uso do $resource
Aprendemos a realizar chamadas Ajax atravs do $http e caso haja necessidade,
podemos abstrair ainda mais a forma como o AngularJS acessa o servidor.

Captulo 3 - Conectando AngularJS ao servidor

43

Neste contexto entra o $resource que estabelece um padro de comunicao


RESTfull entre a aplicao e o servidor.
Para que possamos usar esta biblioteca preciso adicionar o arquivo angularresource.js no documento HTML. Ou seja, alm da biblioteca padro tambm
inclumos a biblioteca resource, conforme o exemplo a seguir.
Adicionando a biblioteca angular-resource

<html ng-app>
<head>
<title>Lista de compras</title>
<script src="https://ajax.googleapis.com/ajax/libs/angular\
js/1.4.3/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs\
/1.4.3/angular-resource.js"></script>
</head>
<body>
</body>
</html>

Exemplo simples com $resource


Com a biblioteca devidamente instalada, devemos carreg-la, atravs de um parmetro na criao do mdulo da aplicao. Para acompanhar este processo, vamos criar
um exemplo simples, utilizando operaes CRUD com o $resource.

Captulo 3 - Conectando AngularJS ao servidor

44

index.html

<html ng-app="app">
<head>
<title>Lista de compras</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/\
angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/\
angular-resource.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="phoneController">
<input type="text" ng-model="idPhone" value="1"/>
<button ng-click="getPhoneById()">GetPhone By Id</button>
<hr/>
<button ng-click="getPhones()">GetPhones</button>
<hr/>
<button ng-click="savePhone()">Save Phone</button>
<hr/>
<button ng-click="deletePhone()">Delete Phone</button>
</body>
</html>

Este cdigo no apresenta nenhuma novidade. Estamos criando o module do AngularJS chamado app e criamos um formulrio com alguns botes no controller
PhoneController.

Captulo 3 - Conectando AngularJS ao servidor

45

app.js

var $app = angular.module('app',['ngResource']);


$app.controller("phoneController",function ($scope,$resource){
var Phone = $resource("/phones/:phoneId");
$scope.getPhoneById = function(){
Phone.get({phoneId:$scope.idPhone},function(data){
$scope.phone=data;
});
}
$scope.getPhones = function(){
Phone.query(function (data){
$scope.phones = data;
});
}

$scope.savePhone = function(){
p = new Phone();
p.number="1111-2222"
p.save();
}
$scope.deletePhone = function(){
Phone.delete({phoneId:10});
}
});

Na definio do phoneController adicionamos a varivel $resource como parmetro da funo, que ser injetada pelo AngularJS. Usamos $resource para definir a

Captulo 3 - Conectando AngularJS ao servidor

46

criao da varivel Phone. Esta varivel criada e configurada como um resource,


sendo o primeiro parmetro a url de acesso ao servidor.
Na linha 7 temos o mtodo getPhoneById que chamado pela view e usa Phone.get
para realizar uma chamada Ajax ao servidor, conforme a figura a seguir.

Uso do Ajax pelo resources

O mesmo acontece com os outros mtodos, e como podemos ver na figura a


seguir, quando realizamos um save realizado um POST no servidor, segundo as
especificaes do RESTfull.

Captulo 3 - Conectando AngularJS ao servidor

47

Uso do Ajax pelo resources

Nesta figura, temos em detalhe o POST e a varivel number sendo enviada como json
(e no na URL do POST).
Lembre-se que, para testar o resources, voc precisa utilizar um servidor web.

Captulo 3 - Conectando AngularJS ao servidor

48

Este exemplo est em sua forma mais simples e possivelmente o resource no sera
criado em um controller da aplicao.