Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Criando serviços com AngularJS

8,374 views

Published on

Aprenda a criar serviços com AngularJS

Published in: Technology

Criando serviços com AngularJS

  1. 1. Criando Serviços com AngularJS Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br
  2. 2. 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
  3. 3. 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.
  4. 4. • 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 realmente me motiva?
  5. 5. Quando devemos criar serviços?
  6. 6. Criando um serviço para interagir com a API REST
  7. 7. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 4. $scope.app = "Lista Telefônica"; 5. $scope.carregarContatos = function () { 6. $http.get('/contatos').success(function (contatos) { 7. $scope.listaTelefonica = contatos; 8. }); 9. }; 10. $scope.carregarOperadoras = function () { 11. $http.get('/operadoras').success(function (operadoras) { 12. $scope.operadoras = operadoras; 13. }); 14. }; 15. $scope.adicionarContato = function (contato) { 16. $http.post('/contatos', contato).success(function () { 17. $scope.carregarContatos(); 18. }); 19. delete $scope.contato; 20. }; 21. $scope.carregarContatos(); 22. $scope.carregarOperadoras(); 23. });
  8. 8. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 4. $scope.app = "Lista Telefônica"; 5. $scope.carregarContatos = function () { 6. $http.get('/contatos').success(function (contatos) { 7. $scope.listaTelefonica = contatos; 8. }); 9. }; 10. $scope.carregarOperadoras = function () { 11. $http.get('/operadoras').success(function (operadoras) { 12. $scope.operadoras = operadoras; 13. }); 14. }; 15. $scope.adicionarContato = function (contato) { 16. $http.post('/contatos', contato).success(function () { 17. $scope.carregarContatos(); 18. }); 19. delete $scope.contato; 20. }; 21. $scope.carregarContatos(); 22. $scope.carregarOperadoras(); 23. });
  9. 9. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 4. $scope.app = "Lista Telefônica"; 5. $scope.carregarContatos = function () { 6. $http.get('/contatos').success(function (contatos) { 7. $scope.listaTelefonica = contatos; 8. }); 9. }; 10. $scope.carregarOperadoras = function () { 11. $http.get('/operadoras').success(function (operadoras) { 12. $scope.operadoras = operadoras; 13. }); 14. }; 15. $scope.adicionarContato = function (contato) { 16. $http.post('/contatos', contato).success(function () { 17. $scope.carregarContatos(); 18. }); 19. delete $scope.contato; 20. }; 21. $scope.carregarContatos(); 22. $scope.carregarOperadoras(); 23. });
  10. 10. factory
  11. 11. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 4. $scope.app = "Lista Telefônica"; 5. $scope.carregarContatos = function () { 6. $http.get('/contatos').success(function (contatos) { 7. $scope.listaTelefonica = contatos; 8. }); 9. }; 10. $scope.carregarOperadoras = function () { 11. $http.get('/operadoras').success(function (operadoras) { 12. $scope.operadoras = operadoras; 13. }); 14. }; 15. $scope.adicionarContato = function (contato) { 16. $http.post('/contatos', contato).success(function () { 17. $scope.carregarContatos(); 18. }); 19. delete $scope.contato; 20. }; 21. $scope.carregarContatos(); 22. $scope.carregarOperadoras(); 23. });
  12. 12. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 4. $scope.app = "Lista Telefônica"; 5. $scope.carregarContatos = function () { 6. $http.get('/contatos').success(function (contatos) { 7. $scope.listaTelefonica = contatos; 8. }); 9. }; 10. $scope.carregarOperadoras = function () { 11. $http.get('/operadoras').success(function (operadoras) { 12. $scope.operadoras = operadoras; 13. }); 14. }; 15. $scope.adicionarContato = function (contato) { 16. $http.post('/contatos', contato).success(function () { 17. $scope.carregarContatos(); 18. }); 19. delete $scope.contato; 20. }; 21. $scope.carregarContatos(); 22. $scope.carregarOperadoras(); 23. }); 24. 25. app.factory();
  13. 13. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 4. $scope.app = "Lista Telefônica"; 5. $scope.carregarContatos = function () { 6. $http.get('/contatos').success(function (contatos) { 7. $scope.listaTelefonica = contatos; 8. }); 9. }; 10. $scope.carregarOperadoras = function () { 11. $http.get('/operadoras').success(function (operadoras) { 12. $scope.operadoras = operadoras; 13. }); 14. }; 15. $scope.adicionarContato = function (contato) { 16. $http.post('/contatos', contato).success(function () { 17. $scope.carregarContatos(); 18. }); 19. delete $scope.contato; 20. }; 21. $scope.carregarContatos(); 22. $scope.carregarOperadoras(); 23. }); 24. 25. app.factory("ListaTelefonicaAPI");
  14. 14. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 4. $scope.app = "Lista Telefônica"; 5. $scope.carregarContatos = function () { 6. $http.get('/contatos').success(function (contatos) { 7. $scope.listaTelefonica = contatos; 8. }); 9. }; 10. $scope.carregarOperadoras = function () { 11. $http.get('/operadoras').success(function (operadoras) { 12. $scope.operadoras = operadoras; 13. }); 14. }; 15. $scope.adicionarContato = function (contato) { 16. $http.post('/contatos', contato).success(function () { 17. $scope.carregarContatos(); 18. }); 19. delete $scope.contato; 20. }; 21. $scope.carregarContatos(); 22. $scope.carregarOperadoras(); 23. }); 24. 25. app.factory("ListaTelefonicaAPI", function () { 26. });
  15. 15. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 4. $scope.app = "Lista Telefônica"; 5. $scope.carregarContatos = function () { 6. $http.get('/contatos').success(function (contatos) { 7. $scope.listaTelefonica = contatos; 8. }); 9. }; 10. $scope.carregarOperadoras = function () { 11. $http.get('/operadoras').success(function (operadoras) { 12. $scope.operadoras = operadoras; 13. }); 14. }; 15. $scope.adicionarContato = function (contato) { 16. $http.post('/contatos', contato).success(function () { 17. $scope.carregarContatos(); 18. }); 19. delete $scope.contato; 20. }; 21. $scope.carregarContatos(); 22. $scope.carregarOperadoras(); 23. }); 24. 25. app.factory("ListaTelefonicaAPI", function ($http) { 26. });
  16. 16. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 4. $scope.app = "Lista Telefônica"; 5. $scope.carregarContatos = function () { 6. $http.get('/contatos').success(function (contatos) { 7. $scope.listaTelefonica = contatos; 8. }); 9. }; 10. $scope.carregarOperadoras = function () { 11. $http.get('/operadoras').success(function (operadoras) { 12. $scope.operadoras = operadoras; 13. }); 14. }; 15. $scope.adicionarContato = function (contato) { 16. $http.post('/contatos', contato).success(function () { 17. $scope.carregarContatos(); 18. }); 19. delete $scope.contato; 20. }; 21. $scope.carregarContatos(); 22. $scope.carregarOperadoras(); 23. }); 24. 25. app.factory("ListaTelefonicaAPI", function ($http) { 26. var _getContatos = function () { 27. }; 28. });
  17. 17. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 4. $scope.app = "Lista Telefônica"; 5. $scope.carregarContatos = function () { 6. $http.get('/contatos').success(function (contatos) { 7. $scope.listaTelefonica = contatos; 8. }); 9. }; 10. $scope.carregarOperadoras = function () { 11. $http.get('/operadoras').success(function (operadoras) { 12. $scope.operadoras = operadoras; 13. }); 14. }; 15. $scope.adicionarContato = function (contato) { 16. $http.post('/contatos', contato).success(function () { 17. $scope.carregarContatos(); 18. }); 19. delete $scope.contato; 20. }; 21. $scope.carregarContatos(); 22. $scope.carregarOperadoras(); 23. }); 24. 25. app.factory("ListaTelefonicaAPI", function ($http) { 26. var _getContatos = function () { 27. return $http.get('/contatos'); 28. }; 29. });
  18. 18. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 4. $scope.app = "Lista Telefônica"; 5. $scope.carregarContatos = function () { 6. $http.get('/contatos').success(function (contatos) { 7. $scope.listaTelefonica = contatos; 8. }); 9. }; 10. $scope.carregarOperadoras = function () { 11. $http.get('/operadoras').success(function (operadoras) { 12. $scope.operadoras = operadoras; 13. }); 14. }; 15. $scope.adicionarContato = function (contato) { 16. $http.post('/contatos', contato).success(function () { 17. $scope.carregarContatos(); 18. }); 19. delete $scope.contato; 20. }; 21. $scope.carregarContatos(); 22. $scope.carregarOperadoras(); 23. }); 24. 25. app.factory("ListaTelefonicaAPI", function ($http) { 26. var _getContatos = function () { 27. return $http.get('/contatos'); 28. }; 29. return { 30. }; 31. });
  19. 19. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 4. $scope.app = "Lista Telefônica"; 5. $scope.carregarContatos = function () { 6. $http.get('/contatos').success(function (contatos) { 7. $scope.listaTelefonica = contatos; 8. }); 9. }; 10. $scope.carregarOperadoras = function () { 11. $http.get('/operadoras').success(function (operadoras) { 12. $scope.operadoras = operadoras; 13. }); 14. }; 15. $scope.adicionarContato = function (contato) { 16. $http.post('/contatos', contato).success(function () { 17. $scope.carregarContatos(); 18. }); 19. delete $scope.contato; 20. }; 21. $scope.carregarContatos(); 22. $scope.carregarOperadoras(); 23. }); 24. 25. app.factory("ListaTelefonicaAPI", function ($http) { 26. var _getContatos = function () { 27. return $http.get('/contatos'); 28. }; 29. return { 30. getContatos: _getContatos 31. }; 32. });
  20. 20. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 4. $scope.app = "Lista Telefônica"; 5. $scope.carregarContatos = function () { 6. $http.get('/contatos').success(function (contatos) { 7. $scope.listaTelefonica = contatos; 8. }); 9. }; 10. $scope.carregarOperadoras = function () { 11. $http.get('/operadoras').success(function (operadoras) { 12. $scope.operadoras = operadoras; 13. }); 14. }; 15. $scope.adicionarContato = function (contato) { 16. $http.post('/contatos', contato).success(function () { 17. $scope.carregarContatos(); 18. }); 19. delete $scope.contato; 20. }; 21. $scope.carregarContatos(); 22. $scope.carregarOperadoras(); 23. }); 24. 25. app.factory("ListaTelefonicaAPI", function ($http) { 26. var _getContatos = function () { 27. return $http.get('/contatos'); 28. }; 29. return { 30. getContatos: _getContatos 31. }; 32. });
  21. 21. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.controller("ListaTelefonicaCtrl", function ($scope, $http, ListaTelefonicaAPI) { 4. $scope.app = "Lista Telefônica"; 5. $scope.carregarContatos = function () { 6. $http.get('/contatos').success(function (contatos) { 7. $scope.listaTelefonica = contatos; 8. }); 9. }; 10. $scope.carregarOperadoras = function () { 11. $http.get('/operadoras').success(function (operadoras) { 12. $scope.operadoras = operadoras; 13. }); 14. }; 15. $scope.adicionarContato = function (contato) { 16. $http.post('/contatos', contato).success(function () { 17. $scope.carregarContatos(); 18. }); 19. delete $scope.contato; 20. }; 21. $scope.carregarContatos(); 22. $scope.carregarOperadoras(); 23. }); 24. 25. app.factory("ListaTelefonicaAPI", function ($http) { 26. var _getContatos = function () { 27. return $http.get('/contatos'); 28. }; 29. return { 30. getContatos: _getContatos 31. }; 32. });
  22. 22. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.controller("ListaTelefonicaCtrl", function ($scope, $http, ListaTelefonicaAPI) { 4. $scope.app = "Lista Telefônica"; 5. $scope.carregarContatos = function () { 6. $http.get('/contatos').success(function (contatos) { 7. $scope.listaTelefonica = contatos; 8. }); 9. }; 10. $scope.carregarOperadoras = function () { 11. $http.get('/operadoras').success(function (operadoras) { 12. $scope.operadoras = operadoras; 13. }); 14. }; 15. $scope.adicionarContato = function (contato) { 16. $http.post('/contatos', contato).success(function () { 17. $scope.carregarContatos(); 18. }); 19. delete $scope.contato; 20. }; 21. $scope.carregarContatos(); 22. $scope.carregarOperadoras(); 23. }); 24. 25. app.factory("ListaTelefonicaAPI", function ($http) { 26. var _getContatos = function () { 27. return $http.get('/contatos'); 28. }; 29. return { 30. getContatos: _getContatos 31. }; 32. });
  23. 23. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.controller("ListaTelefonicaCtrl", function ($scope, $http, ListaTelefonicaAPI) { 4. $scope.app = "Lista Telefônica"; 5. $scope.carregarContatos = function () { 6. $http.get('/contatos').success(function (contatos) { 7. $scope.listaTelefonica = contatos; 8. }); 9. }; 10. $scope.carregarOperadoras = function () { 11. $http.get('/operadoras').success(function (operadoras) { 12. $scope.operadoras = operadoras; 13. }); 14. }; 15. $scope.adicionarContato = function (contato) { 16. $http.post('/contatos', contato).success(function () { 17. $scope.carregarContatos(); 18. }); 19. delete $scope.contato; 20. }; 21. $scope.carregarContatos(); 22. $scope.carregarOperadoras(); 23. }); 24. 25. app.factory("ListaTelefonicaAPI", function ($http) { 26. var _getContatos = function () { 27. return $http.get('/contatos'); 28. }; 29. return { 30. getContatos: _getContatos 31. }; 32. });
  24. 24. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.controller("ListaTelefonicaCtrl", function ($scope, $http, ListaTelefonicaAPI) { 4. $scope.app = "Lista Telefônica"; 5. $scope.carregarContatos = function () { 6. .success(function (contatos) { 7. $scope.listaTelefonica = contatos; 8. }); 9. }; 10. $scope.carregarOperadoras = function () { 11. $http.get('/operadoras').success(function (operadoras) { 12. $scope.operadoras = operadoras; 13. }); 14. }; 15. $scope.adicionarContato = function (contato) { 16. $http.post('/contatos', contato).success(function () { 17. $scope.carregarContatos(); 18. }); 19. delete $scope.contato; 20. }; 21. $scope.carregarContatos(); 22. $scope.carregarOperadoras(); 23. }); 24. 25. app.factory("ListaTelefonicaAPI", function ($http) { 26. var _getContatos = function () { 27. return $http.get('/contatos'); 28. }; 29. return { 30. getContatos: _getContatos 31. }; 32. });
  25. 25. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.controller("ListaTelefonicaCtrl", function ($scope, $http, ListaTelefonicaAPI) { 4. $scope.app = "Lista Telefônica"; 5. $scope.carregarContatos = function () { 6. ListaTelefonicaAPI.getContatos().success(function (contatos) { 7. $scope.listaTelefonica = contatos; 8. }); 9. }; 10. $scope.carregarOperadoras = function () { 11. $http.get('/operadoras').success(function (operadoras) { 12. $scope.operadoras = operadoras; 13. }); 14. }; 15. $scope.adicionarContato = function (contato) { 16. $http.post('/contatos', contato).success(function () { 17. $scope.carregarContatos(); 18. }); 19. delete $scope.contato; 20. }; 21. $scope.carregarContatos(); 22. $scope.carregarOperadoras(); 23. }); 24. 25. app.factory("ListaTelefonicaAPI", function ($http) { 26. var _getContatos = function () { 27. return $http.get('/contatos'); 28. }; 29. return { 30. getContatos: _getContatos 31. }; 32. });
  26. 26. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.controller("ListaTelefonicaCtrl", function ($scope, $http, ListaTelefonicaAPI) { 4. $scope.app = "Lista Telefônica"; 5. $scope.carregarContatos = function () { 6. ListaTelefonicaAPI.getContatos().success(function (contatos) { 7. $scope.listaTelefonica = contatos; 8. }); 9. }; 10. $scope.carregarOperadoras = function () { 11. $http.get('/operadoras').success(function (operadoras) { 12. $scope.operadoras = operadoras; 13. }); 14. }; 15. $scope.adicionarContato = function (contato) { 16. $http.post('/contatos', contato).success(function () { 17. $scope.carregarContatos(); 18. }); 19. delete $scope.contato; 20. }; 21. $scope.carregarContatos(); 22. $scope.carregarOperadoras(); 23. }); 24. 25. app.factory("ListaTelefonicaAPI", function ($http) { 26. var _getContatos = function () { 27. return $http.get('/contatos'); 28. }; 29. return { 30. getContatos: _getContatos 31. }; 32. });
  27. 27. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.controller("ListaTelefonicaCtrl", function ($scope, $http, ListaTelefonicaAPI) { 4. $scope.app = "Lista Telefônica"; 5. $scope.carregarContatos = function () { 6. ListaTelefonicaAPI.getContatos().success(function (contatos) { 7. $scope.listaTelefonica = contatos; 8. }); 9. }; 10. $scope.carregarOperadoras = function () { 11. $http.get('/operadoras').success(function (operadoras) { 12. $scope.operadoras = operadoras; 13. }); 14. }; 15. $scope.adicionarContato = function (contato) { 16. $http.post('/contatos', contato).success(function () { 17. $scope.carregarContatos(); 18. }); 19. delete $scope.contato; 20. }; 21. $scope.carregarContatos(); 22. $scope.carregarOperadoras(); 23. }); 24. 25. app.service("ListaTelefonicaAPI", function ($http) { 26. this.getContatos = function () { 27. return $http.get('/contatos'); 28. }; 29. });

×