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.
Upcoming SlideShare
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Next

Share

Criando serviços com AngularJS

Aprenda a criar serviços com AngularJS

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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. });
  • RicardoM17

    Apr. 24, 2021
  • MarcusViniciusdaSilva1

    Nov. 17, 2020
  • EduardoBotelho6

    Jun. 12, 2020
  • YuriIgorMarchioni

    Aug. 26, 2016
  • dieguinhobsi

    Aug. 25, 2016
  • fernandosantucci

    Apr. 4, 2016
  • augustocezar5688

    Jun. 30, 2015
  • efcribeiro

    Apr. 7, 2015
  • diovanemonteiro

    Feb. 21, 2015
  • jeanonline

    Nov. 13, 2014
  • guntaurus

    Oct. 21, 2014
  • AndrClemer

    Aug. 20, 2014

Aprenda a criar serviços com AngularJS

Views

Total views

8,730

On Slideshare

0

From embeds

0

Number of embeds

2,360

Actions

Downloads

0

Shares

0

Comments

0

Likes

12

×