HTTP, JSON, REST e AJAX com AngularJS

12,932 views

Published on

Comunicando aplicações AngularJS com HTTP, JSON e AJAX

1 Comment
25 Likes
Statistics
Notes
  • muito bom era isso que não entendia no curso de AngularJs
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
12,932
On SlideShare
0
From Embeds
0
Number of Embeds
4,290
Actions
Shares
0
Downloads
0
Comments
1
Likes
25
Embeds 0
No embeds

No notes for slide
  • Telégrafo - 1836
  • HTTP, JSON, REST e AJAX com AngularJS

    1. 1. Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br HTTP, JSON, REST e AJAX com AngularJS
    2. 2. “Transformar equipes de desenvolvimento de software” http://www.agilecode.com.br
    3. 3. 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
    4. 4. 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.
    5. 5. • 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.
    6. 6. O que é um protocolo de comunicação?
    7. 7. 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
    8. 8. HTTP Hypertext Transfer Protocol
    9. 9. Tim Berners-Lee
    10. 10. Baseado em requisições e respostas
    11. 11. 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
    12. 12. 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
    13. 13. Métodos do protocolo HTTP • GET • POST • PUT • DELETE • HEAD • TRACE • OPTIONS • CONNECT
    14. 14. Que tipo de conteúdo o protocolo HTTP retorna?
    15. 15. HTML
    16. 16. HTML não é nada bom para integrar sistemas!
    17. 17. Web Services
    18. 18. XML, SOAP, WSDL e UDDI
    19. 19. <?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
    20. 20. <?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
    21. 21. JSON JavaScript Notation
    22. 22. [ { "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
    23. 23. Como podemos fazer para acessar o Web Service?
    24. 24. 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
    25. 25. REST Representational State Transfer
    26. 26. Princípios de um Web Service REST • Identifique as entidades envolvidas
    27. 27. Princípios de um Web Service REST • Identifique as entidades envolvidas • Crie as rotas para cada entidade
    28. 28. 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
    29. 29. 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 • Categorize cada entidade em relação aos métodos disponíveis (GET, POST, PUT e DELETE)
    30. 30. 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 • Categorize cada entidade em relação aos métodos disponíveis (GET, POST, PUT e DELETE) • Todos os recursos disponíveis utilizando o método GET não devem ter efeitos colaterais
    31. 31. 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 • Categorize cada entidade em relação aos métodos disponíveis (GET, POST, PUT e DELETE) • Todos os recursos disponíveis utilizando o método GET não devem ter efeitos colaterais • Forneça a possibilidade de explorar cada recurso disponível, navegando em sua estrutura hierarquica
    32. 32. 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 • Categorize cada entidade em relação aos métodos disponíveis (GET, POST, PUT e DELETE) • Todos os recursos disponíveis utilizando o método GET não devem ter efeitos colaterais • 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
    33. 33. Criando um Web Service REST com Node.js e Express
    34. 34. Express
    35. 35. Instando o Express package.json { "name": "contatos", "description": "", "version": "0.0.1", "dependencies": { "express": "3.x" } } npm install
    36. 36. 1. var express = require('express');
    37. 37. 1. var express = require('express'); 2. var app = express();
    38. 38. 1. var express = require('express'); 2. var app = express(); 3. 4. app.get('/contatos', function(req, res) { 5. });
    39. 39. 1. var express = require('express'); 2. var app = express(); 3. 4. app.get('/contatos', function(req, res) { 5. var contatos = []; 6. });
    40. 40. 1. var express = require('express'); 2. var app = express(); 3. 4. app.get('/contatos', function(req, res) { 5. var contatos = [{nome: "João", telefone: "98766789"}]; 6. });
    41. 41. 1. var express = require('express'); 2. var app = express(); 3. 4. app.get('/contatos', function(req, res) { 5. var contatos = [{nome: "João", telefone: "98766789"}, 6. {nome: "Pedro", telefone: "99879999"}]; 7. });
    42. 42. 1. var express = require('express'); 2. var app = express(); 3. 4. app.get('/contatos', function(req, res) { 5. var contatos = [{nome: "João", telefone: "98766789"}, 6. {nome: "Pedro", telefone: "99879999"}, 7. {nome: "Mateus", telefone: "99998888"}]; 8. });
    43. 43. 1. var express = require('express'); 2. var app = express(); 3. 4. app.get('/contatos', function(req, res) { 5. var contatos = [{nome: "João", telefone: "98766789"}, 6. {nome: "Pedro", telefone: "99879999"}, 7. {nome: "Mateus", telefone: "99998888"}]; 8. res.json(contatos); 9. });
    44. 44. 1. var express = require('express'); 2. var app = express(); 3. 4. app.get('/contatos', function(req, res) { 5. var contatos = [{nome: "João", telefone: "98766789"}, 6. {nome: "Pedro", telefone: "99879999"}, 7. {nome: "Mateus", telefone: "99998888"}]; 8. res.json(contatos); 9. }); 10. 11. app.listen(3412);
    45. 45. 1. var express = require('express'); 2. var app = express(); 3. 4. app.get('/contatos', function(req, res) { 5. var contatos = [{nome: "João", telefone: "98766789"}, 6. {nome: "Pedro", telefone: "99879999"}, 7. {nome: "Mateus", telefone: "99998888"}]; 8. res.json(contatos); 9. }); 10. 11. app.listen(3412);
    46. 46. 1. var express = require('express'); 2. var app = express(); 3. 4. var contatos = [{nome: "João", telefone: "98766789"}, 5. {nome: "Pedro", telefone: "99879999"}, 6. {nome: "Mateus", telefone: "99998888"}]; 7. app.get('/contatos', function(req, res) { 8. res.json(contatos); 9. }); 10. 11. app.listen(3412);
    47. 47. 1. var express = require('express'); 2. var app = express(); 3. 4. var contatos = [{nome: "João", telefone: "98766789"}, 5. {nome: "Pedro", telefone: "99879999"}, 6. {nome: "Mateus", telefone: "99998888"}]; 7. 8. app.get('/contatos', function(req, res) { 9. res.json(contatos); 10. }); 11. 12. app.listen(3412);
    48. 48. 1. var express = require('express'); 2. var app = express(); 3. 4. var contatos = [{nome: "João", telefone: "98766789"}, 5. {nome: "Pedro", telefone: "99879999"}, 6. {nome: "Mateus", telefone: "99998888"}]; 7. 8. app.get('/contatos', function(req, res) { 9. res.json(contatos); 10. }); 11. 12. app.post('/contatos', function(req, res) { 13. }); 14. 15. app.listen(3412);
    49. 49. 1. var express = require('express'); 2. var app = express(); 3. 4. var contatos = [{nome: "João", telefone: "98766789"}, 5. {nome: "Pedro", telefone: "99879999"}, 6. {nome: "Mateus", telefone: "99998888"}]; 7. 8. app.get('/contatos', function(req, res) { 9. res.json(contatos); 10. }); 11. 12. app.post('/contatos', function(req, res) { 13. var contato = req.body; 14. }); 15. 16. app.listen(3412);
    50. 50. 1. var express = require('express'); 2. var app = express(); 3. 4. var contatos = [{nome: "João", telefone: "98766789"}, 5. {nome: "Pedro", telefone: "99879999"}, 6. {nome: "Mateus", telefone: "99998888"}]; 7. 8. app.get('/contatos', function(req, res) { 9. res.json(contatos); 10. }); 11. 12. app.post('/contatos', function(req, res) { 13. var contato = req.body; 14. contatos.push(contato); 15. }); 16. 17. app.listen(3412);
    51. 51. 1. var express = require('express'); 2. var app = express(); 3. 4. var contatos = [{nome: "João", telefone: "98766789"}, 5. {nome: "Pedro", telefone: "99879999"}, 6. {nome: "Mateus", telefone: "99998888"}]; 7. 8. app.get('/contatos', function(req, res) { 9. res.json(contatos); 10. }); 11. 12. app.post('/contatos', function(req, res) { 13. var contato = req.body; 14. contatos.push(contato); 15. res.json(true); 16. }); 17. 18. app.listen(3412);
    52. 52. 1. var express = require('express'); 2. var app = express(); 3. app.use(express.bodyParser()); 4. 5. var contatos = [{nome: "João", telefone: "98766789"}, 6. {nome: "Pedro", telefone: "99879999"}, 7. {nome: "Mateus", telefone: "99998888"}]; 8. 9. app.get('/contatos', function(req, res) { 10. res.json(contatos); 11. }); 12. 13. app.post('/contatos', function(req, res) { 14. var contato = req.body; 15. contatos.push(contato); 16. res.json(true); 17. }); 18. 19. app.listen(3412);
    53. 53. 1. var express = require('express'); 2. var app = express(); 3. app.use(express.bodyParser()); 4. app.use(express.static(__dirname + '/public')); 5. 6. var contatos = [{nome: "João", telefone: "98766789"}, 7. {nome: "Pedro", telefone: "99879999"}, 8. {nome: "Mateus", telefone: "99998888"}]; 9. 10. app.get('/contatos', function(req, res) { 11. res.json(contatos); 12. }); 13. 14. app.post('/contatos', function(req, res) { 15. var contato = req.body; 16. contatos.push(contato); 17. res.json(true); 18. }); 19. 20. app.listen(3412);
    54. 54. Consumindo um Web Service com AJAX no AngularJS
    55. 55. Como podemos nos comunicar por HTTP a partir do browser?
    56. 56. AJAX Assynchronous JavaScript and XML
    57. 57. $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)
    58. 58. 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. });
    59. 59. 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. });
    60. 60. 1. app.controller("listaTelefonicaCtrl", function ($scope) { 2. $scope.titulo = "Lista Telefônica"; 3. 4. $scope.contatos = []; 5. 6. $scope.adicionarContato = function (contato) { 7. $scope.contatos.push(angular.copy(contato)); 8. delete $scope.contato; 9. }; 10. 11. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 12. });
    61. 61. 1. app.controller("listaTelefonicaCtrl", function ($scope) { 2. $scope.titulo = "Lista Telefônica"; 3. 4. $scope.contatos = []; 5. 6. $scope.adicionarContato = function (contato) { 7. $scope.contatos.push(angular.copy(contato)); 8. delete $scope.contato; 9. }; 10. 11. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 12. });
    62. 62. 1. app.controller("listaTelefonicaCtrl", function ($scope) { 2. $scope.titulo = "Lista Telefônica"; 3. 4. $scope.contatos = []; 5. 6. $scope.carregarContatos = function () { 7. }; 8. 9. $scope.adicionarContato = function (contato) { 10. $scope.contatos.push(angular.copy(contato)); 11. delete $scope.contato; 12. }; 13. 14. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 15. });
    63. 63. 1. app.controller("listaTelefonicaCtrl", function ($scope, $http) { 2. $scope.titulo = "Lista Telefônica"; 3. 4. $scope.contatos = []; 5. 6. $scope.carregarContatos = function () { 7. }; 8. 9. $scope.adicionarContato = function (contato) { 10. $scope.contatos.push(angular.copy(contato)); 11. delete $scope.contato; 12. }; 13. 14. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 15. });
    64. 64. 1. app.controller("listaTelefonicaCtrl", function ($scope, $http) { 2. $scope.titulo = "Lista Telefônica"; 3. 4. $scope.contatos = []; 5. 6. $scope.carregarContatos = function () { 7. $http.get(); 8. }; 9. 10. $scope.adicionarContato = function (contato) { 11. $scope.contatos.push(angular.copy(contato)); 12. delete $scope.contato; 13. }; 14. 15. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 16. });
    65. 65. 1. app.controller("listaTelefonicaCtrl", function ($scope, $http) { 2. $scope.titulo = "Lista Telefônica"; 3. 4. $scope.contatos = []; 5. 6. $scope.carregarContatos = function () { 7. $http.get("/contatos"); 8. }; 9. 10. $scope.adicionarContato = function (contato) { 11. $scope.contatos.push(angular.copy(contato)); 12. delete $scope.contato; 13. }; 14. 15. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 16. });
    66. 66. 1. app.controller("listaTelefonicaCtrl", function ($scope, $http) { 2. $scope.titulo = "Lista Telefônica"; 3. 4. $scope.contatos = []; 5. 6. $scope.carregarContatos = function () { 7. $http.get("/contatos").success(); 8. }; 9. 10. $scope.adicionarContato = function (contato) { 11. $scope.contatos.push(angular.copy(contato)); 12. delete $scope.contato; 13. }; 14. 15. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 16. });
    67. 67. 1. app.controller("listaTelefonicaCtrl", function ($scope, $http) { 2. $scope.titulo = "Lista Telefônica"; 3. 4. $scope.contatos = []; 5. 6. $scope.carregarContatos = function () { 7. $http.get("/contatos").success(function (data, status) { 8. }); 9. }; 10. 11. $scope.adicionarContato = function (contato) { 12. $scope.contatos.push(angular.copy(contato)); 13. delete $scope.contato; 14. }; 15. 16. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 17. });
    68. 68. 1. app.controller("listaTelefonicaCtrl", function ($scope, $http) { 2. $scope.titulo = "Lista Telefônica"; 3. 4. $scope.contatos = []; 5. 6. $scope.carregarContatos = function () { 7. $http.get("/contatos").success(function (data, status) { 8. $scope.contatos = data; 9. }); 10. }; 11. 12. $scope.adicionarContato = function (contato) { 13. $scope.contatos.push(angular.copy(contato)); 14. delete $scope.contato; 15. }; 16. 17. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 18. });
    69. 69. 1. app.controller("listaTelefonicaCtrl", function ($scope, $http) { 2. $scope.titulo = "Lista Telefônica"; 3. 4. $scope.contatos = []; 5. 6. $scope.carregarContatos = function () { 7. $http.get("/contatos").success(function (data, status) { 8. $scope.contatos = data; 9. }).error(); 10. }; 11. 12. $scope.adicionarContato = function (contato) { 13. $scope.contatos.push(angular.copy(contato)); 14. delete $scope.contato; 15. }; 16. 17. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 18. });
    70. 70. 1. app.controller("listaTelefonicaCtrl", function ($scope, $http) { 2. $scope.titulo = "Lista Telefônica"; 3. 4. $scope.contatos = []; 5. 6. $scope.carregarContatos = function () { 7. $http.get("/contatos").success(function (data, status) { 8. $scope.contatos = data; 9. }).error(function (data, status) { 10. }); 11. }; 12. 13. $scope.adicionarContato = function (contato) { 14. $scope.contatos.push(angular.copy(contato)); 15. delete $scope.contato; 16. }; 17. 18. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 19. });
    71. 71. 1. app.controller("listaTelefonicaCtrl", function ($scope, $http) { 2. $scope.titulo = "Lista Telefônica"; 3. 4. $scope.contatos = []; 5. 6. $scope.carregarContatos = function () { 7. $http.get("/contatos").success(function (data, status) { 8. $scope.contatos = data; 9. }).error(function (data, status) { 10. console.error(data); 11. }); 12. }; 13. 14. $scope.adicionarContato = function (contato) { 15. $scope.contatos.push(angular.copy(contato)); 16. delete $scope.contato; 17. }; 18. 19. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 20. });
    72. 72. 1. app.controller("listaTelefonicaCtrl", function ($scope, $http) { 2. $scope.titulo = "Lista Telefônica"; 3. 4. $scope.contatos = []; 5. 6. $scope.carregarContatos = function () { 7. $http.get("/contatos").success(function (data, status) { 8. $scope.contatos = data; 9. }).error(function (data, status) { 10. console.error(data); 11. }); 12. }; 13. 14. $scope.adicionarContato = function (contato) { 15. $scope.contatos.push(angular.copy(contato)); 16. delete $scope.contato; 17. }; 18. 19. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 20. 21. $scope.carregarContatos() 22. });
    73. 73. 1. app.controller("listaTelefonicaCtrl", function ($scope, $http) { 2. $scope.titulo = "Lista Telefônica"; 3. 4. $scope.contatos = []; 5. 6. $scope.carregarContatos = function () { 7. $http.get("/contatos").success(function (data, status) { 8. $scope.contatos = data; 9. }).error(function (data, status) { 10. console.error(data); 11. }); 12. }; 13. 14. $scope.adicionarContato = function (contato) { 15. $scope.contatos.push(angular.copy(contato)); 16. delete $scope.contato; 17. }; 18. 19. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 20. 21. $scope.carregarContatos() 22. });
    74. 74. 1. app.controller("listaTelefonicaCtrl", function ($scope, $http) { 2. $scope.titulo = "Lista Telefônica"; 3. 4. $scope.contatos = []; 5. 6. $scope.carregarContatos = function () { 7. $http.get("/contatos").success(function (data, status) { 8. $scope.contatos = data; 9. }).error(function (data, status) { 10. console.error(data); 11. }); 12. }; 13. 14. $scope.adicionarContato = function (contato) { 15. 16. delete $scope.contato; 17. }; 18. 19. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 20. 21. $scope.carregarContatos() 22. });
    75. 75. 1. app.controller("listaTelefonicaCtrl", function ($scope, $http) { 2. $scope.titulo = "Lista Telefônica"; 3. 4. $scope.contatos = []; 5. 6. $scope.carregarContatos = function () { 7. $http.get("/contatos").success(function (data, status) { 8. $scope.contatos = data; 9. }).error(function (data, status) { 10. console.error(data); 11. }); 12. }; 13. 14. $scope.adicionarContato = function (contato) { 15. $http.post(); 16. delete $scope.contato; 17. }; 18. 19. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 20. 21. $scope.carregarContatos() 22. });
    76. 76. 1. app.controller("listaTelefonicaCtrl", function ($scope, $http) { 2. $scope.titulo = "Lista Telefônica"; 3. 4. $scope.contatos = []; 5. 6. $scope.carregarContatos = function () { 7. $http.get("/contatos").success(function (data, status) { 8. $scope.contatos = data; 9. }).error(function (data, status) { 10. console.error(data); 11. }); 12. }; 13. 14. $scope.adicionarContato = function (contato) { 15. $http.post("/contatos"); 16. delete $scope.contato; 17. }; 18. 19. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 20. 21. $scope.carregarContatos() 22. });
    77. 77. 1. app.controller("listaTelefonicaCtrl", function ($scope, $http) { 2. $scope.titulo = "Lista Telefônica"; 3. 4. $scope.contatos = []; 5. 6. $scope.carregarContatos = function () { 7. $http.get("/contatos").success(function (data, status) { 8. $scope.contatos = data; 9. }).error(function (data, status) { 10. console.error(data); 11. }); 12. }; 13. 14. $scope.adicionarContato = function (contato) { 15. $http.post("/contatos", contato); 16. delete $scope.contato; 17. }; 18. 19. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 20. 21. $scope.carregarContatos() 22. });
    78. 78. 1. app.controller("listaTelefonicaCtrl", function ($scope, $http) { 2. $scope.titulo = "Lista Telefônica"; 3. 4. $scope.contatos = []; 5. 6. $scope.carregarContatos = function () { 7. $http.get("/contatos").success(function (data, status) { 8. $scope.contatos = data; 9. }).error(function (data, status) { 10. console.error(data); 11. }); 12. }; 13. 14. $scope.adicionarContato = function (contato) { 15. $http.post("/contatos", contato); 16. delete $scope.contato; 17. }; 18. 19. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 20. 21. $scope.carregarContatos() 22. });
    79. 79. 1. app.controller("listaTelefonicaCtrl", function ($scope, $http) { 2. $scope.titulo = "Lista Telefônica"; 3. 4. $scope.contatos = []; 5. 6. $scope.carregarContatos = function () { 7. $http.get("/contatos").success(function (data, status) { 8. $scope.contatos = data; 9. }).error(function (data, status) { 10. console.error(data); 11. }); 12. }; 13. 14. $scope.adicionarContato = function (contato) { 15. $http.post("/contatos", contato); 16. delete $scope.contato; 17. }; 18. 19. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 20. 21. $scope.carregarContatos() 22. });
    80. 80. 1. app.controller("listaTelefonicaCtrl", function ($scope, $http) { 2. $scope.titulo = "Lista Telefônica"; 3. 4. $scope.contatos = []; 5. 6. $scope.carregarContatos = function () { 7. $http.get("/contatos").success(function (data, status) { 8. $scope.contatos = data; 9. }).error(function (data, status) { 10. console.error(data); 11. }); 12. }; 13. 14. $scope.adicionarContato = function (contato) { 15. $http.post("/contatos", contato); 16. delete $scope.contato; 17. }; 18. 19. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 20. 21. $scope.carregarContatos() 22. });
    81. 81. 1. app.controller("listaTelefonicaCtrl", function ($scope, $http) { 2. $scope.titulo = "Lista Telefônica"; 3. 4. $scope.contatos = []; 5. 6. $scope.carregarContatos = function () { 7. $http.get("/contatos").success(function (data, status) { 8. $scope.contatos = data; 9. }).error(function (data, status) { 10. console.error(data); 11. }); 12. }; 13. 14. $scope.adicionarContato = function (contato) { 15. $http.post("/contatos", contato).success(function (data, status) { 16. }); 17. delete $scope.contato; 18. }; 19. 20. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 21. 22. $scope.carregarContatos() 23. });
    82. 82. 1. app.controller("listaTelefonicaCtrl", function ($scope, $http) { 2. $scope.titulo = "Lista Telefônica"; 3. 4. $scope.contatos = []; 5. 6. $scope.carregarContatos = function () { 7. $http.get("/contatos").success(function (data, status) { 8. $scope.contatos = data; 9. }).error(function (data, status) { 10. console.error(data); 11. }); 12. }; 13. 14. $scope.adicionarContato = function (contato) { 15. $http.post("/contatos", contato).success(function (data, status) { 16. $scope.carregarContatos(); 17. }); 18. delete $scope.contato; 19. }; 20. 21. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 22. 23. $scope.carregarContatos() 24. });
    83. 83. 1. app.controller("listaTelefonicaCtrl", function ($scope, $http) { 2. $scope.titulo = "Lista Telefônica"; 3. 4. $scope.contatos = []; 5. 6. $scope.carregarContatos = function () { 7. $http.get("/contatos").success(function (data, status) { 8. $scope.contatos = data; 9. }).error(function (data, status) { 10. console.error(data); 11. }); 12. }; 13. 14. $scope.adicionarContato = function (contato) { 15. $http.post("/contatos", contato).success(function (data, status) { 16. $scope.carregarContatos(); 17. delete $scope.contato; 18. }); 19. }; 20. 21. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 22. 23. $scope.carregarContatos() 24. });
    84. 84. 1. app.controller("listaTelefonicaCtrl", function ($scope, $http) { 2. $scope.titulo = "Lista Telefônica"; 3. 4. $scope.contatos = []; 5. 6. $scope.carregarContatos = function () { 7. $http.get("/contatos").success(function (data, status) { 8. $scope.contatos = data; 9. }).error(function (data, status) { 10. console.error(data); 11. }); 12. }; 13. 14. $scope.adicionarContato = function (contato) { 15. $http.post("/contatos", contato).success(function (data, status) { 16. $scope.carregarContatos(); 17. delete $scope.contato; 18. }).error(function (data, status) { 19. }); 20. }; 21. 22. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 23. 24. $scope.carregarContatos() 25. });
    85. 85. 1. app.controller("listaTelefonicaCtrl", function ($scope, $http) { 2. $scope.titulo = "Lista Telefônica"; 3. 4. $scope.contatos = []; 5. 6. $scope.carregarContatos = function () { 7. $http.get("/contatos").success(function (data, status) { 8. $scope.contatos = data; 9. }).error(function (data, status) { 10. console.error(data); 11. }); 12. }; 13. 14. $scope.adicionarContato = function (contato) { 15. $http.post("/contatos", contato).success(function (data, status) { 16. $scope.carregarContatos(); 17. delete $scope.contato; 18. }).error(function (data, status) { 19. console.error(data); 20. }); 21. }; 22. 23. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 24. 25. $scope.carregarContatos() 26. });

    ×