Evoluindo a arquitetura de uma aplicação com AngularJS

7,828 views

Published on

Evoluindo a arquitetura de uma aplicação com AngularJS

Published in: Technology

Evoluindo a arquitetura de uma aplicação com AngularJS

  1. 1. Evoluindo a arquitetura de uma aplicação 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. Criando um módulo
  6. 6. 1. function ListaTelefonicaCtrl($scope, $http) { 2. $scope.app = "Lista Telefônica"; 3. $scope.carregarContatos = function () { 4. $http.get('/contatos').success(function (contatos) { 5. $scope.listaTelefonica = contatos; 6. }); 7. }; 8. $scope.carregarOperadoras = function () { 9. $http.get('/operadoras').success(function (operadoras) { 10. $scope.operadoras = operadoras; 11. }); 12. }; 13. $scope.adicionarContato = function (contato) { 14. $http.post('/contatos', contato).success(function () { 15. $scope.carregarContatos(); 16. }); 17. delete $scope.contato; 18. }; 19. $scope.carregarContatos(); 20. $scope.carregarOperadoras(); 21. }
  7. 7. 1. 2. function ListaTelefonicaCtrl($scope, $http) { 3. $scope.app = "Lista Telefônica"; 4. $scope.carregarContatos = function () { 5. $http.get('/contatos').success(function (contatos) { 6. $scope.listaTelefonica = contatos; 7. }); 8. }; 9. $scope.carregarOperadoras = function () { 10. $http.get('/operadoras').success(function (operadoras) { 11. $scope.operadoras = operadoras; 12. }); 13. }; 14. $scope.adicionarContato = function (contato) { 15. $http.post('/contatos', contato).success(function () { 16. $scope.carregarContatos(); 17. }); 18. delete $scope.contato; 19. }; 20. $scope.carregarContatos(); 21. $scope.carregarOperadoras(); 22. }
  8. 8. 1. 2. 3. function ListaTelefonicaCtrl($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. angular.module("listaTelefonica", []); 2. 3. function ListaTelefonicaCtrl($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. 1. angular.module("listaTelefonica", []); 2. 3. function ListaTelefonicaCtrl($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. }
  11. 11. 1. var app = angular.module("listaTelefonica", []); 2. 3. function ListaTelefonicaCtrl($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", []); 2. 3. function ListaTelefonicaCtrl($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. }
  13. 13. 1. var app = angular.module("listaTelefonica", []); 2. 3. 4. function ListaTelefonicaCtrl($scope, $http) { 5. $scope.app = "Lista Telefônica"; 6. $scope.carregarContatos = function () { 7. $http.get('/contatos').success(function (contatos) { 8. $scope.listaTelefonica = contatos; 9. }); 10. }; 11. $scope.carregarOperadoras = function () { 12. $http.get('/operadoras').success(function (operadoras) { 13. $scope.operadoras = operadoras; 14. }); 15. }; 16. $scope.adicionarContato = function (contato) { 17. $http.post('/contatos', contato).success(function () { 18. $scope.carregarContatos(); 19. }); 20. delete $scope.contato; 21. }; 22. $scope.carregarContatos(); 23. $scope.carregarOperadoras(); 24. }
  14. 14. 1. var app = angular.module("listaTelefonica", []); 2. 3. 4. 5. function ListaTelefonicaCtrl($scope, $http) { 6. $scope.app = "Lista Telefônica"; 7. $scope.carregarContatos = function () { 8. $http.get('/contatos').success(function (contatos) { 9. $scope.listaTelefonica = contatos; 10. }); 11. }; 12. $scope.carregarOperadoras = function () { 13. $http.get('/operadoras').success(function (operadoras) { 14. $scope.operadoras = operadoras; 15. }); 16. }; 17. $scope.adicionarContato = function (contato) { 18. $http.post('/contatos', contato).success(function () { 19. $scope.carregarContatos(); 20. }); 21. delete $scope.contato; 22. }; 23. $scope.carregarContatos(); 24. $scope.carregarOperadoras(); 25. }
  15. 15. 1. var app = angular.module("listaTelefonica", []); 2. 3. app. 4. 5. function ListaTelefonicaCtrl($scope, $http) { 6. $scope.app = "Lista Telefônica"; 7. $scope.carregarContatos = function () { 8. $http.get('/contatos').success(function (contatos) { 9. $scope.listaTelefonica = contatos; 10. }); 11. }; 12. $scope.carregarOperadoras = function () { 13. $http.get('/operadoras').success(function (operadoras) { 14. $scope.operadoras = operadoras; 15. }); 16. }; 17. $scope.adicionarContato = function (contato) { 18. $http.post('/contatos', contato).success(function () { 19. $scope.carregarContatos(); 20. }); 21. delete $scope.contato; 22. }; 23. $scope.carregarContatos(); 24. $scope.carregarOperadoras(); 25. }
  16. 16. Module API
  17. 17. Por meio da Module API podemos registrar componentes como controllers, services, directives, filters e ainda definir os processos de inicialização e configuração do módulo.
  18. 18. Module API constant utilizada para registrar um objeto com dados constantes controller realiza o registro de um controller service registra um service, invocando a função com o operador new factory registra um service, disponibilizando o retorno da função filter utilizado para criar um filter directive utilizado para criar uma directive config configura o módulo run inicializa o módulo value utilizada para registrar um objeto com dados que podem variar
  19. 19. 1. var app = angular.module("listaTelefonica", []); 2. 3. app. 4. 5. function ListaTelefonicaCtrl($scope, $http) { 6. $scope.app = "Lista Telefônica"; 7. $scope.carregarContatos = function () { 8. $http.get('/contatos').success(function (contatos) { 9. $scope.listaTelefonica = contatos; 10. }); 11. }; 12. $scope.carregarOperadoras = function () { 13. $http.get('/operadoras').success(function (operadoras) { 14. $scope.operadoras = operadoras; 15. }); 16. }; 17. $scope.adicionarContato = function (contato) { 18. $http.post('/contatos', contato).success(function () { 19. $scope.carregarContatos(); 20. }); 21. delete $scope.contato; 22. }; 23. $scope.carregarContatos(); 24. $scope.carregarOperadoras(); 25. }
  20. 20. 1. var app = angular.module("listaTelefonica", []); 2. 3. app.controller(); 4. 5. function ListaTelefonicaCtrl($scope, $http) { 6. $scope.app = "Lista Telefônica"; 7. $scope.carregarContatos = function () { 8. $http.get('/contatos').success(function (contatos) { 9. $scope.listaTelefonica = contatos; 10. }); 11. }; 12. $scope.carregarOperadoras = function () { 13. $http.get('/operadoras').success(function (operadoras) { 14. $scope.operadoras = operadoras; 15. }); 16. }; 17. $scope.adicionarContato = function (contato) { 18. $http.post('/contatos', contato).success(function () { 19. $scope.carregarContatos(); 20. }); 21. delete $scope.contato; 22. }; 23. $scope.carregarContatos(); 24. $scope.carregarOperadoras(); 25. }
  21. 21. 1. var app = angular.module("listaTelefonica", []); 2. 3. app.controller(); 4. 5. function ListaTelefonicaCtrl($scope, $http) { 6. $scope.app = "Lista Telefônica"; 7. $scope.carregarContatos = function () { 8. $http.get('/contatos').success(function (contatos) { 9. $scope.listaTelefonica = contatos; 10. }); 11. }; 12. $scope.carregarOperadoras = function () { 13. $http.get('/operadoras').success(function (operadoras) { 14. $scope.operadoras = operadoras; 15. }); 16. }; 17. $scope.adicionarContato = function (contato) { 18. $http.post('/contatos', contato).success(function () { 19. $scope.carregarContatos(); 20. }); 21. delete $scope.contato; 22. }; 23. $scope.carregarContatos(); 24. $scope.carregarOperadoras(); 25. }
  22. 22. 1. var app = angular.module("listaTelefonica", []); 2. 3. app.controller("ListaTelefonicaCtrl"); 4. 5. function ListaTelefonicaCtrl($scope, $http) { 6. $scope.app = "Lista Telefônica"; 7. $scope.carregarContatos = function () { 8. $http.get('/contatos').success(function (contatos) { 9. $scope.listaTelefonica = contatos; 10. }); 11. }; 12. $scope.carregarOperadoras = function () { 13. $http.get('/operadoras').success(function (operadoras) { 14. $scope.operadoras = operadoras; 15. }); 16. }; 17. $scope.adicionarContato = function (contato) { 18. $http.post('/contatos', contato).success(function () { 19. $scope.carregarContatos(); 20. }); 21. delete $scope.contato; 22. }; 23. $scope.carregarContatos(); 24. $scope.carregarOperadoras(); 25. }
  23. 23. 1. var app = angular.module("listaTelefonica", []); 2. 3. app.controller("ListaTelefonicaCtrl"); 4. 5. function ListaTelefonicaCtrl($scope, $http) { 6. $scope.app = "Lista Telefônica"; 7. $scope.carregarContatos = function () { 8. $http.get('/contatos').success(function (contatos) { 9. $scope.listaTelefonica = contatos; 10. }); 11. }; 12. $scope.carregarOperadoras = function () { 13. $http.get('/operadoras').success(function (operadoras) { 14. $scope.operadoras = operadoras; 15. }); 16. }; 17. $scope.adicionarContato = function (contato) { 18. $http.post('/contatos', contato).success(function () { 19. $scope.carregarContatos(); 20. }); 21. delete $scope.contato; 22. }; 23. $scope.carregarContatos(); 24. $scope.carregarOperadoras(); 25. }
  24. 24. 1. var app = angular.module("listaTelefonica", []); 2. 3. app.controller("ListaTelefonicaCtrl"); 4. 5. function ListaTelefonicaCtrl($scope, $http) { 6. $scope.app = "Lista Telefônica"; 7. $scope.carregarContatos = function () { 8. $http.get('/contatos').success(function (contatos) { 9. $scope.listaTelefonica = contatos; 10. }); 11. }; 12. $scope.carregarOperadoras = function () { 13. $http.get('/operadoras').success(function (operadoras) { 14. $scope.operadoras = operadoras; 15. }); 16. }; 17. $scope.adicionarContato = function (contato) { 18. $http.post('/contatos', contato).success(function () { 19. $scope.carregarContatos(); 20. }); 21. delete $scope.contato; 22. }; 23. $scope.carregarContatos(); 24. $scope.carregarOperadoras(); 25. }
  25. 25. 1. var app = angular.module("listaTelefonica", []); 2. 3. app.controller("ListaTelefonicaCtrl"); 4. 5. function ($scope, $http) { 6. $scope.app = "Lista Telefônica"; 7. $scope.carregarContatos = function () { 8. $http.get('/contatos').success(function (contatos) { 9. $scope.listaTelefonica = contatos; 10. }); 11. }; 12. $scope.carregarOperadoras = function () { 13. $http.get('/operadoras').success(function (operadoras) { 14. $scope.operadoras = operadoras; 15. }); 16. }; 17. $scope.adicionarContato = function (contato) { 18. $http.post('/contatos', contato).success(function () { 19. $scope.carregarContatos(); 20. }); 21. delete $scope.contato; 22. }; 23. $scope.carregarContatos(); 24. $scope.carregarOperadoras(); 25. }
  26. 26. 1. var app = angular.module("listaTelefonica", []); 2. 3. app.controller("ListaTelefonicaCtrl"); 4. function ($scope, $http) { 5. $scope.app = "Lista Telefônica"; 6. $scope.carregarContatos = function () { 7. $http.get('/contatos').success(function (contatos) { 8. $scope.listaTelefonica = contatos; 9. }); 10. }; 11. $scope.carregarOperadoras = function () { 12. $http.get('/operadoras').success(function (operadoras) { 13. $scope.operadoras = operadoras; 14. }); 15. }; 16. $scope.adicionarContato = function (contato) { 17. $http.post('/contatos', contato).success(function () { 18. $scope.carregarContatos(); 19. }); 20. delete $scope.contato; 21. }; 22. $scope.carregarContatos(); 23. $scope.carregarOperadoras(); 24. }
  27. 27. 1. var app = angular.module("listaTelefonica", []); 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. });
  28. 28. 1. var app = angular.module("listaTelefonica", []); 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. });
  29. 29. Configurando o módulo
  30. 30. 1. var app = angular.module("listaTelefonica", []); 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. });
  31. 31. 1. var app = angular.module("listaTelefonica", []); 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. });
  32. 32. 1. var app = angular.module("listaTelefonica", []); 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. });
  33. 33. 1. var app = angular.module("listaTelefonica", []); 2. 3. 4. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 5. $scope.app = "Lista Telefônica"; 6. $scope.carregarContatos = function () { 7. $http.get('/contatos').success(function (contatos) { 8. $scope.listaTelefonica = contatos; 9. }); 10. }; 11. $scope.carregarOperadoras = function () { 12. $http.get('/operadoras').success(function (operadoras) { 13. $scope.operadoras = operadoras; 14. }); 15. }; 16. $scope.adicionarContato = function (contato) { 17. $http.post('/contatos', contato).success(function () { 18. $scope.carregarContatos(); 19. }); 20. delete $scope.contato; 21. }; 22. $scope.carregarContatos(); 23. $scope.carregarOperadoras(); 24. });
  34. 34. 1. var app = angular.module("listaTelefonica", []); 2. 3. 4. 5. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 6. $scope.app = "Lista Telefônica"; 7. $scope.carregarContatos = function () { 8. $http.get('/contatos').success(function (contatos) { 9. $scope.listaTelefonica = contatos; 10. }); 11. }; 12. $scope.carregarOperadoras = function () { 13. $http.get('/operadoras').success(function (operadoras) { 14. $scope.operadoras = operadoras; 15. }); 16. }; 17. $scope.adicionarContato = function (contato) { 18. $http.post('/contatos', contato).success(function () { 19. $scope.carregarContatos(); 20. }); 21. delete $scope.contato; 22. }; 23. $scope.carregarContatos(); 24. $scope.carregarOperadoras(); 25. });
  35. 35. 1. var app = angular.module("listaTelefonica", []); 2. 3. app.config(); 4. 5. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 6. $scope.app = "Lista Telefônica"; 7. $scope.carregarContatos = function () { 8. $http.get('/contatos').success(function (contatos) { 9. $scope.listaTelefonica = contatos; 10. }); 11. }; 12. $scope.carregarOperadoras = function () { 13. $http.get('/operadoras').success(function (operadoras) { 14. $scope.operadoras = operadoras; 15. }); 16. }; 17. $scope.adicionarContato = function (contato) { 18. $http.post('/contatos', contato).success(function () { 19. $scope.carregarContatos(); 20. }); 21. delete $scope.contato; 22. }; 23. $scope.carregarContatos(); 24. $scope.carregarOperadoras(); 25. });
  36. 36. 1. var app = angular.module("listaTelefonica", []); 2. 3. app.config(); 4. 5. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 6. $scope.app = "Lista Telefônica"; 7. $scope.carregarContatos = function () { 8. $http.get('/contatos').success(function (contatos) { 9. $scope.listaTelefonica = contatos; 10. }); 11. }; 12. $scope.carregarOperadoras = function () { 13. $http.get('/operadoras').success(function (operadoras) { 14. $scope.operadoras = operadoras; 15. }); 16. }; 17. $scope.adicionarContato = function (contato) { 18. $http.post('/contatos', contato).success(function () { 19. $scope.carregarContatos(); 20. }); 21. delete $scope.contato; 22. }; 23. $scope.carregarContatos(); 24. $scope.carregarOperadoras(); 25. });
  37. 37. 1. var app = angular.module("listaTelefonica", []); 2. 3. app.config(function () { 4. }); 5. 6. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 7. $scope.app = "Lista Telefônica"; 8. $scope.carregarContatos = function () { 9. $http.get('/contatos').success(function (contatos) { 10. $scope.listaTelefonica = contatos; 11. }); 12. }; 13. $scope.carregarOperadoras = function () { 14. $http.get('/operadoras').success(function (operadoras) { 15. $scope.operadoras = operadoras; 16. }); 17. }; 18. $scope.adicionarContato = function (contato) { 19. $http.post('/contatos', contato).success(function () { 20. $scope.carregarContatos(); 21. }); 22. delete $scope.contato; 23. }; 24. $scope.carregarContatos(); 25. $scope.carregarOperadoras(); 26. });
  38. 38. 1. var app = angular.module("listaTelefonica", []); 2. 3. app.config(function () { 4. }); 5. 6. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 7. $scope.app = "Lista Telefônica"; 8. $scope.carregarContatos = function () { 9. $http.get('/contatos').success(function (contatos) { 10. $scope.listaTelefonica = contatos; 11. }); 12. }; 13. $scope.carregarOperadoras = function () { 14. $http.get('/operadoras').success(function (operadoras) { 15. $scope.operadoras = operadoras; 16. }); 17. }; 18. $scope.adicionarContato = function (contato) { 19. $http.post('/contatos', contato).success(function () { 20. $scope.carregarContatos(); 21. }); 22. delete $scope.contato; 23. }; 24. $scope.carregarContatos(); 25. $scope.carregarOperadoras(); 26. });
  39. 39. Single-Page Application
  40. 40. Single-Page Application?
  41. 41. $routeProvider Com o serviço $routeProvider, podemos traçar rotas para cada funcionalidade, unindo a View e o Controller. • when (path, route) • otherwise (path) Requer a utilização do módulo ngRoute
  42. 42. 1. var app = angular.module("listaTelefonica", []); 2. 3. app.config(function () { 4. }); 5. 6. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 7. $scope.app = "Lista Telefônica"; 8. $scope.carregarContatos = function () { 9. $http.get('/contatos').success(function (contatos) { 10. $scope.listaTelefonica = contatos; 11. }); 12. }; 13. $scope.carregarOperadoras = function () { 14. $http.get('/operadoras').success(function (operadoras) { 15. $scope.operadoras = operadoras; 16. }); 17. }; 18. $scope.adicionarContato = function (contato) { 19. $http.post('/contatos', contato).success(function () { 20. $scope.carregarContatos(); 21. }); 22. delete $scope.contato; 23. }; 24. $scope.carregarContatos(); 25. $scope.carregarOperadoras(); 26. });
  43. 43. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function () { 4. }); 5. 6. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 7. $scope.app = "Lista Telefônica"; 8. $scope.carregarContatos = function () { 9. $http.get('/contatos').success(function (contatos) { 10. $scope.listaTelefonica = contatos; 11. }); 12. }; 13. $scope.carregarOperadoras = function () { 14. $http.get('/operadoras').success(function (operadoras) { 15. $scope.operadoras = operadoras; 16. }); 17. }; 18. $scope.adicionarContato = function (contato) { 19. $http.post('/contatos', contato).success(function () { 20. $scope.carregarContatos(); 21. }); 22. delete $scope.contato; 23. }; 24. $scope.carregarContatos(); 25. $scope.carregarOperadoras(); 26. });
  44. 44. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function () { 4. }); 5. 6. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 7. $scope.app = "Lista Telefônica"; 8. $scope.carregarContatos = function () { 9. $http.get('/contatos').success(function (contatos) { 10. $scope.listaTelefonica = contatos; 11. }); 12. }; 13. $scope.carregarOperadoras = function () { 14. $http.get('/operadoras').success(function (operadoras) { 15. $scope.operadoras = operadoras; 16. }); 17. }; 18. $scope.adicionarContato = function (contato) { 19. $http.post('/contatos', contato).success(function () { 20. $scope.carregarContatos(); 21. }); 22. delete $scope.contato; 23. }; 24. $scope.carregarContatos(); 25. $scope.carregarOperadoras(); 26. });
  45. 45. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. }); 5. 6. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 7. $scope.app = "Lista Telefônica"; 8. $scope.carregarContatos = function () { 9. $http.get('/contatos').success(function (contatos) { 10. $scope.listaTelefonica = contatos; 11. }); 12. }; 13. $scope.carregarOperadoras = function () { 14. $http.get('/operadoras').success(function (operadoras) { 15. $scope.operadoras = operadoras; 16. }); 17. }; 18. $scope.adicionarContato = function (contato) { 19. $http.post('/contatos', contato).success(function () { 20. $scope.carregarContatos(); 21. }); 22. delete $scope.contato; 23. }; 24. $scope.carregarContatos(); 25. $scope.carregarOperadoras(); 26. });
  46. 46. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. }); 5. 6. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 7. $scope.app = "Lista Telefônica"; 8. $scope.carregarContatos = function () { 9. $http.get('/contatos').success(function (contatos) { 10. $scope.listaTelefonica = contatos; 11. }); 12. }; 13. $scope.carregarOperadoras = function () { 14. $http.get('/operadoras').success(function (operadoras) { 15. $scope.operadoras = operadoras; 16. }); 17. }; 18. $scope.adicionarContato = function (contato) { 19. $http.post('/contatos', contato).success(function () { 20. $scope.carregarContatos(); 21. }); 22. delete $scope.contato; 23. }; 24. $scope.carregarContatos(); 25. $scope.carregarOperadoras(); 26. });
  47. 47. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. 5. }); 6. 7. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 8. $scope.app = "Lista Telefônica"; 9. $scope.carregarContatos = function () { 10. $http.get('/contatos').success(function (contatos) { 11. $scope.listaTelefonica = contatos; 12. }); 13. }; 14. $scope.carregarOperadoras = function () { 15. $http.get('/operadoras').success(function (operadoras) { 16. $scope.operadoras = operadoras; 17. }); 18. }; 19. $scope.adicionarContato = function (contato) { 20. $http.post('/contatos', contato).success(function () { 21. $scope.carregarContatos(); 22. }); 23. delete $scope.contato; 24. }; 25. $scope.carregarContatos(); 26. $scope.carregarOperadoras(); 27. });
  48. 48. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider. 5. }); 6. 7. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 8. $scope.app = "Lista Telefônica"; 9. $scope.carregarContatos = function () { 10. $http.get('/contatos').success(function (contatos) { 11. $scope.listaTelefonica = contatos; 12. }); 13. }; 14. $scope.carregarOperadoras = function () { 15. $http.get('/operadoras').success(function (operadoras) { 16. $scope.operadoras = operadoras; 17. }); 18. }; 19. $scope.adicionarContato = function (contato) { 20. $http.post('/contatos', contato).success(function () { 21. $scope.carregarContatos(); 22. }); 23. delete $scope.contato; 24. }; 25. $scope.carregarContatos(); 26. $scope.carregarOperadoras(); 27. });
  49. 49. when
  50. 50. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider. 5. }); 6. 7. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 8. $scope.app = "Lista Telefônica"; 9. $scope.carregarContatos = function () { 10. $http.get('/contatos').success(function (contatos) { 11. $scope.listaTelefonica = contatos; 12. }); 13. }; 14. $scope.carregarOperadoras = function () { 15. $http.get('/operadoras').success(function (operadoras) { 16. $scope.operadoras = operadoras; 17. }); 18. }; 19. $scope.adicionarContato = function (contato) { 20. $http.post('/contatos', contato).success(function () { 21. $scope.carregarContatos(); 22. }); 23. delete $scope.contato; 24. }; 25. $scope.carregarContatos(); 26. $scope.carregarOperadoras(); 27. });
  51. 51. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when(); 5. }); 6. 7. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 8. $scope.app = "Lista Telefônica"; 9. $scope.carregarContatos = function () { 10. $http.get('/contatos').success(function (contatos) { 11. $scope.listaTelefonica = contatos; 12. }); 13. }; 14. $scope.carregarOperadoras = function () { 15. $http.get('/operadoras').success(function (operadoras) { 16. $scope.operadoras = operadoras; 17. }); 18. }; 19. $scope.adicionarContato = function (contato) { 20. $http.post('/contatos', contato).success(function () { 21. $scope.carregarContatos(); 22. }); 23. delete $scope.contato; 24. }; 25. $scope.carregarContatos(); 26. $scope.carregarOperadoras(); 27. });
  52. 52. index.html#/listaTelefonica
  53. 53. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when(); 5. }); 6. 7. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 8. $scope.app = "Lista Telefônica"; 9. $scope.carregarContatos = function () { 10. $http.get('/contatos').success(function (contatos) { 11. $scope.listaTelefonica = contatos; 12. }); 13. }; 14. $scope.carregarOperadoras = function () { 15. $http.get('/operadoras').success(function (operadoras) { 16. $scope.operadoras = operadoras; 17. }); 18. }; 19. $scope.adicionarContato = function (contato) { 20. $http.post('/contatos', contato).success(function () { 21. $scope.carregarContatos(); 22. }); 23. delete $scope.contato; 24. }; 25. $scope.carregarContatos(); 26. $scope.carregarOperadoras(); 27. });
  54. 54. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica'); 5. }); 6. 7. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 8. $scope.app = "Lista Telefônica"; 9. $scope.carregarContatos = function () { 10. $http.get('/contatos').success(function (contatos) { 11. $scope.listaTelefonica = contatos; 12. }); 13. }; 14. $scope.carregarOperadoras = function () { 15. $http.get('/operadoras').success(function (operadoras) { 16. $scope.operadoras = operadoras; 17. }); 18. }; 19. $scope.adicionarContato = function (contato) { 20. $http.post('/contatos', contato).success(function () { 21. $scope.carregarContatos(); 22. }); 23. delete $scope.contato; 24. }; 25. $scope.carregarContatos(); 26. $scope.carregarOperadoras(); 27. });
  55. 55. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {}); 5. }); 6. 7. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 8. $scope.app = "Lista Telefônica"; 9. $scope.carregarContatos = function () { 10. $http.get('/contatos').success(function (contatos) { 11. $scope.listaTelefonica = contatos; 12. }); 13. }; 14. $scope.carregarOperadoras = function () { 15. $http.get('/operadoras').success(function (operadoras) { 16. $scope.operadoras = operadoras; 17. }); 18. }; 19. $scope.adicionarContato = function (contato) { 20. $http.post('/contatos', contato).success(function () { 21. $scope.carregarContatos(); 22. }); 23. delete $scope.contato; 24. }; 25. $scope.carregarContatos(); 26. $scope.carregarOperadoras(); 27. });
  56. 56. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html'}); 5. }); 6. 7. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 8. $scope.app = "Lista Telefônica"; 9. $scope.carregarContatos = function () { 10. $http.get('/contatos').success(function (contatos) { 11. $scope.listaTelefonica = contatos; 12. }); 13. }; 14. $scope.carregarOperadoras = function () { 15. $http.get('/operadoras').success(function (operadoras) { 16. $scope.operadoras = operadoras; 17. }); 18. }; 19. $scope.adicionarContato = function (contato) { 20. $http.post('/contatos', contato).success(function () { 21. $scope.carregarContatos(); 22. }); 23. delete $scope.contato; 24. }; 25. $scope.carregarContatos(); 26. $scope.carregarOperadoras(); 27. });
  57. 57. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html',controller:'ListaTelefonicaCtrl'}); 5. }); 6. 7. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 8. $scope.app = "Lista Telefônica"; 9. $scope.carregarContatos = function () { 10. $http.get('/contatos').success(function (contatos) { 11. $scope.listaTelefonica = contatos; 12. }); 13. }; 14. $scope.carregarOperadoras = function () { 15. $http.get('/operadoras').success(function (operadoras) { 16. $scope.operadoras = operadoras; 17. }); 18. }; 19. $scope.adicionarContato = function (contato) { 20. $http.post('/contatos', contato).success(function () { 21. $scope.carregarContatos(); 22. }); 23. delete $scope.contato; 24. }; 25. $scope.carregarContatos(); 26. $scope.carregarOperadoras(); 27. });
  58. 58. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html',controller:'ListaTelefonicaCtrl'}); 5. }); 6. 7. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 8. $scope.app = "Lista Telefônica"; 9. $scope.carregarContatos = function () { 10. $http.get('/contatos').success(function (contatos) { 11. $scope.listaTelefonica = contatos; 12. }); 13. }; 14. $scope.carregarOperadoras = function () { 15. $http.get('/operadoras').success(function (operadoras) { 16. $scope.operadoras = operadoras; 17. }); 18. }; 19. $scope.adicionarContato = function (contato) { 20. $http.post('/contatos', contato).success(function () { 21. $scope.carregarContatos(); 22. }); 23. delete $scope.contato; 24. }; 25. $scope.carregarContatos(); 26. $scope.carregarOperadoras(); 27. });
  59. 59. index.html#/contato/1
  60. 60. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html',controller:'ListaTelefonicaCtrl'}); 5. }); 6. 7. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 8. $scope.app = "Lista Telefônica"; 9. $scope.carregarContatos = function () { 10. $http.get('/contatos').success(function (contatos) { 11. $scope.listaTelefonica = contatos; 12. }); 13. }; 14. $scope.carregarOperadoras = function () { 15. $http.get('/operadoras').success(function (operadoras) { 16. $scope.operadoras = operadoras; 17. }); 18. }; 19. $scope.adicionarContato = function (contato) { 20. $http.post('/contatos', contato).success(function () { 21. $scope.carregarContatos(); 22. }); 23. delete $scope.contato; 24. }; 25. $scope.carregarContatos(); 26. $scope.carregarOperadoras(); 27. });
  61. 61. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html',controller:'ListaTelefonicaCtrl'}); 5. $routeProvider. 6. }); 7. 8. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 9. $scope.app = "Lista Telefônica"; 10. $scope.carregarContatos = function () { 11. $http.get('/contatos').success(function (contatos) { 12. $scope.listaTelefonica = contatos; 13. }); 14. }; 15. $scope.carregarOperadoras = function () { 16. $http.get('/operadoras').success(function (operadoras) { 17. $scope.operadoras = operadoras; 18. }); 19. }; 20. $scope.adicionarContato = function (contato) { 21. $http.post('/contatos', contato).success(function () { 22. $scope.carregarContatos(); 23. }); 24. delete $scope.contato; 25. }; 26. $scope.carregarContatos(); 27. $scope.carregarOperadoras(); 28. });
  62. 62. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html',controller:'ListaTelefonicaCtrl'}); 5. $routeProvider.when(); 6. }); 7. 8. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 9. $scope.app = "Lista Telefônica"; 10. $scope.carregarContatos = function () { 11. $http.get('/contatos').success(function (contatos) { 12. $scope.listaTelefonica = contatos; 13. }); 14. }; 15. $scope.carregarOperadoras = function () { 16. $http.get('/operadoras').success(function (operadoras) { 17. $scope.operadoras = operadoras; 18. }); 19. }; 20. $scope.adicionarContato = function (contato) { 21. $http.post('/contatos', contato).success(function () { 22. $scope.carregarContatos(); 23. }); 24. delete $scope.contato; 25. }; 26. $scope.carregarContatos(); 27. $scope.carregarOperadoras(); 28. });
  63. 63. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html',controller:'ListaTelefonicaCtrl'}); 5. $routeProvider.when('/contato/:idContato'); 6. }); 7. 8. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 9. $scope.app = "Lista Telefônica"; 10. $scope.carregarContatos = function () { 11. $http.get('/contatos').success(function (contatos) { 12. $scope.listaTelefonica = contatos; 13. }); 14. }; 15. $scope.carregarOperadoras = function () { 16. $http.get('/operadoras').success(function (operadoras) { 17. $scope.operadoras = operadoras; 18. }); 19. }; 20. $scope.adicionarContato = function (contato) { 21. $http.post('/contatos', contato).success(function () { 22. $scope.carregarContatos(); 23. }); 24. delete $scope.contato; 25. }; 26. $scope.carregarContatos(); 27. $scope.carregarOperadoras(); 28. });
  64. 64. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html',controller:'ListaTelefonicaCtrl'}); 5. $routeProvider.when('/contato/:idContato', {}); 6. }); 7. 8. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 9. $scope.app = "Lista Telefônica"; 10. $scope.carregarContatos = function () { 11. $http.get('/contatos').success(function (contatos) { 12. $scope.listaTelefonica = contatos; 13. }); 14. }; 15. $scope.carregarOperadoras = function () { 16. $http.get('/operadoras').success(function (operadoras) { 17. $scope.operadoras = operadoras; 18. }); 19. }; 20. $scope.adicionarContato = function (contato) { 21. $http.post('/contatos', contato).success(function () { 22. $scope.carregarContatos(); 23. }); 24. delete $scope.contato; 25. }; 26. $scope.carregarContatos(); 27. $scope.carregarOperadoras(); 28. });
  65. 65. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html',controller:'ListaTelefonicaCtrl'}); 5. $routeProvider.when('/contato/:idContato', {templateUrl:'contato.html'}); 6. }); 7. 8. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 9. $scope.app = "Lista Telefônica"; 10. $scope.carregarContatos = function () { 11. $http.get('/contatos').success(function (contatos) { 12. $scope.listaTelefonica = contatos; 13. }); 14. }; 15. $scope.carregarOperadoras = function () { 16. $http.get('/operadoras').success(function (operadoras) { 17. $scope.operadoras = operadoras; 18. }); 19. }; 20. $scope.adicionarContato = function (contato) { 21. $http.post('/contatos', contato).success(function () { 22. $scope.carregarContatos(); 23. }); 24. delete $scope.contato; 25. }; 26. $scope.carregarContatos(); 27. $scope.carregarOperadoras(); 28. });
  66. 66. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html',controller:'ListaTelefonicaCtrl'}); 5. $routeProvider.when('/contato/:idContato', {templateUrl:'contato.html',controller:'ContatoCtrl'}); 6. }); 7. 8. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 9. $scope.app = "Lista Telefônica"; 10. $scope.carregarContatos = function () { 11. $http.get('/contatos').success(function (contatos) { 12. $scope.listaTelefonica = contatos; 13. }); 14. }; 15. $scope.carregarOperadoras = function () { 16. $http.get('/operadoras').success(function (operadoras) { 17. $scope.operadoras = operadoras; 18. }); 19. }; 20. $scope.adicionarContato = function (contato) { 21. $http.post('/contatos', contato).success(function () { 22. $scope.carregarContatos(); 23. }); 24. delete $scope.contato; 25. }; 26. $scope.carregarContatos(); 27. $scope.carregarOperadoras(); 28. });
  67. 67. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html',controller:'ListaTelefonicaCtrl'}); 5. $routeProvider.when('/contato/:idContato', {templateUrl:'contato.html',controller:'ContatoCtrl'}); 6. }); 7. 8. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 9. $scope.app = "Lista Telefônica"; 10. $scope.carregarContatos = function () { 11. $http.get('/contatos').success(function (contatos) { 12. $scope.listaTelefonica = contatos; 13. }); 14. }; 15. $scope.carregarOperadoras = function () { 16. $http.get('/operadoras').success(function (operadoras) { 17. $scope.operadoras = operadoras; 18. }); 19. }; 20. $scope.adicionarContato = function (contato) { 21. $http.post('/contatos', contato).success(function () { 22. $scope.carregarContatos(); 23. }); 24. delete $scope.contato; 25. }; 26. $scope.carregarContatos(); 27. $scope.carregarOperadoras(); 28. });
  68. 68. index.html#/operadoras
  69. 69. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html',controller:'ListaTelefonicaCtrl'}); 5. $routeProvider.when('/contato/:idContato', {templateUrl:'contato.html',controller:'ContatoCtrl'}); 6. }); 7. 8. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 9. $scope.app = "Lista Telefônica"; 10. $scope.carregarContatos = function () { 11. $http.get('/contatos').success(function (contatos) { 12. $scope.listaTelefonica = contatos; 13. }); 14. }; 15. $scope.carregarOperadoras = function () { 16. $http.get('/operadoras').success(function (operadoras) { 17. $scope.operadoras = operadoras; 18. }); 19. }; 20. $scope.adicionarContato = function (contato) { 21. $http.post('/contatos', contato).success(function () { 22. $scope.carregarContatos(); 23. }); 24. delete $scope.contato; 25. }; 26. $scope.carregarContatos(); 27. $scope.carregarOperadoras(); 28. });
  70. 70. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html',controller:'ListaTelefonicaCtrl'}); 5. $routeProvider.when('/contato/:idContato', {templateUrl:'contato.html',controller:'ContatoCtrl'}); 6. $routeProvider. 7. }); 8. 9. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 10. $scope.app = "Lista Telefônica"; 11. $scope.carregarContatos = function () { 12. $http.get('/contatos').success(function (contatos) { 13. $scope.listaTelefonica = contatos; 14. }); 15. }; 16. $scope.carregarOperadoras = function () { 17. $http.get('/operadoras').success(function (operadoras) { 18. $scope.operadoras = operadoras; 19. }); 20. }; 21. $scope.adicionarContato = function (contato) { 22. $http.post('/contatos', contato).success(function () { 23. $scope.carregarContatos(); 24. }); 25. delete $scope.contato; 26. }; 27. $scope.carregarContatos(); 28. $scope.carregarOperadoras(); 29. });
  71. 71. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html',controller:'ListaTelefonicaCtrl'}); 5. $routeProvider.when('/contato/:idContato', {templateUrl:'contato.html',controller:'ContatoCtrl'}); 6. $routeProvider.when(); 7. }); 8. 9. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 10. $scope.app = "Lista Telefônica"; 11. $scope.carregarContatos = function () { 12. $http.get('/contatos').success(function (contatos) { 13. $scope.listaTelefonica = contatos; 14. }); 15. }; 16. $scope.carregarOperadoras = function () { 17. $http.get('/operadoras').success(function (operadoras) { 18. $scope.operadoras = operadoras; 19. }); 20. }; 21. $scope.adicionarContato = function (contato) { 22. $http.post('/contatos', contato).success(function () { 23. $scope.carregarContatos(); 24. }); 25. delete $scope.contato; 26. }; 27. $scope.carregarContatos(); 28. $scope.carregarOperadoras(); 29. });
  72. 72. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html',controller:'ListaTelefonicaCtrl'}); 5. $routeProvider.when('/contato/:idContato', {templateUrl:'contato.html',controller:'ContatoCtrl'}); 6. $routeProvider.when('/operadoras'); 7. }); 8. 9. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 10. $scope.app = "Lista Telefônica"; 11. $scope.carregarContatos = function () { 12. $http.get('/contatos').success(function (contatos) { 13. $scope.listaTelefonica = contatos; 14. }); 15. }; 16. $scope.carregarOperadoras = function () { 17. $http.get('/operadoras').success(function (operadoras) { 18. $scope.operadoras = operadoras; 19. }); 20. }; 21. $scope.adicionarContato = function (contato) { 22. $http.post('/contatos', contato).success(function () { 23. $scope.carregarContatos(); 24. }); 25. delete $scope.contato; 26. }; 27. $scope.carregarContatos(); 28. $scope.carregarOperadoras(); 29. });
  73. 73. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html',controller:'ListaTelefonicaCtrl'}); 5. $routeProvider.when('/contato/:idContato', {templateUrl:'contato.html',controller:'ContatoCtrl'}); 6. $routeProvider.when('/operadoras', {}); 7. }); 8. 9. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 10. $scope.app = "Lista Telefônica"; 11. $scope.carregarContatos = function () { 12. $http.get('/contatos').success(function (contatos) { 13. $scope.listaTelefonica = contatos; 14. }); 15. }; 16. $scope.carregarOperadoras = function () { 17. $http.get('/operadoras').success(function (operadoras) { 18. $scope.operadoras = operadoras; 19. }); 20. }; 21. $scope.adicionarContato = function (contato) { 22. $http.post('/contatos', contato).success(function () { 23. $scope.carregarContatos(); 24. }); 25. delete $scope.contato; 26. }; 27. $scope.carregarContatos(); 28. $scope.carregarOperadoras(); 29. });
  74. 74. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html',controller:'ListaTelefonicaCtrl'}); 5. $routeProvider.when('/contato/:idContato', {templateUrl:'contato.html',controller:'ContatoCtrl'}); 6. $routeProvider.when('/operadoras', {templateUrl:'operadoras.html'}); 7. }); 8. 9. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 10. $scope.app = "Lista Telefônica"; 11. $scope.carregarContatos = function () { 12. $http.get('/contatos').success(function (contatos) { 13. $scope.listaTelefonica = contatos; 14. }); 15. }; 16. $scope.carregarOperadoras = function () { 17. $http.get('/operadoras').success(function (operadoras) { 18. $scope.operadoras = operadoras; 19. }); 20. }; 21. $scope.adicionarContato = function (contato) { 22. $http.post('/contatos', contato).success(function () { 23. $scope.carregarContatos(); 24. }); 25. delete $scope.contato; 26. }; 27. $scope.carregarContatos(); 28. $scope.carregarOperadoras(); 29. });
  75. 75. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html',controller:'ListaTelefonicaCtrl'}); 5. $routeProvider.when('/contato/:idContato', {templateUrl:'contato.html',controller:'ContatoCtrl'}); 6. $routeProvider.when('/operadoras', {templateUrl:'operadoras.html',controller:'OperadorasCtrl'}); 7. }); 8. 9. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 10. $scope.app = "Lista Telefônica"; 11. $scope.carregarContatos = function () { 12. $http.get('/contatos').success(function (contatos) { 13. $scope.listaTelefonica = contatos; 14. }); 15. }; 16. $scope.carregarOperadoras = function () { 17. $http.get('/operadoras').success(function (operadoras) { 18. $scope.operadoras = operadoras; 19. }); 20. }; 21. $scope.adicionarContato = function (contato) { 22. $http.post('/contatos', contato).success(function () { 23. $scope.carregarContatos(); 24. }); 25. delete $scope.contato; 26. }; 27. $scope.carregarContatos(); 28. $scope.carregarOperadoras(); 29. });
  76. 76. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html',controller:'ListaTelefonicaCtrl'}); 5. $routeProvider.when('/contato/:idContato', {templateUrl:'contato.html',controller:'ContatoCtrl'}); 6. $routeProvider.when('/operadoras', {templateUrl:'operadoras.html',controller:'OperadorasCtrl'}); 7. }); 8. 9. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 10. $scope.app = "Lista Telefônica"; 11. $scope.carregarContatos = function () { 12. $http.get('/contatos').success(function (contatos) { 13. $scope.listaTelefonica = contatos; 14. }); 15. }; 16. $scope.carregarOperadoras = function () { 17. $http.get('/operadoras').success(function (operadoras) { 18. $scope.operadoras = operadoras; 19. }); 20. }; 21. $scope.adicionarContato = function (contato) { 22. $http.post('/contatos', contato).success(function () { 23. $scope.carregarContatos(); 24. }); 25. delete $scope.contato; 26. }; 27. $scope.carregarContatos(); 28. $scope.carregarOperadoras(); 29. });
  77. 77. otherwise
  78. 78. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html',controller:'ListaTelefonicaCtrl'}); 5. $routeProvider.when('/contato/:idContato', {templateUrl:'contato.html',controller:'ContatoCtrl'}); 6. $routeProvider.when('/operadoras', {templateUrl:'operadoras.html',controller:'OperadorasCtrl'}); 7. }); 8. 9. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 10. $scope.app = "Lista Telefônica"; 11. $scope.carregarContatos = function () { 12. $http.get('/contatos').success(function (contatos) { 13. $scope.listaTelefonica = contatos; 14. }); 15. }; 16. $scope.carregarOperadoras = function () { 17. $http.get('/operadoras').success(function (operadoras) { 18. $scope.operadoras = operadoras; 19. }); 20. }; 21. $scope.adicionarContato = function (contato) { 22. $http.post('/contatos', contato).success(function () { 23. $scope.carregarContatos(); 24. }); 25. delete $scope.contato; 26. }; 27. $scope.carregarContatos(); 28. $scope.carregarOperadoras(); 29. });
  79. 79. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html',controller:'ListaTelefonicaCtrl'}); 5. $routeProvider.when('/contato/:idContato', {templateUrl:'contato.html',controller:'ContatoCtrl'}); 6. $routeProvider.when('/operadoras', {templateUrl:'operadoras.html',controller:'OperadorasCtrl'}); 7. $routeProvider. 8. }); 9. 10. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 11. $scope.app = "Lista Telefônica"; 12. $scope.carregarContatos = function () { 13. $http.get('/contatos').success(function (contatos) { 14. $scope.listaTelefonica = contatos; 15. }); 16. }; 17. $scope.carregarOperadoras = function () { 18. $http.get('/operadoras').success(function (operadoras) { 19. $scope.operadoras = operadoras; 20. }); 21. }; 22. $scope.adicionarContato = function (contato) { 23. $http.post('/contatos', contato).success(function () { 24. $scope.carregarContatos(); 25. }); 26. delete $scope.contato; 27. }; 28. $scope.carregarContatos(); 29. $scope.carregarOperadoras(); 30. });
  80. 80. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html',controller:'ListaTelefonicaCtrl'}); 5. $routeProvider.when('/contato/:idContato', {templateUrl:'contato.html',controller:'ContatoCtrl'}); 6. $routeProvider.when('/operadoras', {templateUrl:'operadoras.html',controller:'OperadorasCtrl'}); 7. $routeProvider.otherwise(); 8. }); 9. 10. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 11. $scope.app = "Lista Telefônica"; 12. $scope.carregarContatos = function () { 13. $http.get('/contatos').success(function (contatos) { 14. $scope.listaTelefonica = contatos; 15. }); 16. }; 17. $scope.carregarOperadoras = function () { 18. $http.get('/operadoras').success(function (operadoras) { 19. $scope.operadoras = operadoras; 20. }); 21. }; 22. $scope.adicionarContato = function (contato) { 23. $http.post('/contatos', contato).success(function () { 24. $scope.carregarContatos(); 25. }); 26. delete $scope.contato; 27. }; 28. $scope.carregarContatos(); 29. $scope.carregarOperadoras(); 30. });
  81. 81. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html',controller:'ListaTelefonicaCtrl'}); 5. $routeProvider.when('/contato/:idContato', {templateUrl:'contato.html',controller:'ContatoCtrl'}); 6. $routeProvider.when('/operadoras', {templateUrl:'operadoras.html',controller:'OperadorasCtrl'}); 7. $routeProvider.otherwise({}); 8. }); 9. 10. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 11. $scope.app = "Lista Telefônica"; 12. $scope.carregarContatos = function () { 13. $http.get('/contatos').success(function (contatos) { 14. $scope.listaTelefonica = contatos; 15. }); 16. }; 17. $scope.carregarOperadoras = function () { 18. $http.get('/operadoras').success(function (operadoras) { 19. $scope.operadoras = operadoras; 20. }); 21. }; 22. $scope.adicionarContato = function (contato) { 23. $http.post('/contatos', contato).success(function () { 24. $scope.carregarContatos(); 25. }); 26. delete $scope.contato; 27. }; 28. $scope.carregarContatos(); 29. $scope.carregarOperadoras(); 30. });
  82. 82. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html',controller:'ListaTelefonicaCtrl'}); 5. $routeProvider.when('/contato/:idContato', {templateUrl:'contato.html',controller:'ContatoCtrl'}); 6. $routeProvider.when('/operadoras', {templateUrl:'operadoras.html',controller:'OperadorasCtrl'}); 7. $routeProvider.otherwise({redirectTo:'/listaTelefonica'}); 8. }); 9. 10. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 11. $scope.app = "Lista Telefônica"; 12. $scope.carregarContatos = function () { 13. $http.get('/contatos').success(function (contatos) { 14. $scope.listaTelefonica = contatos; 15. }); 16. }; 17. $scope.carregarOperadoras = function () { 18. $http.get('/operadoras').success(function (operadoras) { 19. $scope.operadoras = operadoras; 20. }); 21. }; 22. $scope.adicionarContato = function (contato) { 23. $http.post('/contatos', contato).success(function () { 24. $scope.carregarContatos(); 25. }); 26. delete $scope.contato; 27. }; 28. $scope.carregarContatos(); 29. $scope.carregarOperadoras(); 30. });
  83. 83. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.config(function ($routeProvider) { 4. $routeProvider.when('/listaTelefonica', {templateUrl:'listaTelefonica.html',controller:'ListaTelefonicaCtrl'}); 5. $routeProvider.when('/contato/:idContato', {templateUrl:'contato.html',controller:'ContatoCtrl'}); 6. $routeProvider.when('/operadoras', {templateUrl:'operadoras.html',controller:'OperadorasCtrl'}); 7. $routeProvider.otherwise({redirectTo:'/listaTelefonica'}); 8. }); 9. 10. app.controller("ListaTelefonicaCtrl", function ($scope, $http) { 11. $scope.app = "Lista Telefônica"; 12. $scope.carregarContatos = function () { 13. $http.get('/contatos').success(function (contatos) { 14. $scope.listaTelefonica = contatos; 15. }); 16. }; 17. $scope.carregarOperadoras = function () { 18. $http.get('/operadoras').success(function (operadoras) { 19. $scope.operadoras = operadoras; 20. }); 21. }; 22. $scope.adicionarContato = function (contato) { 23. $http.post('/contatos', contato).success(function () { 24. $scope.carregarContatos(); 25. }); 26. delete $scope.contato; 27. }; 28. $scope.carregarContatos(); 29. $scope.carregarOperadoras(); 30. });
  84. 84. ngView
  85. 85. 1. <html ng-app> 2. <head> 3. <script src='angular.js'></script> 4. </head> 5. <body> 6. </body> 7. </html>
  86. 86. 1. <html ng-app="listaTelefonica"> 2. <head> 3. <script src='angular.js'></script> 4. </head> 5. <body> 6. </body> 7. </html>
  87. 87. 1. <html ng-app="listaTelefonica"> 2. <head> 3. <script src='angular.js'></script> 4. <script src='angular-route.js'></script> 5. </head> 6. <body> 7. </body> 8. </html>
  88. 88. 1. <html ng-app="listaTelefonica"> 2. <head> 3. <script src='angular.js'></script> 4. <script src='angular-route.js'></script> 5. </head> 6. <body> 7. <div ng-view></div> 8. </body> 9. </html>
  89. 89. Criando um serviço
  90. 90. Quando devemos criar serviços?
  91. 91. Criando um serviço para interagir com a API REST
  92. 92. 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. });
  93. 93. 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. });
  94. 94. 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. });
  95. 95. factory
  96. 96. 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. });
  97. 97. 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();
  98. 98. 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");
  99. 99. 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. });
  100. 100. 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. });
  101. 101. 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. });
  102. 102. 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. });
  103. 103. 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. });
  104. 104. 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. });
  105. 105. 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. });
  106. 106. 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. });
  107. 107. 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. });
  108. 108. 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. });
  109. 109. 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. });
  110. 110. 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. });
  111. 111. 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. });
  112. 112. Inicializando o módulo
  113. 113. run
  114. 114. 1. var app = angular.module("listaTelefonica", ['ngRoute']);
  115. 115. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.run();
  116. 116. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.run(function() { 4. });
  117. 117. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.run(function($rootScope) { 4. });
  118. 118. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.run(function($rootScope) { 4. 5. });
  119. 119. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.run(function($rootScope) { 4. $rootScope.app = "Lista Telefônica"; 5. });
  120. 120. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.run(function($rootScope) { 4. $rootScope.app = "Lista Telefônica"; 5. 6. $rootScope.login = function (usuario, senha) { 7. }; 8. });
  121. 121. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.run(function($rootScope, ListaTelefonicaAPI) { 4. $rootScope.app = "Lista Telefônica"; 5. 6. $rootScope.login = function (usuario, senha) { 7. }; 8. });
  122. 122. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.run(function($rootScope, ListaTelefonicaAPI) { 4. $rootScope.app = "Lista Telefônica"; 5. 6. $rootScope.login = function (usuario, senha) { 7. ListaTelefonicaAPI.login(usuario, senha).success(function () { 8. // ... 9. }); 10. }; 11. });
  123. 123. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.run(function($rootScope, ListaTelefonicaAPI) { 4. $rootScope.app = "Lista Telefônica"; 5. 6. $rootScope.login = function (usuario, senha) { 7. ListaTelefonicaAPI.login(usuario, senha).success(function () { 8. // ... 9. }); 10. }; 11. });
  124. 124. Criando um filtro
  125. 125. 1. var app = angular.module("listaTelefonica", ['ngRoute']);
  126. 126. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.filter();
  127. 127. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.filter("crypto");
  128. 128. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.filter("crypto", function () { 4. return function (input) { 5. var plain = 'abcdefghijklmnopqrstuvwxyz'; 6. var cipher = 'phqgiumeaylnofdxjkrcvstzwb'; 7. var output = ""; 8. for (var pos = 0; pos < input.length; pos++) { 9. output += cipher[plain.indexOf(input[pos])]; 10. } 11. return output; 12. } 13. });
  129. 129. Criando uma diretiva
  130. 130. 1. var app = angular.module("listaTelefonica", ['ngRoute']);

×