Evoluindo a arquitetura de uma aplicação com AngularJS

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']);