More Related Content More from Rodrigo Branas (14) Utilizando diretivas com AngularJS1. Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br
Utilizando Diretivas
com AngularJS
4. 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.
5. • 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?
6. Diretivas são extensões da linguagem HTML
que permitem a implementação de novos
comportamentos, de forma declarativa.
20. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. </script>
7. </head>
8. </html>
21. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. </script>
7. </head>
8. </html>
22. Apenas uma aplicação AngularJS pode ser
carregada por documento HTML, nesse
caso, apenas o primeiro elemento com
ngApp será considerado.
24. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. </script>
7. </head>
8. </html>
25. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. </script>
7. </head>
8. </html>
26. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. </script>
7. </head>
8. </html>
27. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller();
7. </script>
8. </head>
9. </html>
28. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller();
7. </script>
8. </head>
9. </html>
29. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl");
7. </script>
8. </head>
9. </html>
30. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl");
7. </script>
8. </head>
9. </html>
31. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. });
8. </script>
9. </head>
10. </html>
32. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. });
8. </script>
9. </head>
10. </html>
33. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. });
8. </script>
9. </head>
10. <body>
11. </body>
12. </html>
34. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. });
8. </script>
9. </head>
10. <body>
11. </body>
12. </html>
35. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. });
8. </script>
9. </head>
10. <body ng-controller="">
11. </body>
12. </html>
36. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. });
8. </script>
9. </head>
10. <body ng-controller="">
11. </body>
12. </html>
37. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. });
8. </script>
9. </head>
10. <body ng-controller="listaTelefonicaCtrl">
11. </body>
12. </html>
38. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. });
8. </script>
9. </head>
10. <body ng-controller="listaTelefonicaCtrl">
11. </body>
12. </html>
42. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. });
8. </script>
9. </head>
10. <body ng-controller="listaTelefonicaCtrl">
11. </body>
12. </html>
43. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. });
8. </script>
9. </head>
10. <body ng-controller="listaTelefonicaCtrl">
11. <h1 ng-bind="titulo"></h1>
12. </body>
13. </html>
44. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. });
8. </script>
9. </head>
10. <body ng-controller="listaTelefonicaCtrl">
11. <h1 ng-bind="titulo"></h1>
12. </body>
13. </html>
45. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. });
9. </script>
10. </head>
11. <body ng-controller="listaTelefonicaCtrl">
12. <h1 ng-bind="titulo"></h1>
13. </body>
14. </html>
46. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. });
9. </script>
10. </head>
11. <body ng-controller="listaTelefonicaCtrl">
12. <h1 ng-bind="titulo"></h1>
13. </body>
14. </html>
48. Expressões
São trechos de código escritos entre chaves
duplas ({{ e }}) utilizados basicamente para
acessar e exibir atributos do $scope.
49. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. });
9. </script>
10. </head>
11. <body ng-controller="listaTelefonicaCtrl">
12. <h1 ng-bind="titulo"></h1>
13. </body>
14. </html>
50. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. });
9. </script>
10. </head>
11. <body ng-controller="listaTelefonicaCtrl">
12. <h1 ng-bind="titulo"></h1>
13. </body>
14. </html>
51. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. });
9. </script>
10. </head>
11. <body ng-controller="listaTelefonicaCtrl">
12. <h1></h1>
13. </body>
14. </html>
52. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. });
9. </script>
10. </head>
11. <body ng-controller="listaTelefonicaCtrl">
12. <h1>{{titulo}}</h1>
13. </body>
14. </html>
53. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. });
9. </script>
10. </head>
11. <body ng-controller="listaTelefonicaCtrl">
12. <h1>{{titulo}}</h1>
13. </body>
14. </html>
57. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. });
9. </script>
10. </head>
11. <body ng-controller="listaTelefonicaCtrl">
12. <h1>{{titulo}}</h1>
13. </body>
14. </html>
58. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. });
9. </script>
10. </head>
11. <body ng-controller="listaTelefonicaCtrl">
12. <h1>{{titulo}}</h1>
13. </body>
14. </html>
59. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. });
9. </script>
10. </head>
11. <body ng-controller="listaTelefonicaCtrl">
12. <h1>{{titulo}}</h1>
13. </body>
14. </html>
60. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. $scope.contatos = [];
9. });
10. </script>
11. </head>
12. <body ng-controller="listaTelefonicaCtrl">
13. <h1>{{titulo}}</h1>
14. </body>
15. </html>
61. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. $scope.contatos = [];
9. });
10. </script>
11. </head>
12. <body ng-controller="listaTelefonicaCtrl">
13. <h1>{{titulo}}</h1>
14. </body>
15. </html>
62. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
9. {nome: "André", telefone: "99767899"},
10. {nome: "Carlos", telefone: "99987689"}];
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. </body>
17. </html>
63. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
9. {nome: "André", telefone: "99767899"},
10. {nome: "Carlos", telefone: "99987689"}];
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. </body>
17. </html>
64. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
9. {nome: "André", telefone: "99767899"},
10. {nome: "Carlos", telefone: "99987689"}];
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. </table>
18. </body>
19. </html>
65. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
9. {nome: "André", telefone: "99767899"},
10. {nome: "Carlos", telefone: "99987689"}];
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. </table>
18. </body>
19. </html>
66. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
9. {nome: "André", telefone: "99767899"},
10. {nome: "Carlos", telefone: "99987689"}];
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. </table>
18. </body>
19. </html>
67. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
9. {nome: "André", telefone: "99767899"},
10. {nome: "Carlos", telefone: "99987689"}];
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. </table>
18. </body>
19. </html>
68. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
9. {nome: "André", telefone: "99767899"},
10. {nome: "Carlos", telefone: "99987689"}];
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. </table>
18. </body>
19. </html>
69. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
9. {nome: "André", telefone: "99767899"},
10. {nome: "Carlos", telefone: "99987689"}];
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. </table>
18. </body>
19. </html>
70. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
9. {nome: "André", telefone: "99767899"},
10. {nome: "Carlos", telefone: "99987689"}];
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. </tr>
19. </table>
20. </body>
21. </html>
71. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
9. {nome: "André", telefone: "99767899"},
10. {nome: "Carlos", telefone: "99987689"}];
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. </tr>
19. </table>
20. </body>
21. </html>
72. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
9. {nome: "André", telefone: "99767899"},
10. {nome: "Carlos", telefone: "99987689"}];
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. </table>
21. </body>
22. </html>
73. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
9. {nome: "André", telefone: "99767899"},
10. {nome: "Carlos", telefone: "99987689"}];
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. </table>
21. </body>
22. </html>
74. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
9. {nome: "André", telefone: "99767899"},
10. {nome: "Carlos", telefone: "99987689"}];
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr>
21. </tr>
22. </table>
23. </body>
24. </html>
75. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
9. {nome: "André", telefone: "99767899"},
10. {nome: "Carlos", telefone: "99987689"}];
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr>
21. </tr>
22. </table>
23. </body>
24. </html>
76. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
9. {nome: "André", telefone: "99767899"},
10. {nome: "Carlos", telefone: "99987689"}];
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr ng-repeat="">
21. </tr>
22. </table>
23. </body>
24. </html>
77. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
9. {nome: "André", telefone: "99767899"},
10. {nome: "Carlos", telefone: "99987689"}];
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr ng-repeat="contato in contatos">
21. </tr>
22. </table>
23. </body>
24. </html>
78. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
9. {nome: "André", telefone: "99767899"},
10. {nome: "Carlos", telefone: "99987689"}];
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr ng-repeat="contato in contatos">
21. </tr>
22. </table>
23. </body>
24. </html>
79. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
9. {nome: "André", telefone: "99767899"},
10. {nome: "Carlos", telefone: "99987689"}];
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr ng-repeat="contato in contatos">
21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
22. </tr>
23. </table>
24. </body>
25. </html>
80. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
9. {nome: "André", telefone: "99767899"},
10. {nome: "Carlos", telefone: "99987689"}];
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr ng-repeat="contato in contatos">
21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
22. </tr>
23. </table>
24. </body>
25. </html>
84. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
9. {nome: "André", telefone: "99767899"},
10. {nome: "Carlos", telefone: "99987689"}];
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr ng-repeat="contato in contatos">
21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
22. </tr>
23. </table>
24. </body>
25. </html>
85. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
9. {nome: "André", telefone: "99767899"},
10. {nome: "Carlos", telefone: "99987689"}];
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr ng-repeat="contato in contatos">
21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
22. </tr>
23. </table>
24. </body>
25. </html>
86. 1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.titulo = "Lista Telefônica";
8. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
9. {nome: "André", telefone: "99767899"},
10. {nome: "Carlos", telefone: "99987689"}];
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr ng-repeat="contato in contatos">
21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
22. </tr>
23. </table>
24. </body>
25. </html>
87. 1. <head>
2. <script src='angular.js'></script>
3. <script>
4. var app = angular.module("listaTelefonica", []);
5. app.controller("listaTelefonicaCtrl", function ($scope) {
6. $scope.titulo = "Lista Telefônica";
7. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
8. {nome: "André", telefone: "99767899"},
9. {nome: "Carlos", telefone: "99987689"}];
10. });
11. </script>
12. </head>
13. <body ng-controller="listaTelefonicaCtrl">
14. <h1>{{titulo}}</h1>
15. <table>
16. <tr>
17. <th>Nome</th><th>Telefone</th>
18. </tr>
19. <tr ng-repeat="contato in contatos">
20. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
21. </tr>
22. </table>
23. </body>
24. </html>
88. 1. <script src='angular.js'></script>
2. <script>
3. var app = angular.module("listaTelefonica", []);
4. app.controller("listaTelefonicaCtrl", function ($scope) {
5. $scope.titulo = "Lista Telefônica";
6. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
7. {nome: "André", telefone: "99767899"},
8. {nome: "Carlos", telefone: "99987689"}];
9. });
10. </script>
11. </head>
12. <body ng-controller="listaTelefonicaCtrl">
13. <h1>{{titulo}}</h1>
14. <table>
15. <tr>
16. <th>Nome</th><th>Telefone</th>
17. </tr>
18. <tr ng-repeat="contato in contatos">
19. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
20. </tr>
21. </table>
22. </body>
23. </html>
89. 1. <script src='angular.js'></script>
2. <script>
3. var app = angular.module("listaTelefonica", []);
4. app.controller("listaTelefonicaCtrl", function ($scope) {
5. $scope.titulo = "Lista Telefônica";
6. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
7. {nome: "André", telefone: "99767899"},
8. {nome: "Carlos", telefone: "99987689"}];
9. });
10. </script>
11. </head>
12. <body ng-controller="listaTelefonicaCtrl">
13. <h1>{{titulo}}</h1>
14. <table>
15. <tr>
16. <th>Nome</th><th>Telefone</th>
17. </tr>
18. <tr ng-repeat="contato in contatos">
19. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
20. </tr>
21. </table>
22. <input type="text" ng-model="nome" placeholder="Nome"/>
23. </body>
24. </html>
90. 1. <script src='angular.js'></script>
2. <script>
3. var app = angular.module("listaTelefonica", []);
4. app.controller("listaTelefonicaCtrl", function ($scope) {
5. $scope.titulo = "Lista Telefônica";
6. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
7. {nome: "André", telefone: "99767899"},
8. {nome: "Carlos", telefone: "99987689"}];
9. });
10. </script>
11. </head>
12. <body ng-controller="listaTelefonicaCtrl">
13. <h1>{{titulo}}</h1>
14. <table>
15. <tr>
16. <th>Nome</th><th>Telefone</th>
17. </tr>
18. <tr ng-repeat="contato in contatos">
19. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
20. </tr>
21. </table>
22. <input type="text" ng-model="nome" placeholder="Nome"/>
23. <input type="text" ng-model="telefone" placeholder="Telefone"/>
24. </body>
25. </html>
91. 1. <script src='angular.js'></script>
2. <script>
3. var app = angular.module("listaTelefonica", []);
4. app.controller("listaTelefonicaCtrl", function ($scope) {
5. $scope.titulo = "Lista Telefônica";
6. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
7. {nome: "André", telefone: "99767899"},
8. {nome: "Carlos", telefone: "99987689"}];
9. });
10. </script>
11. </head>
12. <body ng-controller="listaTelefonicaCtrl">
13. <h1>{{titulo}}</h1>
14. <table>
15. <tr>
16. <th>Nome</th><th>Telefone</th>
17. </tr>
18. <tr ng-repeat="contato in contatos">
19. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
20. </tr>
21. </table>
22. <input type="text" ng-model="nome" placeholder="Nome"/>
23. <input type="text" ng-model="telefone" placeholder="Telefone"/>
24. </body>
25. </html>
97. 1. <script src='angular.js'></script>
2. <script>
3. var app = angular.module("listaTelefonica", []);
4. app.controller("listaTelefonicaCtrl", function ($scope) {
5. $scope.titulo = "Lista Telefônica";
6. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
7. {nome: "André", telefone: "99767899"},
8. {nome: "Carlos", telefone: "99987689"}];
9. });
10. </script>
11. </head>
12. <body ng-controller="listaTelefonicaCtrl">
13. <h1>{{titulo}}</h1>
14. <table>
15. <tr>
16. <th>Nome</th><th>Telefone</th>
17. </tr>
18. <tr ng-repeat="contato in contatos">
19. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
20. </tr>
21. </table>
22. <input type="text" ng-model="nome" placeholder="Nome"/>
23. <input type="text" ng-model="telefone" placeholder="Telefone"/>
24. </body>
25. </html>
98. 1. <script src='angular.js'></script>
2. <script>
3. var app = angular.module("listaTelefonica", []);
4. app.controller("listaTelefonicaCtrl", function ($scope) {
5. $scope.titulo = "Lista Telefônica";
6. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
7. {nome: "André", telefone: "99767899"},
8. {nome: "Carlos", telefone: "99987689"}];
9. });
10. </script>
11. </head>
12. <body ng-controller="listaTelefonicaCtrl">
13. <h1>{{titulo}}</h1>
14. <table>
15. <tr>
16. <th>Nome</th><th>Telefone</th>
17. </tr>
18. <tr ng-repeat="contato in contatos">
19. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
20. </tr>
21. </table>
22. <input type="text" ng-model="nome" placeholder="Nome"/>
23. <input type="text" ng-model="telefone" placeholder="Telefone"/>
24. <button>Adicionar</button>
25. </body>
26. </html>
99. 1. <script src='angular.js'></script>
2. <script>
3. var app = angular.module("listaTelefonica", []);
4. app.controller("listaTelefonicaCtrl", function ($scope) {
5. $scope.titulo = "Lista Telefônica";
6. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
7. {nome: "André", telefone: "99767899"},
8. {nome: "Carlos", telefone: "99987689"}];
9. });
10. </script>
11. </head>
12. <body ng-controller="listaTelefonicaCtrl">
13. <h1>{{titulo}}</h1>
14. <table>
15. <tr>
16. <th>Nome</th><th>Telefone</th>
17. </tr>
18. <tr ng-repeat="contato in contatos">
19. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
20. </tr>
21. </table>
22. <input type="text" ng-model="nome" placeholder="Nome"/>
23. <input type="text" ng-model="telefone" placeholder="Telefone"/>
24. <button ng-click="adicionarContato(nome, telefone)">Adicionar</button>
25. </body>
26. </html>
100. 1. <script src='angular.js'></script>
2. <script>
3. var app = angular.module("listaTelefonica", []);
4. app.controller("listaTelefonicaCtrl", function ($scope) {
5. $scope.titulo = "Lista Telefônica";
6. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
7. {nome: "André", telefone: "99767899"},
8. {nome: "Carlos", telefone: "99987689"}];
9. });
10. </script>
11. </head>
12. <body ng-controller="listaTelefonicaCtrl">
13. <h1>{{titulo}}</h1>
14. <table>
15. <tr>
16. <th>Nome</th><th>Telefone</th>
17. </tr>
18. <tr ng-repeat="contato in contatos">
19. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
20. </tr>
21. </table>
22. <input type="text" ng-model="nome" placeholder="Nome"/>
23. <input type="text" ng-model="telefone" placeholder="Telefone"/>
24. <button ng-click="adicionarContato(nome, telefone)">Adicionar</button>
25. </body>
26. </html>
101. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. });
9. </script>
10. </head>
11. <body ng-controller="listaTelefonicaCtrl">
12. <h1>{{titulo}}</h1>
13. <table>
14. <tr>
15. <th>Nome</th><th>Telefone</th>
16. </tr>
17. <tr ng-repeat="contato in contatos">
18. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
19. </tr>
20. </table>
21. <input type="text" ng-model="nome" placeholder="Nome"/>
22. <input type="text" ng-model="telefone" placeholder="Telefone"/>
23. <button ng-click="adicionarContato(nome, telefone)">Adicionar</button>
24. </body>
25. </html>
102. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. });
9. </script>
10. </head>
11. <body ng-controller="listaTelefonicaCtrl">
12. <h1>{{titulo}}</h1>
13. <table>
14. <tr>
15. <th>Nome</th><th>Telefone</th>
16. </tr>
17. <tr ng-repeat="contato in contatos">
18. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
19. </tr>
20. </table>
21. <input type="text" ng-model="nome" placeholder="Nome"/>
22. <input type="text" ng-model="telefone" placeholder="Telefone"/>
23. <button ng-click="adicionarContato(nome, telefone)">Adicionar</button>
24. </body>
25. </html>
103. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. });
9. </script>
10. </head>
11. <body ng-controller="listaTelefonicaCtrl">
12. <h1>{{titulo}}</h1>
13. <table>
14. <tr>
15. <th>Nome</th><th>Telefone</th>
16. </tr>
17. <tr ng-repeat="contato in contatos">
18. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
19. </tr>
20. </table>
21. <input type="text" ng-model="nome" placeholder="Nome"/>
22. <input type="text" ng-model="telefone" placeholder="Telefone"/>
23. <button ng-click="adicionarContato(nome, telefone)">Adicionar</button>
24. </body>
25. </html>
104. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. });
9. </script>
10. </head>
11. <body ng-controller="listaTelefonicaCtrl">
12. <h1>{{titulo}}</h1>
13. <table>
14. <tr>
15. <th>Nome</th><th>Telefone</th>
16. </tr>
17. <tr ng-repeat="contato in contatos">
18. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
19. </tr>
20. </table>
21. <input type="text" ng-model="nome" placeholder="Nome"/>
22. <input type="text" ng-model="telefone" placeholder="Telefone"/>
23. <button ng-click="adicionarContato(nome, telefone)">Adicionar</button>
24. </body>
25. </html>
105. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function (nome, telefone) {
9. $scope.contatos.push({nome: nome, telefone: telefone});
10. };
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr ng-repeat="contato in contatos">
21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
22. </tr>
23. </table>
24. <input type="text" ng-model="nome" placeholder="Nome"/>
25. <input type="text" ng-model="telefone" placeholder="Telefone"/>
26. <button ng-click="adicionarContato(nome, telefone)">Adicionar</button>
27. </body>
28. </html>
106. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function (nome, telefone) {
9. $scope.contatos.push({nome: nome, telefone: telefone});
10. };
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr ng-repeat="contato in contatos">
21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
22. </tr>
23. </table>
24. <input type="text" ng-model="nome" placeholder="Nome"/>
25. <input type="text" ng-model="telefone" placeholder="Telefone"/>
26. <button ng-click="adicionarContato(nome, telefone)">Adicionar</button>
27. </body>
28. </html>
108. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function (nome, telefone) {
9. $scope.contatos.push({nome: nome, telefone: telefone});
10. };
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr ng-repeat="contato in contatos">
21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
22. </tr>
23. </table>
24. <input type="text" ng-model="nome" placeholder="Nome"/>
25. <input type="text" ng-model="telefone" placeholder="Telefone"/>
26. <button ng-click="adicionarContato(nome, telefone)">Adicionar</button>
27. </body>
28. </html>
109. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function (nome, telefone) {
9. $scope.contatos.push({nome: nome, telefone: telefone});
10. };
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr ng-repeat="contato in contatos">
21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
22. </tr>
23. </table>
24. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
25. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
26. <button ng-click="adicionarContato(nome, telefone)">Adicionar</button>
27. </body>
28. </html>
110. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function (nome, telefone) {
9. $scope.contatos.push({nome: nome, telefone: telefone});
10. };
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr ng-repeat="contato in contatos">
21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
22. </tr>
23. </table>
24. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
25. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
26. <button ng-click="adicionarContato(nome, telefone)">Adicionar</button>
27. </body>
28. </html>
111. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function (nome, telefone) {
9. $scope.contatos.push({nome: nome, telefone: telefone});
10. };
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr ng-repeat="contato in contatos">
21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
22. </tr>
23. </table>
24. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
25. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
26. <button ng-click="adicionarContato(nome, telefone)">Adicionar</button>
27. </body>
28. </html>
112. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function (nome, telefone) {
9. $scope.contatos.push({nome: nome, telefone: telefone});
10. };
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr ng-repeat="contato in contatos">
21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
22. </tr>
23. </table>
24. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
25. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
26. <button ng-click="adicionarContato()">Adicionar</button>
27. </body>
28. </html>
113. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function (nome, telefone) {
9. $scope.contatos.push({nome: nome, telefone: telefone});
10. };
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr ng-repeat="contato in contatos">
21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
22. </tr>
23. </table>
24. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
25. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
26. <button ng-click="adicionarContato(contato)">Adicionar</button>
27. </body>
28. </html>
114. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function (nome, telefone) {
9. $scope.contatos.push({nome: nome, telefone: telefone});
10. };
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr ng-repeat="contato in contatos">
21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
22. </tr>
23. </table>
24. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
25. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
26. <button ng-click="adicionarContato(contato)">Adicionar</button>
27. </body>
28. </html>
115. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function (nome, telefone) {
9. $scope.contatos.push({nome: nome, telefone: telefone});
10. };
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr ng-repeat="contato in contatos">
21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
22. </tr>
23. </table>
24. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
25. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
26. <button ng-click="adicionarContato(contato)">Adicionar</button>
27. </body>
28. </html>
116. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function () {
9. $scope.contatos.push({nome: nome, telefone: telefone});
10. };
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr ng-repeat="contato in contatos">
21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
22. </tr>
23. </table>
24. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
25. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
26. <button ng-click="adicionarContato(contato)">Adicionar</button>
27. </body>
28. </html>
117. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function (contato) {
9. $scope.contatos.push({nome: nome, telefone: telefone});
10. };
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr ng-repeat="contato in contatos">
21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
22. </tr>
23. </table>
24. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
25. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
26. <button ng-click="adicionarContato(contato)">Adicionar</button>
27. </body>
28. </html>
118. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function (contato) {
9. $scope.contatos.push({nome: nome, telefone: telefone});
10. };
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr ng-repeat="contato in contatos">
21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
22. </tr>
23. </table>
24. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
25. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
26. <button ng-click="adicionarContato(contato)">Adicionar</button>
27. </body>
28. </html>
119. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function (contato) {
9. $scope.contatos.push({nome: nome, telefone: telefone});
10. };
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr ng-repeat="contato in contatos">
21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
22. </tr>
23. </table>
24. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
25. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
26. <button ng-click="adicionarContato(contato)">Adicionar</button>
27. </body>
28. </html>
120. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function (contato) {
9. $scope.contatos.push();
10. };
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr ng-repeat="contato in contatos">
21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
22. </tr>
23. </table>
24. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
25. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
26. <button ng-click="adicionarContato(contato)">Adicionar</button>
27. </body>
28. </html>
121. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function (contato) {
9. $scope.contatos.push(contato);
10. };
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr ng-repeat="contato in contatos">
21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
22. </tr>
23. </table>
24. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
25. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
26. <button ng-click="adicionarContato(contato)">Adicionar</button>
27. </body>
28. </html>
122. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function (contato) {
9. $scope.contatos.push(contato);
10. };
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr ng-repeat="contato in contatos">
21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
22. </tr>
23. </table>
24. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
25. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
26. <button ng-click="adicionarContato(contato)">Adicionar</button>
27. </body>
28. </html>
124. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function (contato) {
9. $scope.contatos.push(contato);
10. };
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr ng-repeat="contato in contatos">
21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
22. </tr>
23. </table>
24. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
25. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
26. <button ng-click="adicionarContato(contato)">Adicionar</button>
27. </body>
28. </html>
125. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function (contato) {
9. $scope.contatos.push(angular.copy(contato));
10. };
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr ng-repeat="contato in contatos">
21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
22. </tr>
23. </table>
24. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
25. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
26. <button ng-click="adicionarContato(contato)">Adicionar</button>
27. </body>
28. </html>
126. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function (contato) {
9. $scope.contatos.push(angular.copy(contato));
10. };
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr ng-repeat="contato in contatos">
21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
22. </tr>
23. </table>
24. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
25. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
26. <button ng-click="adicionarContato(contato)">Adicionar</button>
27. </body>
28. </html>
127. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function (contato) {
9. $scope.contatos.push(angular.copy(contato));
10. delete $scope.contato;
11. };
12. });
13. </script>
14. </head>
15. <body ng-controller="listaTelefonicaCtrl">
16. <h1>{{titulo}}</h1>
17. <table>
18. <tr>
19. <th>Nome</th><th>Telefone</th>
20. </tr>
21. <tr ng-repeat="contato in contatos">
22. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
23. </tr>
24. </table>
25. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
26. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
27. <button ng-click="adicionarContato(contato)">Adicionar</button>
28. </body>
128. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function (contato) {
9. $scope.contatos.push(angular.copy(contato));
10. delete $scope.contato;
11. };
12. });
13. </script>
14. </head>
15. <body ng-controller="listaTelefonicaCtrl">
16. <h1>{{titulo}}</h1>
17. <table>
18. <tr>
19. <th>Nome</th><th>Telefone</th>
20. </tr>
21. <tr ng-repeat="contato in contatos">
22. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
23. </tr>
24. </table>
25. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
26. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
27. <button ng-click="adicionarContato(contato)">Adicionar</button>
28. </body>
129. Outros eventos suportados
ngBlur – Executado ao sair do campo
ngCopy – Executado ao utilizar o comando Ctrl+C
ngCut – Executado ao utilizar o comando Ctrl+X
ngDblClick – Executado ao clicar duas vezes
ngFocus – Executado ao focas no campo
ngKeyDown – Executado ao pressionar uma tecla
ngKeyUp – Executado ao soltar uma tecla
ngMousedown – Executado ao apertar o botão do mouse
ngMouseenter – Executado ao passar o cursor do mouse
ngMouseleave – Executado ao sair com o cursor do mouse
ngMousemove – Executado ao mover com o mouse
ngMouseover – Executado ao passar com o mouse por cima
ngMouseup - Executado ao soltar o botão do mouse
ngPaste - Executado ao utilizar o comando Ctrl+V
135. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function (contato) {
9. $scope.contatos.push(angular.copy(contato));
10. delete $scope.contato;
11. };
12. });
13. </script>
14. </head>
15. <body ng-controller="listaTelefonicaCtrl">
16. <h1>{{titulo}}</h1>
17. <table>
18. <tr>
19. <th>Nome</th><th>Telefone</th>
20. </tr>
21. <tr ng-repeat="contato in contatos">
22. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
23. </tr>
24. </table>
25. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
26. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
27. <button ng-click="adicionarContato(contato)">Adicionar</button>
28. </body>
136. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function (contato) {
9. $scope.contatos.push(angular.copy(contato));
10. delete $scope.contato;
11. };
12. });
13. </script>
14. </head>
15. <body ng-controller="listaTelefonicaCtrl">
16. <h1>{{titulo}}</h1>
17. <table>
18. <tr>
19. <th>Nome</th><th>Telefone</th>
20. </tr>
21. <tr ng-repeat="contato in contatos">
22. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
23. </tr>
24. </table>
25. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
26. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
27. <button ng-click="adicionarContato(contato)">Adicionar</button>
28. </body>
137. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function (contato) {
9. $scope.contatos.push(angular.copy(contato));
10. delete $scope.contato;
11. };
12. });
13. </script>
14. </head>
15. <body ng-controller="listaTelefonicaCtrl">
16. <h1>{{titulo}}</h1>
17. <table>
18. <tr>
19. <th>Nome</th><th>Telefone</th>
20. </tr>
21. <tr ng-repeat="contato in contatos">
22. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
23. </tr>
24. </table>
25. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
26. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
27. <button ng-click="adicionarContato(contato)">Adicionar</button>
28. </body>
29. </html>
138. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function (contato) {
9. $scope.contatos.push(angular.copy(contato));
10. delete $scope.contato;
11. };
12. });
13. </script>
14. </head>
15. <body ng-controller="listaTelefonicaCtrl">
16. <h1>{{titulo}}</h1>
17. <table>
18. <tr>
19. <th>Nome</th><th>Telefone</th>
20. </tr>
21. <tr ng-repeat="contato in contatos">
22. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
23. </tr>
24. </table>
25. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
26. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
27. <button ng-click="adicionarContato(contato)">Adicionar</button>
28. </body>
29. </html>
139. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function (contato) {
9. $scope.contatos.push(angular.copy(contato));
10. delete $scope.contato;
11. };
12. });
13. </script>
14. </head>
15. <body ng-controller="listaTelefonicaCtrl">
16. <h1>{{titulo}}</h1>
17. <table>
18. <tr>
19. <th>Nome</th><th>Telefone</th>
20. </tr>
21. <tr ng-repeat="contato in contatos">
22. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
23. </tr>
24. </table>
25. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
26. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
27. <button ng-click="adicionarContato(contato)">
28. Adicionar
29. </button>
30. </body>
140. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function (contato) {
9. $scope.contatos.push(angular.copy(contato));
10. delete $scope.contato;
11. };
12. });
13. </script>
14. </head>
15. <body ng-controller="listaTelefonicaCtrl">
16. <h1>{{titulo}}</h1>
17. <table>
18. <tr>
19. <th>Nome</th><th>Telefone</th>
20. </tr>
21. <tr ng-repeat="contato in contatos">
22. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
23. </tr>
24. </table>
25. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
26. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
27. <button ng-click="adicionarContato(contato)" ng-disabled="">
28. Adicionar
29. </button>
30. </body>
141. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function (contato) {
9. $scope.contatos.push(angular.copy(contato));
10. delete $scope.contato;
11. };
12. });
13. </script>
14. </head>
15. <body ng-controller="listaTelefonicaCtrl">
16. <h1>{{titulo}}</h1>
17. <table>
18. <tr>
19. <th>Nome</th><th>Telefone</th>
20. </tr>
21. <tr ng-repeat="contato in contatos">
22. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
23. </tr>
24. </table>
25. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
26. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
27. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)">
28. Adicionar
29. </button>
30. </body>
142. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function (contato) {
9. $scope.contatos.push(angular.copy(contato));
10. delete $scope.contato;
11. };
12. });
13. </script>
14. </head>
15. <body ng-controller="listaTelefonicaCtrl">
16. <h1>{{titulo}}</h1>
17. <table>
18. <tr>
19. <th>Nome</th><th>Telefone</th>
20. </tr>
21. <tr ng-repeat="contato in contatos">
22. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
23. </tr>
24. </table>
25. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
26. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
27. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)">
28. Adicionar
29. </button>
30. </body>
146. 1. <script>
2. var app = angular.module("listaTelefonica", []);
3. app.controller("listaTelefonicaCtrl", function ($scope) {
4. $scope.titulo = "Lista Telefônica";
5. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
6. {nome: "André", telefone: "99767899"},
7. {nome: "Carlos", telefone: "99987689"}];
8. $scope.adicionarContato = function (contato) {
9. $scope.contatos.push(angular.copy(contato));
10. delete $scope.contato;
11. };
12. });
13. </script>
14. </head>
15. <body ng-controller="listaTelefonicaCtrl">
16. <h1>{{titulo}}</h1>
17. <table>
18. <tr>
19. <th>Nome</th><th>Telefone</th>
20. </tr>
21. <tr ng-repeat="contato in contatos">
22. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
23. </tr>
24. </table>
25. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
26. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
27. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)">
28. Adicionar
29. </button>
30. </body>
147. 1. var app = angular.module("listaTelefonica", []);
2. app.controller("listaTelefonicaCtrl", function ($scope) {
3. $scope.titulo = "Lista Telefônica";
4. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
5. {nome: "André", telefone: "99767899"},
6. {nome: "Carlos", telefone: "99987689"}];
7. $scope.adicionarContato = function (contato) {
8. $scope.contatos.push(angular.copy(contato));
9. delete $scope.contato;
10. };
11. });
12. </script>
13. </head>
14. <body ng-controller="listaTelefonicaCtrl">
15. <h1>{{titulo}}</h1>
16. <table>
17. <tr>
18. <th>Nome</th><th>Telefone</th>
19. </tr>
20. <tr ng-repeat="contato in contatos">
21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
22. </tr>
23. </table>
24. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
25. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
26. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)">
27. Adicionar
28. </button>
29. </body>
30. </html>
148. 1. app.controller("listaTelefonicaCtrl", function ($scope) {
2. $scope.titulo = "Lista Telefônica";
3. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
4. {nome: "André", telefone: "99767899"},
5. {nome: "Carlos", telefone: "99987689"}];
6. $scope.adicionarContato = function (contato) {
7. $scope.contatos.push(angular.copy(contato));
8. delete $scope.contato;
9. };
10. });
11. </script>
12. </head>
13. <body ng-controller="listaTelefonicaCtrl">
14. <h1>{{titulo}}</h1>
15. <table>
16. <tr>
17. <th>Nome</th><th>Telefone</th>
18. </tr>
19. <tr ng-repeat="contato in contatos">
20. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
21. </tr>
22. </table>
23. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
24. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
25. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)">
26. Adicionar
27. </button>
28. </body>
29. </html>
149. 1. app.controller("listaTelefonicaCtrl", function ($scope) {
2. $scope.titulo = "Lista Telefônica";
3. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
4. {nome: "André", telefone: "99767899"},
5. {nome: "Carlos", telefone: "99987689"}];
6. $scope.adicionarContato = function (contato) {
7. $scope.contatos.push(angular.copy(contato));
8. delete $scope.contato;
9. };
10. });
11. </script>
12. </head>
13. <body ng-controller="listaTelefonicaCtrl">
14. <h1>{{titulo}}</h1>
15. <table>
16. <tr>
17. <th></th><th>Nome</th><th>Telefone</th>
18. </tr>
19. <tr ng-repeat="contato in contatos">
20. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
21. </tr>
22. </table>
23. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
24. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
25. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)">
26. Adicionar
27. </button>
28. </body>
29. </html>
150. 1. app.controller("listaTelefonicaCtrl", function ($scope) {
2. $scope.titulo = "Lista Telefônica";
3. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
4. {nome: "André", telefone: "99767899"},
5. {nome: "Carlos", telefone: "99987689"}];
6. $scope.adicionarContato = function (contato) {
7. $scope.contatos.push(angular.copy(contato));
8. delete $scope.contato;
9. };
10. });
11. </script>
12. </head>
13. <body ng-controller="listaTelefonicaCtrl">
14. <h1>{{titulo}}</h1>
15. <table>
16. <tr>
17. <th></th><th>Nome</th><th>Telefone</th>
18. </tr>
19. <tr ng-repeat="contato in contatos">
20. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
21. </tr>
22. </table>
23. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
24. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
25. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)">
26. Adicionar
27. </button>
28. </body>
29. </html>
151. 1. app.controller("listaTelefonicaCtrl", function ($scope) {
2. $scope.titulo = "Lista Telefônica";
3. $scope.contatos = [{nome: "Pedro", telefone: "99991010"},
4. {nome: "André", telefone: "99767899"},
5. {nome: "Carlos", telefone: "99987689"}];
6. $scope.adicionarContato = function (contato) {
7. $scope.contatos.push(angular.copy(contato));
8. delete $scope.contato;
9. };
10. });
11. </script>
12. </head>
13. <body ng-controller="listaTelefonicaCtrl">
14. <h1>{{titulo}}</h1>
15. <table>
16. <tr>
17. <th></th><th>Nome</th><th>Telefone</th>
18. </tr>
19. <tr ng-repeat="contato in contatos">
20. <td></td><td>{{contato.nome}}</td><td>{{contato.telefone}}<td/>
21. </tr>
22. </table>
23. <input type="text" ng-model="contato.nome" placeholder="Nome"/>
24. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/>
25. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)">
26. Adicionar
27. </button>
28. </body>
29. </html>