Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Utilizando diretivas com AngularJS

14,465 views

Published on

Aprenda a utilizar as principais diretivas do AngularJS

Published in: Technology, Design
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Utilizando diretivas com AngularJS

  1. 1. Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br Utilizando Diretivas com AngularJS
  2. 2. “Transformar equipes de desenvolvimento de software” http://www.agilecode.com.br
  3. 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. 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. 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. 6. Diretivas são extensões da linguagem HTML que permitem a implementação de novos comportamentos, de forma declarativa.
  7. 7. Como funcionam as diretivas?
  8. 8. ngApp Definindo as fronteiras da aplicação
  9. 9. 1. <html> 2. </html>
  10. 10. 1. <html ng-app> 2. </html>
  11. 11. 1. <html ng-app> 2. </html>
  12. 12. 1. <html ng-app="listaTelefonica"> 2. </html>
  13. 13. 1. <html ng-app="listaTelefonica"> 2. </html>
  14. 14. 1. <html ng-app="listaTelefonica"> 2. <head> 3. </head> 4. </html>
  15. 15. 1. <html ng-app="listaTelefonica"> 2. <head> 3. </head> 4. </html>
  16. 16. 1. <html ng-app="listaTelefonica"> 2. <head> 3. <script src='angular.js'></script> 4. </head> 5. </html>
  17. 17. 1. <html ng-app="listaTelefonica"> 2. <head> 3. <script src='angular.js'></script> 4. </head> 5. </html>
  18. 18. 1. <html ng-app="listaTelefonica"> 2. <head> 3. <script src='angular.js'></script> 4. <script> 5. </script> 6. </head> 7. </html>
  19. 19. 1. <html ng-app="listaTelefonica"> 2. <head> 3. <script src='angular.js'></script> 4. <script> 5. </script> 6. </head> 7. </html>
  20. 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. 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. 22. Apenas uma aplicação AngularJS pode ser carregada por documento HTML, nesse caso, apenas o primeiro elemento com ngApp será considerado.
  23. 23. ngController Vinculando um elemento da View ao Controller
  24. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 39. ngBind Substituindo o elemento por uma expressão
  40. 40. 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>
  41. 41. 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>
  42. 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. <h1 ng-bind="titulo"></h1> 12. </body> 13. </html>
  43. 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. $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>
  44. 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. $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>
  45. 45. Expressões
  46. 46. Expressões São trechos de código escritos entre chaves duplas ({{ e }}) utilizados basicamente para acessar e exibir atributos do $scope.
  47. 47. 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. 48. 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>
  49. 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></h1> 13. </body> 14. </html>
  50. 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>{{titulo}}</h1> 13. </body> 14. </html>
  51. 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>{{titulo}}</h1> 13. </body> 14. </html>
  52. 52. ngRepeat Iterando sobre os itens de uma coleção ou de um objeto
  53. 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. 54. 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>
  55. 55. 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>
  56. 56. 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>
  57. 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. $scope.contatos = []; 9. }); 10. </script> 11. </head> 12. <body ng-controller="listaTelefonicaCtrl"> 13. <h1>{{titulo}}</h1> 14. </body> 15. </html>
  58. 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. $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>
  59. 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. $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>
  60. 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 = [{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>
  61. 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 = [{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>
  62. 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. <table> 17. </table> 18. </body> 19. </html>
  63. 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. <table> 17. </table> 18. </body> 19. </html>
  64. 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. 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. 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. <tr> 18. </tr> 19. </table> 20. </body> 21. </html>
  67. 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. <tr> 18. </tr> 19. </table> 20. </body> 21. </html>
  68. 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. <tr> 18. <th>Nome</th><th>Telefone</th> 19. </tr> 20. </table> 21. </body> 22. </html>
  69. 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. <tr> 18. <th>Nome</th><th>Telefone</th> 19. </tr> 20. </table> 21. </body> 22. </html>
  70. 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. <th>Nome</th><th>Telefone</th> 19. </tr> 20. <tr> 21. </tr> 22. </table> 23. </body> 24. </html>
  71. 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. <th>Nome</th><th>Telefone</th> 19. </tr> 20. <tr> 21. </tr> 22. </table> 23. </body> 24. </html>
  72. 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. <tr ng-repeat=""> 21. </tr> 22. </table> 23. </body> 24. </html>
  73. 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. <tr ng-repeat="contato in contatos"> 21. </tr> 22. </table> 23. </body> 24. </html>
  74. 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 ng-repeat="contato in contatos"> 21. </tr> 22. </table> 23. </body> 24. </html>
  75. 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 ng-repeat="contato in contatos"> 21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 22. </tr> 23. </table> 24. </body> 25. </html>
  76. 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="contato in contatos"> 21. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 22. </tr> 23. </table> 24. </body> 25. </html>
  77. 77. ngModel Vinculando uma propriedade ao $scope
  78. 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. <td>{{contato.nome}}</td><td>{{contato.telefone}}<td/> 22. </tr> 23. </table> 24. </body> 25. </html>
  79. 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. 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>
  81. 81. 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>
  82. 82. 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>
  83. 83. 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>
  84. 84. 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>
  85. 85. 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>
  86. 86. ngClick Atribuindo um comportamento ao evento
  87. 87. 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>
  88. 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. <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>
  89. 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. <input type="text" ng-model="telefone" placeholder="Telefone"/> 24. <button ng-click="adicionarContato(nome, telefone)">Adicionar</button> 25. </body> 26. </html>
  90. 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. <button ng-click="adicionarContato(nome, telefone)">Adicionar</button> 25. </body> 26. </html>
  91. 91. 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>
  92. 92. 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>
  93. 93. 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>
  94. 94. 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>
  95. 95. 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>
  96. 96. 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>
  97. 97. 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>
  98. 98. 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>
  99. 99. 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>
  100. 100. 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>
  101. 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. $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>
  102. 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. $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>
  103. 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. $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>
  104. 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. $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>
  105. 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 () { 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>
  106. 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 (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>
  107. 107. 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>
  108. 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 (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>
  109. 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 (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>
  110. 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 (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>
  111. 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 (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>
  112. 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 (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>
  113. 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 (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>
  114. 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 (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>
  115. 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 (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>
  116. 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 (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>
  117. 117. 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
  118. 118. ngDisable Desabilitando um elemento dinamicamente
  119. 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(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>
  120. 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(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>
  121. 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(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>
  122. 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(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>
  123. 123. 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>
  124. 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(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>
  125. 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. 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>
  126. 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. 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>
  127. 127. ngClass Aplicando classes CSS dinamicamente
  128. 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)" ng-disabled="!(contato.nome && contato.telefone)"> 28. Adicionar 29. </button> 30. </body>
  129. 129. 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>
  130. 130. 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>
  131. 131. 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>
  132. 132. 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>
  133. 133. 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>

×