Livro Angular JS

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
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/.
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.
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.
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>
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.
14
HTML para o AngularJS
<html ng-app>
<head>
<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 :
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.
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
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>
<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.
18
<html ng-app>
<head>
<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
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:
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
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>
<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.
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>
</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="simpleController.js"></script>
</head>
<body ng-controller="simpleController">
Hello <input type="text" ng-model="user.name"/>
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.
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="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.
27
countController.js

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 type="text/javaScript">
app.controller('loopController', function ($scope) {
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.
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
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.
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>
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.
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).
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:
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:
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.
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
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:
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.
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.
41
index.html
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4\
.3/angular.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){
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.
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>
/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.
44
index.html
<html ng-app="app">
<head>
<title>Lista de compras</title>
angular.min.js"></script>
angular-resource.min.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.
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
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.
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.
48
Este exemplo est em sua forma mais simples e possivelmente o resource no sera
criado em um controller da aplicao.

Livro Angular JS

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Livro Angular JS

Caricato da

Copyright:

Formati disponibili

AngularJS na prtica (PT-BR)

Crie aplicaes web com AngularJS

Tweet Sobre Esse Livro!

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

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

Captulo 2 - Conhecendo AngularJS .

Captulo 3 - Conectando AngularJS ao servidor

Uma nota sobre PIRATARIA

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

Uma nota sobre a nova verso

Captulo 1 - Preparando o ambiente

Captulo 1 - Preparando o ambiente

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

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

Captulo 1 - Preparando o ambiente

Instalando o servidor web

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

Isso ir produzir um resultado semelhante ao exibido a seguir:

Captulo 1 - Preparando o ambiente

Captulo 1 - Preparando o ambiente

Realizando o download da biblioteca manualmente

Captulo 1 - Preparando o ambiente

HTML para o AngularJS

Instalao atravs do npm

Captulo 1 - Preparando o ambiente

Agora vamos instalar o AngularJS, atravs do seguinte comando:

Captulo 1 - Preparando o ambiente

Verifique o arquivo package.json aps instalar o angular.

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

Captulo 1 - Preparando o ambiente

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

Instalando mais bibliotecas

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

Captulo 1 - Preparando o ambiente

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

Otimizando o seu projeto

Captulo 1 - Preparando o ambiente

Captulo 1 - Preparando o ambiente

var gulp = require('gulp');

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

Captulo 1 - Preparando o ambiente

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

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

Captulo 1 - Preparando o ambiente

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

Captulo 2 - Conhecendo AngularJS

Captulo 2 - Conhecendo AngularJS

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

Captulo 2 - Conhecendo AngularJS

Captulo 2 - Conhecendo AngularJS

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

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

Captulo 2 - Conhecendo AngularJS

Captulo 2 - Conhecendo AngularJS

Formulrio com validao

Rotas e Deep linking

Captulo 2 - Conhecendo AngularJS

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

Se organizarmos esta pequena aplicao em arquivos, teremos:

Captulo 2 - Conhecendo AngularJS

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