SlideShare a Scribd company logo

Utilizando diretivas com AngularJS

•
•
Rodrigo Branas
Rodrigo Branas

Aprenda a utilizar as principais diretivas do AngularJS

TechnologyDesign
1 of 192
Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br Utilizando Diretivas com AngularJS
“Transformar equipes de desenvolvimento de software” http://www.agilecode.com.br
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
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.
• 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?
Diretivas são extensões da linguagem HTML que permitem a implementação de novos comportamentos, de forma declarativa.
Como funcionam as diretivas?
ngApp Definindo as fronteiras da aplicação
1. <html> 2. </html>
1. <html ng-app> 2. </html>
1. <html ng-app> 2. </html>
1. <html ng-app="listaTelefonica"> 2. </html>
1. <html ng-app="listaTelefonica"> 2. </html>
1. <html ng-app="listaTelefonica"> 2. <head> 3. </head> 4. </html>
1. <html ng-app="listaTelefonica"> 2. <head> 3. </head> 4. </html>
1. <html ng-app="listaTelefonica"> 2. <head> 3. <script src='angular.js'></script> 4. </head> 5. </html>
1. <html ng-app="listaTelefonica"> 2. <head> 3. <script src='angular.js'></script> 4. </head> 5. </html>
1. <html ng-app="listaTelefonica"> 2. <head> 3. <script src='angular.js'></script> 4. <script> 5. </script> 6. </head> 7. </html>
1. <html ng-app="listaTelefonica"> 2. <head> 3. <script src='angular.js'></script> 4. <script> 5. </script> 6. </head> 7. </html>
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>
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>
Apenas uma aplicação AngularJS pode ser carregada por documento HTML, nesse caso, apenas o primeiro elemento com ngApp será considerado.
ngController Vinculando um elemento da View ao Controller
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
ngBind Substituindo o elemento por uma expressão
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>
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>
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>
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>
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>
Expressões
Expressões São trechos de código escritos entre chaves duplas ({{ e }}) utilizados basicamente para acessar e exibir atributos do $scope.
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>
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>
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>
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>
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>
ngRepeat Iterando sobre os itens de uma coleção ou de um objeto
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
ngModel Vinculando uma propriedade ao $scope
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>
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>
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>
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>
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>
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>
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>
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>
ngClick Atribuindo um comportamento ao evento
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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
ngDisable Desabilitando um elemento dinamicamente
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>
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>
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>
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>
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>
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>
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>
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>
ngClass Aplicando classes CSS dinamicamente
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>
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>
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>
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>
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>
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>
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS

Recommended

Construindo Diretivas com AngularJS
Construindo Diretivas com AngularJSConstruindo Diretivas com AngularJS
Construindo Diretivas com AngularJSRodrigo Branas
 
Introdução ao AngularJS
Introdução ao AngularJSIntrodução ao AngularJS
Introdução ao AngularJSRodrigo Branas
 
Separation of concerns - DPC12
Separation of concerns - DPC12Separation of concerns - DPC12
Separation of concerns - DPC12Stephan Hochdörfer
 
Spark as a Platform to Support Multi-Tenancy and Many Kinds of Data Applicati...
Spark as a Platform to Support Multi-Tenancy and Many Kinds of Data Applicati...Spark as a Platform to Support Multi-Tenancy and Many Kinds of Data Applicati...
Spark as a Platform to Support Multi-Tenancy and Many Kinds of Data Applicati...Spark Summit
 
Introduction to Spark with Python
Introduction to Spark with PythonIntroduction to Spark with Python
Introduction to Spark with PythonGokhan Atil
 
Angular 2 observables
Angular 2 observablesAngular 2 observables
Angular 2 observablesGeoffrey Filippi
 
React Hooks
React HooksReact Hooks
React HooksJoao Marins
 
Pyspark Tutorial | Introduction to Apache Spark with Python | PySpark Trainin...
Pyspark Tutorial | Introduction to Apache Spark with Python | PySpark Trainin...Pyspark Tutorial | Introduction to Apache Spark with Python | PySpark Trainin...
Pyspark Tutorial | Introduction to Apache Spark with Python | PySpark Trainin...Edureka!
 

Recommended

Construindo Diretivas com AngularJS
Construindo Diretivas com AngularJSConstruindo Diretivas com AngularJS
Construindo Diretivas com AngularJSRodrigo Branas
 
Introdução ao AngularJS
Introdução ao AngularJSIntrodução ao AngularJS
Introdução ao AngularJSRodrigo Branas
 
Separation of concerns - DPC12
Separation of concerns - DPC12Separation of concerns - DPC12
Separation of concerns - DPC12Stephan Hochdörfer
 
Spark as a Platform to Support Multi-Tenancy and Many Kinds of Data Applicati...
Spark as a Platform to Support Multi-Tenancy and Many Kinds of Data Applicati...Spark as a Platform to Support Multi-Tenancy and Many Kinds of Data Applicati...
Spark as a Platform to Support Multi-Tenancy and Many Kinds of Data Applicati...Spark Summit
 
Introduction to Spark with Python
Introduction to Spark with PythonIntroduction to Spark with Python
Introduction to Spark with PythonGokhan Atil
 
Angular 2 observables
Angular 2 observablesAngular 2 observables
Angular 2 observablesGeoffrey Filippi
 
React Hooks
React HooksReact Hooks
React HooksJoao Marins
 
Pyspark Tutorial | Introduction to Apache Spark with Python | PySpark Trainin...
Pyspark Tutorial | Introduction to Apache Spark with Python | PySpark Trainin...Pyspark Tutorial | Introduction to Apache Spark with Python | PySpark Trainin...
Pyspark Tutorial | Introduction to Apache Spark with Python | PySpark Trainin...Edureka!
 
Learning ASP.NET 5 and MVC 6
Learning ASP.NET 5 and MVC 6Learning ASP.NET 5 and MVC 6
Learning ASP.NET 5 and MVC 6Ido Flatow
 
Arquitetura Node com NestJS
Arquitetura Node com NestJSArquitetura Node com NestJS
Arquitetura Node com NestJSVanessa Me Tonini
 
Lecture 2_ Intro to laravel.pptx
Lecture 2_ Intro to laravel.pptxLecture 2_ Intro to laravel.pptx
Lecture 2_ Intro to laravel.pptxSaziaRahman
 
대용량 분산 아키텍쳐 설계 #5. rest
대용량 분산 아키텍쳐 설계 #5. rest대용량 분산 아키텍쳐 설계 #5. rest
대용량 분산 아키텍쳐 설계 #5. restTerry Cho
 
Apache Spark 3 Dynamic Partition Pruning
Apache Spark 3 Dynamic Partition PruningApache Spark 3 Dynamic Partition Pruning
Apache Spark 3 Dynamic Partition PruningAparup Chatterjee
 
What I learnt: Elastic search & Kibana : introduction, installtion & configur...
What I learnt: Elastic search & Kibana : introduction, installtion & configur...What I learnt: Elastic search & Kibana : introduction, installtion & configur...
What I learnt: Elastic search & Kibana : introduction, installtion & configur...Rahul K Chauhan
 
JWT: jku x5u
JWT: jku x5uJWT: jku x5u
JWT: jku x5usnyff
 
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染Sheng-Han Su
 
Express JS
Express JSExpress JS
Express JSAlok Guha
 
An Intro into webpack
An Intro into webpackAn Intro into webpack
An Intro into webpackSquash Apps Pvt Ltd
 
Introduction to spark
Introduction to sparkIntroduction to spark
Introduction to sparkDuyhai Doan
 
REST APIs with Spring
REST APIs with SpringREST APIs with Spring
REST APIs with SpringJoshua Long
 
Laravel overview
Laravel overviewLaravel overview
Laravel overviewObinna Akunne
 
Repository and Unit Of Work Design Patterns
Repository and Unit Of Work Design PatternsRepository and Unit Of Work Design Patterns
Repository and Unit Of Work Design PatternsHatim Hakeel
 
Expressjs
ExpressjsExpressjs
ExpressjsYauheni Nikanovich
 
Building a REST Service in minutes with Spring Boot
Building a REST Service in minutes with Spring BootBuilding a REST Service in minutes with Spring Boot
Building a REST Service in minutes with Spring BootOmri Spector
 
Four Things to Know About Reliable Spark Streaming with Typesafe and Databricks
Four Things to Know About Reliable Spark Streaming with Typesafe and DatabricksFour Things to Know About Reliable Spark Streaming with Typesafe and Databricks
Four Things to Know About Reliable Spark Streaming with Typesafe and DatabricksLegacy Typesafe (now Lightbend)
 
Superworkflow of Graph Neural Networks with K8S and Fugue
Superworkflow of Graph Neural Networks with K8S and FugueSuperworkflow of Graph Neural Networks with K8S and Fugue
Superworkflow of Graph Neural Networks with K8S and FugueDatabricks
 
Building and deploying PHP applications with Phing
Building and deploying PHP applications with PhingBuilding and deploying PHP applications with Phing
Building and deploying PHP applications with PhingMichiel Rook
 
JSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks
JSMVCOMFG - To sternly look at JavaScript MVC and Templating FrameworksJSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks
JSMVCOMFG - To sternly look at JavaScript MVC and Templating FrameworksMario Heiderich
 
A evolução do AngularJS
A evolução do AngularJSA evolução do AngularJS
A evolução do AngularJSRodrigo Branas
 
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo BranasNode.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo BranasRodrigo Branas
 

More Related Content

What's hot

Learning ASP.NET 5 and MVC 6
Learning ASP.NET 5 and MVC 6Learning ASP.NET 5 and MVC 6
Learning ASP.NET 5 and MVC 6Ido Flatow
 
Lecture 2_ Intro to laravel.pptx
Lecture 2_ Intro to laravel.pptxLecture 2_ Intro to laravel.pptx
Lecture 2_ Intro to laravel.pptxSaziaRahman
 
대용량 분산 아키텍쳐 설계 #5. rest
대용량 분산 아키텍쳐 설계 #5. rest대용량 분산 아키텍쳐 설계 #5. rest
대용량 분산 아키텍쳐 설계 #5. restTerry Cho
 
Apache Spark 3 Dynamic Partition Pruning
Apache Spark 3 Dynamic Partition PruningApache Spark 3 Dynamic Partition Pruning
Apache Spark 3 Dynamic Partition PruningAparup Chatterjee
 
What I learnt: Elastic search & Kibana : introduction, installtion & configur...
What I learnt: Elastic search & Kibana : introduction, installtion & configur...What I learnt: Elastic search & Kibana : introduction, installtion & configur...
What I learnt: Elastic search & Kibana : introduction, installtion & configur...Rahul K Chauhan
 
JWT: jku x5u
JWT: jku x5uJWT: jku x5u
JWT: jku x5usnyff
 
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染Sheng-Han Su
 
Introduction to spark
Introduction to sparkIntroduction to spark
Introduction to sparkDuyhai Doan
 
REST APIs with Spring
REST APIs with SpringREST APIs with Spring
REST APIs with SpringJoshua Long
 
Repository and Unit Of Work Design Patterns
Repository and Unit Of Work Design PatternsRepository and Unit Of Work Design Patterns
Repository and Unit Of Work Design PatternsHatim Hakeel
 
Building a REST Service in minutes with Spring Boot
Building a REST Service in minutes with Spring BootBuilding a REST Service in minutes with Spring Boot
Building a REST Service in minutes with Spring BootOmri Spector
 
Four Things to Know About Reliable Spark Streaming with Typesafe and Databricks
Four Things to Know About Reliable Spark Streaming with Typesafe and DatabricksFour Things to Know About Reliable Spark Streaming with Typesafe and Databricks
Four Things to Know About Reliable Spark Streaming with Typesafe and DatabricksLegacy Typesafe (now Lightbend)
 
Superworkflow of Graph Neural Networks with K8S and Fugue
Superworkflow of Graph Neural Networks with K8S and FugueSuperworkflow of Graph Neural Networks with K8S and Fugue
Superworkflow of Graph Neural Networks with K8S and FugueDatabricks
 
Building and deploying PHP applications with Phing
Building and deploying PHP applications with PhingBuilding and deploying PHP applications with Phing
Building and deploying PHP applications with PhingMichiel Rook
 
JSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks
JSMVCOMFG - To sternly look at JavaScript MVC and Templating FrameworksJSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks
JSMVCOMFG - To sternly look at JavaScript MVC and Templating FrameworksMario Heiderich
 

What's hot (20)

Learning ASP.NET 5 and MVC 6
Learning ASP.NET 5 and MVC 6Learning ASP.NET 5 and MVC 6
Learning ASP.NET 5 and MVC 6
 
Arquitetura Node com NestJS
Arquitetura Node com NestJSArquitetura Node com NestJS
Arquitetura Node com NestJS
 
Lecture 2_ Intro to laravel.pptx
Lecture 2_ Intro to laravel.pptxLecture 2_ Intro to laravel.pptx
Lecture 2_ Intro to laravel.pptx
 
대용량 분산 아키텍쳐 설계 #5. rest
대용량 분산 아키텍쳐 설계 #5. rest대용량 분산 아키텍쳐 설계 #5. rest
대용량 분산 아키텍쳐 설계 #5. rest
 
Apache Spark 3 Dynamic Partition Pruning
Apache Spark 3 Dynamic Partition PruningApache Spark 3 Dynamic Partition Pruning
Apache Spark 3 Dynamic Partition Pruning
 
What I learnt: Elastic search & Kibana : introduction, installtion & configur...
What I learnt: Elastic search & Kibana : introduction, installtion & configur...What I learnt: Elastic search & Kibana : introduction, installtion & configur...
What I learnt: Elastic search & Kibana : introduction, installtion & configur...
 
JWT: jku x5u
JWT: jku x5uJWT: jku x5u
JWT: jku x5u
 
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
 
Express JS
Express JSExpress JS
Express JS
 
An Intro into webpack
An Intro into webpackAn Intro into webpack
An Intro into webpack
 
Introduction to spark
Introduction to sparkIntroduction to spark
Introduction to spark
 
REST APIs with Spring
REST APIs with SpringREST APIs with Spring
REST APIs with Spring
 
Laravel overview
Laravel overviewLaravel overview
Laravel overview
 
Repository and Unit Of Work Design Patterns
Repository and Unit Of Work Design PatternsRepository and Unit Of Work Design Patterns
Repository and Unit Of Work Design Patterns
 
Expressjs
ExpressjsExpressjs
Expressjs
 
Building a REST Service in minutes with Spring Boot
Building a REST Service in minutes with Spring BootBuilding a REST Service in minutes with Spring Boot
Building a REST Service in minutes with Spring Boot
 
Four Things to Know About Reliable Spark Streaming with Typesafe and Databricks
Four Things to Know About Reliable Spark Streaming with Typesafe and DatabricksFour Things to Know About Reliable Spark Streaming with Typesafe and Databricks
Four Things to Know About Reliable Spark Streaming with Typesafe and Databricks
 
Superworkflow of Graph Neural Networks with K8S and Fugue
Superworkflow of Graph Neural Networks with K8S and FugueSuperworkflow of Graph Neural Networks with K8S and Fugue
Superworkflow of Graph Neural Networks with K8S and Fugue
 
Building and deploying PHP applications with Phing
Building and deploying PHP applications with PhingBuilding and deploying PHP applications with Phing
Building and deploying PHP applications with Phing
 
JSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks
JSMVCOMFG - To sternly look at JavaScript MVC and Templating FrameworksJSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks
JSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks
 

Viewers also liked

A evolução do AngularJS
A evolução do AngularJSA evolução do AngularJS
A evolução do AngularJSRodrigo Branas
 
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo BranasNode.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo BranasRodrigo Branas
 
Validando Formulários com AngularJS
Validando Formulários com AngularJSValidando Formulários com AngularJS
Validando Formulários com AngularJSRodrigo Branas
 
Criando serviços com AngularJS
Criando serviços com AngularJSCriando serviços com AngularJS
Criando serviços com AngularJSRodrigo Branas
 
HTTP, JSON, REST e AJAX com AngularJS
HTTP, JSON, REST e AJAX com AngularJSHTTP, JSON, REST e AJAX com AngularJS
HTTP, JSON, REST e AJAX com AngularJSRodrigo Branas
 
Evoluindo a arquitetura de uma aplicação com AngularJS
Evoluindo a arquitetura de uma aplicação com AngularJSEvoluindo a arquitetura de uma aplicação com AngularJS
Evoluindo a arquitetura de uma aplicação com AngularJSRodrigo Branas
 
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Rodrigo Branas
 
Criando Filtros com AngularJS
Criando Filtros com AngularJSCriando Filtros com AngularJS
Criando Filtros com AngularJSRodrigo Branas
 
Aplicando filtros com AngularJS
Aplicando filtros com AngularJSAplicando filtros com AngularJS
Aplicando filtros com AngularJSRodrigo Branas
 
HTTP Interceptors com AngularJS
HTTP Interceptors com AngularJSHTTP Interceptors com AngularJS
HTTP Interceptors com AngularJSRodrigo Branas
 
Criando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJSCriando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJSRodrigo Branas
 
Node.js - #5 - Process - Rodrigo Branas
Node.js - #5 - Process - Rodrigo BranasNode.js - #5 - Process - Rodrigo Branas
Node.js - #5 - Process - Rodrigo BranasRodrigo Branas
 
Automação de Testes com AngularJS
Automação de Testes com AngularJSAutomação de Testes com AngularJS
Automação de Testes com AngularJSRodrigo Branas
 
Introdução ao desenvolvimento de aplicações web
Introdução ao desenvolvimento de aplicações webIntrodução ao desenvolvimento de aplicações web
Introdução ao desenvolvimento de aplicações webRodrigo Branas
 
Passo a passo para baixar slides
Passo a passo para baixar slidesPasso a passo para baixar slides
Passo a passo para baixar slidesDênia Cavalcante
 
Node.js - #3 - Global Objects - Rodrigo Branas
Node.js - #3 - Global Objects - Rodrigo BranasNode.js - #3 - Global Objects - Rodrigo Branas
Node.js - #3 - Global Objects - Rodrigo BranasRodrigo Branas
 
Node.js - #6 - Core Modules - net - Rodrigo Branas
Node.js - #6 - Core Modules - net - Rodrigo BranasNode.js - #6 - Core Modules - net - Rodrigo Branas
Node.js - #6 - Core Modules - net - Rodrigo BranasRodrigo Branas
 
Node.js - #2 - Sistema de Módulos - Rodrigo Branas
Node.js - #2 - Sistema de Módulos - Rodrigo BranasNode.js - #2 - Sistema de Módulos - Rodrigo Branas
Node.js - #2 - Sistema de Módulos - Rodrigo BranasRodrigo Branas
 

Viewers also liked (20)

A evolução do AngularJS
A evolução do AngularJSA evolução do AngularJS
A evolução do AngularJS
 
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo BranasNode.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
 
Validando Formulários com AngularJS
Validando Formulários com AngularJSValidando Formulários com AngularJS
Validando Formulários com AngularJS
 
Criando serviços com AngularJS
Criando serviços com AngularJSCriando serviços com AngularJS
Criando serviços com AngularJS
 
HTTP, JSON, REST e AJAX com AngularJS
HTTP, JSON, REST e AJAX com AngularJSHTTP, JSON, REST e AJAX com AngularJS
HTTP, JSON, REST e AJAX com AngularJS
 
Evoluindo a arquitetura de uma aplicação com AngularJS
Evoluindo a arquitetura de uma aplicação com AngularJSEvoluindo a arquitetura de uma aplicação com AngularJS
Evoluindo a arquitetura de uma aplicação com AngularJS
 
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
 
Criando Filtros com AngularJS
Criando Filtros com AngularJSCriando Filtros com AngularJS
Criando Filtros com AngularJS
 
Scope AngularJS
Scope AngularJSScope AngularJS
Scope AngularJS
 
Aplicando filtros com AngularJS
Aplicando filtros com AngularJSAplicando filtros com AngularJS
Aplicando filtros com AngularJS
 
HTTP Interceptors com AngularJS
HTTP Interceptors com AngularJSHTTP Interceptors com AngularJS
HTTP Interceptors com AngularJS
 
Criando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJSCriando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJS
 
Node.js - #5 - Process - Rodrigo Branas
Node.js - #5 - Process - Rodrigo BranasNode.js - #5 - Process - Rodrigo Branas
Node.js - #5 - Process - Rodrigo Branas
 
Automação de Testes com AngularJS
Automação de Testes com AngularJSAutomação de Testes com AngularJS
Automação de Testes com AngularJS
 
Introdução ao desenvolvimento de aplicações web
Introdução ao desenvolvimento de aplicações webIntrodução ao desenvolvimento de aplicações web
Introdução ao desenvolvimento de aplicações web
 
Passo a passo para baixar slides
Passo a passo para baixar slidesPasso a passo para baixar slides
Passo a passo para baixar slides
 
Node.js - #3 - Global Objects - Rodrigo Branas
Node.js - #3 - Global Objects - Rodrigo BranasNode.js - #3 - Global Objects - Rodrigo Branas
Node.js - #3 - Global Objects - Rodrigo Branas
 
Node.js - #6 - Core Modules - net - Rodrigo Branas
Node.js - #6 - Core Modules - net - Rodrigo BranasNode.js - #6 - Core Modules - net - Rodrigo Branas
Node.js - #6 - Core Modules - net - Rodrigo Branas
 
Node.js - #2 - Sistema de Módulos - Rodrigo Branas
Node.js - #2 - Sistema de Módulos - Rodrigo BranasNode.js - #2 - Sistema de Módulos - Rodrigo Branas
Node.js - #2 - Sistema de Módulos - Rodrigo Branas
 
JavaScript - Date
JavaScript - DateJavaScript - Date
JavaScript - Date
 

More from Rodrigo Branas

Node.js - #4 - Timers - Rodrigo Branas
Node.js - #4 - Timers - Rodrigo BranasNode.js - #4 - Timers - Rodrigo Branas
Node.js - #4 - Timers - Rodrigo BranasRodrigo Branas
 
Node.js - #1 - Introdução - Rodrigo Branas
Node.js - #1 - Introdução - Rodrigo BranasNode.js - #1 - Introdução - Rodrigo Branas
Node.js - #1 - Introdução - Rodrigo BranasRodrigo Branas
 
#6 - Git - Desfazendo as coisas
#6 - Git - Desfazendo as coisas#6 - Git - Desfazendo as coisas
#6 - Git - Desfazendo as coisasRodrigo Branas
 
#1 - Git - Introdução
#1 - Git - Introdução#1 - Git - Introdução
#1 - Git - IntroduçãoRodrigo Branas
 
#5 - Git - Contribuindo com um repositório remoto
#5 - Git - Contribuindo com um repositório remoto#5 - Git - Contribuindo com um repositório remoto
#5 - Git - Contribuindo com um repositório remotoRodrigo Branas
 
#3 - Git - Branching e Merging
#3 - Git - Branching e Merging#3 - Git - Branching e Merging
#3 - Git - Branching e MergingRodrigo Branas
 
JavaScript - Expressões Regulares
JavaScript - Expressões RegularesJavaScript - Expressões Regulares
JavaScript - Expressões RegularesRodrigo Branas
 
Técnicas de Refactoring
Técnicas de RefactoringTécnicas de Refactoring
Técnicas de RefactoringRodrigo Branas
 
Test-Driven Development com JavaScript, Jasmine Karma
Test-Driven Development com JavaScript, Jasmine KarmaTest-Driven Development com JavaScript, Jasmine Karma
Test-Driven Development com JavaScript, Jasmine KarmaRodrigo Branas
 

More from Rodrigo Branas (15)

Clean Architecture
Clean ArchitectureClean Architecture
Clean Architecture
 
Node.js - #4 - Timers - Rodrigo Branas
Node.js - #4 - Timers - Rodrigo BranasNode.js - #4 - Timers - Rodrigo Branas
Node.js - #4 - Timers - Rodrigo Branas
 
Node.js - #1 - Introdução - Rodrigo Branas
Node.js - #1 - Introdução - Rodrigo BranasNode.js - #1 - Introdução - Rodrigo Branas
Node.js - #1 - Introdução - Rodrigo Branas
 
#6 - Git - Desfazendo as coisas
#6 - Git - Desfazendo as coisas#6 - Git - Desfazendo as coisas
#6 - Git - Desfazendo as coisas
 
#1 - Git - Introdução
#1 - Git - Introdução#1 - Git - Introdução
#1 - Git - Introdução
 
#5 - Git - Contribuindo com um repositório remoto
#5 - Git - Contribuindo com um repositório remoto#5 - Git - Contribuindo com um repositório remoto
#5 - Git - Contribuindo com um repositório remoto
 
#4 - Git - Stash
#4 - Git - Stash#4 - Git - Stash
#4 - Git - Stash
 
#3 - Git - Branching e Merging
#3 - Git - Branching e Merging#3 - Git - Branching e Merging
#3 - Git - Branching e Merging
 
#2 - Git - DAG
#2 - Git - DAG#2 - Git - DAG
#2 - Git - DAG
 
JavaScript - Expressões Regulares
JavaScript - Expressões RegularesJavaScript - Expressões Regulares
JavaScript - Expressões Regulares
 
Técnicas de Refactoring
Técnicas de RefactoringTécnicas de Refactoring
Técnicas de Refactoring
 
Selenium - WebDriver
Selenium - WebDriverSelenium - WebDriver
Selenium - WebDriver
 
Test-Driven Development com JavaScript, Jasmine Karma
Test-Driven Development com JavaScript, Jasmine KarmaTest-Driven Development com JavaScript, Jasmine Karma
Test-Driven Development com JavaScript, Jasmine Karma
 
Grunt
GruntGrunt
Grunt
 
Bower
BowerBower
Bower
 

Utilizando diretivas com AngularJS

  • 1. Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br Utilizando Diretivas com AngularJS
  • 2. “Transformar equipes de desenvolvimento de software” http://www.agilecode.com.br
  • 3. 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
  • 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.
  • 7. Como funcionam as diretivas?
  • 14. 1. <html ng-app="listaTelefonica"> 2. <head> 3. </head> 4. </html>
  • 15. 1. <html ng-app="listaTelefonica"> 2. <head> 3. </head> 4. </html>
  • 16. 1. <html ng-app="listaTelefonica"> 2. <head> 3. <script src='angular.js'></script> 4. </head> 5. </html>
  • 17. 1. <html ng-app="listaTelefonica"> 2. <head> 3. <script src='angular.js'></script> 4. </head> 5. </html>
  • 18. 1. <html ng-app="listaTelefonica"> 2. <head> 3. <script src='angular.js'></script> 4. <script> 5. </script> 6. </head> 7. </html>
  • 19. 1. <html ng-app="listaTelefonica"> 2. <head> 3. <script src='angular.js'></script> 4. <script> 5. </script> 6. </head> 7. </html>
  • 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.
  • 23. ngController Vinculando um elemento da View ao Controller
  • 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>
  • 39. ngBind Substituindo o elemento por uma expressão
  • 40.
  • 41.
  • 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>
  • 54. ngRepeat Iterando sobre os itens de uma coleção ou de um objeto
  • 55.
  • 56.
  • 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>
  • 82.
  • 83.
  • 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>
  • 93.
  • 94.
  • 95.
  • 96.
  • 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>
  • 107.
  • 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>
  • 123.
  • 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
  • 131.
  • 132.
  • 133.
  • 134.
  • 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>
  • 144.
  • 145.
  • 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>