Evoluindo a arquitetura de uma aplicação com AngularJS

  • 3,423 views
Uploaded on

Evoluindo a arquitetura de uma aplicação com AngularJS

Evoluindo a arquitetura de uma aplicação com AngularJS

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,423
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Evoluindo a arquitetura de uma aplicação com AngularJS Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br
  • 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. 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. • 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. Criando um módulo
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Module API
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Configurando o módulo
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Single-Page Application
  • 40. Single-Page Application?
  • 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. 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. 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. 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. 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. 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. 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. 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. when
  • 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. 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. index.html#/listaTelefonica
  • 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. 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. 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. 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. 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. 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. index.html#/contato/1
  • 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. 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. 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. 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. 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. 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. 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. 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. index.html#/operadoras
  • 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. 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. 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. 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. 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. 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. 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. 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. otherwise
  • 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. 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. 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. 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. 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. 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. ngView
  • 85. 1. <html ng-app> 2. <head> 3. <script src='angular.js'></script> 4. </head> 5. <body> 6. </body> 7. </html>
  • 86. 1. <html ng-app="listaTelefonica"> 2. <head> 3. <script src='angular.js'></script> 4. </head> 5. <body> 6. </body> 7. </html>
  • 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. 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. Criando um serviço
  • 90. Quando devemos criar serviços?
  • 91. Criando um serviço para interagir com a API REST
  • 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. 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. 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. factory
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Inicializando o módulo
  • 113. run
  • 114. 1. var app = angular.module("listaTelefonica", ['ngRoute']);
  • 115. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.run();
  • 116. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.run(function() { 4. });
  • 117. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.run(function($rootScope) { 4. });
  • 118. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.run(function($rootScope) { 4. 5. });
  • 119. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.run(function($rootScope) { 4. $rootScope.app = "Lista Telefônica"; 5. });
  • 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. 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. 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. 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. Criando um filtro
  • 125. 1. var app = angular.module("listaTelefonica", ['ngRoute']);
  • 126. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.filter();
  • 127. 1. var app = angular.module("listaTelefonica", ['ngRoute']); 2. 3. app.filter("crypto");
  • 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. Criando uma diretiva
  • 130. 1. var app = angular.module("listaTelefonica", ['ngRoute']);