HTTP, JSON, REST e AJAX com AngularJS

Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br
HTTP, JSON, REST e AJAX
com AngularJS

“Transformar equipes de desenvolvimento de software”
http://www.agilecode.com.br

Rodrigo Branas
rodrigo.branas@agilecode.com.br
http://www.agilecode.com.br
• Desenvolvendo Software na Gennera
• Criando treinamentos na Agile Code
• Escrevendo na Java Magazine e PacktPub
• Palestrando sobre desenvolvimento de
software em eventos, universidades e
empresas

Certificações
Formação Acadêmica
Ciências da Computação – UFSC
Gerenciamento de Projetos - FGV
SCJA, SCJP, SCJD, SCWCD, SCBCD, PMP, MCP e CSM
Experiência
Há mais de 12 anos desenvolvendo software na
plataforma Java com as empresas: EDS, HP, NET,
Citibank, GM, Dígitro, Softplan, OnCast, Senai,
VALE, RBS, Unimed, Globalcode, V.Office, Suntech,
WPlex e Gennera.

• Há mais de 5 anos liderando pessoas.
• Mais de 2000 horas em sala de aula.
• Mais de 100 apresentações em eventos.
• 6 artigos escritos para revistas.
• 1 livro.
• Mais de 500 profissionais treinados.
• Criação de 22 palestras.
• Criação de 10 treinamentos.
• Criação de mais de 3.000 slides.

O que é um protocolo de
comunicação?

Alguns protocolos famosos:
• TCP – Transmission Control Protocol
• UDP – User Datagram Protocol
• ICMP – Internet Control Message Protocol
• POP3 – Post Office Protocol
• SMTP – Simple Mail Transfer Protocol
• FTP – File Transfer Protocol
• IMAP – Internet Message Access Protocol
• HTTP – Hypertext Transfer Protocol

HTTP
Hypertext Transfer Protocol

Baseado em requisições e respostas

GET /gformulario/portadores?nocache=1396977196206
HTTP/1.1 Host: localhost:8080
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:27.0) Gecko/20100101
Firefox/27.0
Accept: application/json, text/plain, */*
Accept-Language: pt-BR,pt;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Cookie: JSESSIONID=FA4FF827FF804ED0095F20F61054549C;
Requisição

HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
X-Powered-By: Servlet 2.4; JBoss-4.2.3.GA (build: SVNTag=JBoss_4_2_3_GA
date=200807181417)/JBossWeb-2.0
Content-Type: application/json;charset=UTF-8
Transfer-Encoding: chunked
Date: Tue, 08 Apr 2014 17:13:16 GMT
[{"dataCriacao":1385989325053,"dataAtualizacao":1385989325053,"id":1,"banco":"3
41","agencia":"999","conta":"999999","carteira":"10","codigoCedente":"","faixaInicio
":100000,"faixaFim":200000,"faixaAtual":100006}]
Resposta

Métodos do protocolo HTTP
• GET
• POST
• PUT
• DELETE
• HEAD
• TRACE
• OPTIONS
• CONNECT

Que tipo de conteúdo o
protocolo HTTP retorna?

HTML não é nada bom para
integrar sistemas!

<?xml version="1.0"?>
<soap:Envelope xmlns:soap="http://www.w3.org/2003/05/soap-envelope">
<soap:Header> </soap:Header>
<soap:Body>
<m:GetStockPrice xmlns:m="http://www.example.org/stock">
<m:StockName>IBM</m:StockName>
</m:GetStockPrice>
</soap:Body>
</soap:Envelope>
Conteúdo de uma requisição SOAP

<?xml version="1.0"?>
<soap:Envelope xmlns:soap="http://www.w3.org/2003/05/soap-envelope">
<soap:Body>
<m:GetStockPriceResponse>
<m:Price>34.5</m:Price>
</m:GetStockPriceResponse>
</soap:Body>
</soap:Envelope>
Conteúdo de uma resposta SOAP

[
{
"dataCriacao": 1385989325053,
"dataAtualizacao": 1385989325053,
"id": 1,
"cnpj": "02696435000148",
"banco": "341",
"agencia": "1573",
"conta": "248844",
"carteira": "175",
"faixaInicio": 100000,
"faixaFim": 200000,
"faixaAtual": 100006,
}
]
Conteúdo de uma resposta JSON

Como podemos fazer para
acessar o Web Service?

http://www.manager.com/getContent.asp?idContent=10
http://www.school.com/deleteStudent?id=3
http://www.market.com/listProducts?category=eletronics
http://www.airport.com/flight.do?number=8999
http://www.cinema.com/showMovies?category=comedy
http://www.library.com/index.php?idBook=10
http://www.travel.com/destinations?country=France

REST
Representational State Transfer

Princípios de um Web Service REST
• Identifique as entidades envolvidas

• Crie as rotas para cada entidade

• Utilize substantivos para cada rota, evitando o uso de
verbos

verbos
• Categorize cada entidade em relação aos métodos
disponíveis (GET, POST, PUT e DELETE)

verbos
• Todos os recursos disponíveis utilizando o método GET não
devem ter efeitos colaterais

verbos
• Forneça a possibilidade de explorar cada recurso
disponível, navegando em sua estrutura hierarquica

verbos
• Forneça a possibilidade de explorar cada recurso
disponível, navegando em sua estrutura hierarquica
• Documente a API e disponibilize para todos os envolvidos
no projeto

Criando um Web Service REST
com Node.js e Express

Instando o Express
package.json
{
"name": "contatos",
"description": "",
"version": "0.0.1",
"dependencies": {
"express": "3.x"
}
}
npm install

1. var express = require('express');

2. var app = express();

3.
4. app.get('/contatos', function(req, res) {
5. });

3.
5. var contatos = [];
6. });

3.
5. var contatos = [{nome: "João", telefone: "98766789"}];
6. });

3.
5. var contatos = [{nome: "João", telefone: "98766789"},
6. {nome: "Pedro", telefone: "99879999"}];
7. });

3.
6. {nome: "Pedro", telefone: "99879999"},
7. {nome: "Mateus", telefone: "99998888"}];
8. });

3.
8. res.json(contatos);
9. });

3.
9. });
10.
11. app.listen(3412);

3.
9. });
10.

3.
7.
10. });
11.

3.
7.
10. });
11.
12. app.post('/contatos', function(req, res) {
13. });
14.

3.
7.
10. });
11.
13. var contato = req.body;
14. });
15.

3.
7.
10. });
11.
14. contatos.push(contato);
15. });
16.

3.
7.
10. });
11.
15. res.json(true);
16. });
17.

3. app.use(express.bodyParser());
4.
8.
11. });
12.
16. res.json(true);
17. });
18.

3. app.use(express.bodyParser());
4. app.use(express.static(__dirname + '/public'));
5.
9.
12. });
13.
17. res.json(true);
18. });
19.

Consumindo um Web Service com
AJAX no AngularJS

Como podemos nos comunicar
por HTTP a partir do browser?

AJAX
Assynchronous JavaScript and XML

$http
O serviço $http realiza a comunicação por
meio do objeto XMLHttpRequest. Podemos
utilizar os seguintes métodos:
• get (url, config)
• post (url, data, config)
• put (url, data, config)
• delete (url, config)
• head (url, config)
• jsonp (url, config)

1. app.controller("listaTelefonicaCtrl", function ($scope) {
2. $scope.titulo = "Lista Telefônica";
3.
4. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
5. {nome: "André", telefone: "99767899"},
6. {nome: "Carlos", telefone: "99987689"}];
7.
8. $scope.adicionarContato = function (contato) {
9. $scope.contatos.push(angular.copy(contato));
10. delete $scope.contato;
11. };
12.
13. $scope.operadoras = ["Vivo", "Oi", "Tim"];
14. });

3.
4. $scope.contatos = [];
5.
9. };
10.
12. });

3.
5.
6. $scope.carregarContatos = function () {
7. };
8.
12. };
13.
15. });

1. app.controller("listaTelefonicaCtrl", function ($scope, $http) {
3.
5.
7. };
8.
12. };
13.
15. });

3.
5.
7. $http.get();
8. };
9.
13. };
14.
16. });

3.
5.
7. $http.get("/contatos");
8. };
9.
13. };
14.
16. });

3.
5.
7. $http.get("/contatos").success();
8. };
9.
13. };
14.
16. });

3.
5.
7. $http.get("/contatos").success(function (data, status) {
8. });
9. };
10.
14. };
15.
17. });

3.
5.
8. $scope.contatos = data;
9. });
10. };
11.
15. };
16.
18. });

3.
5.
9. }).error();
10. };
11.
15. };
16.
18. });

3.
5.
9. }).error(function (data, status) {
10. });
11. };
12.
16. };
17.
19. });

3.
5.
10. console.error(data);
11. });
12. };
13.
17. };
18.
20. });

3.
5.
11. });
12. };
13.
17. };
18.
20.
21. $scope.carregarContatos()
22. });

3.
5.
11. });
12. };
13.
15.
17. };
18.
20.
22. });

3.
5.
11. });
12. };
13.
15. $http.post();
17. };
18.
20.
22. });

3.
5.
11. });
12. };
13.
15. $http.post("/contatos");
17. };
18.
20.
22. });

3.
5.
11. });
12. };
13.
15. $http.post("/contatos", contato);
17. };
18.
20.
22. });

3.
5.
11. });
12. };
13.
15. $http.post("/contatos", contato).success(function (data, status) {
16. });
18. };
19.
21.
23. });

3.
5.
11. });
12. };
13.
16. $scope.carregarContatos();
17. });
19. };
20.
22.
24. });

3.
5.
11. });
12. };
13.
18. });
19. };
20.
22.
24. });

3.
5.
11. });
12. };
13.
19. });
20. };
21.
23.
25. });

3.
5.
11. });
12. };
13.
20. });
21. };
22.
24.
26. });

HTTP, JSON, REST e AJAX com AngularJS

Mais conteúdo relacionado

Mais procurados (20)

Destaque (20)

Semelhante a HTTP, JSON, REST e AJAX com AngularJS (20)

Mais de Rodrigo Branas (10)

Último (6)

HTTP, JSON, REST e AJAX com AngularJS

Notas do Editor