Construindo Diretivas com AngularJS

46,664 views

Published on

Aprenda a criar diretivas com AngularJS

Published in: Technology
5 Comments
47 Likes
Statistics
Notes
No Downloads
Views
Total views
46,664
On SlideShare
0
From Embeds
0
Number of Embeds
24,748
Actions
Shares
0
Downloads
0
Comments
5
Likes
47
Embeds 0
No embeds

No notes for slide

Construindo Diretivas com AngularJS

  1. 1. Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br Criando 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. Como criar uma diretiva?
  7. 7. 1. app.directive("nomeDaDiretiva", function () { 2. }); Registrando a diretiva no módulo
  8. 8. 1. app.directive("nomeDaDiretiva", function () { 2. return { 3. }; 4. }); Criando o Directive Definition Object
  9. 9. 1. app.directive("nomeDaDiretiva", function () { 2. return { 3. // Propriedades da Diretiva 4. }; 5. }); Adicionando propriedades ao Directive Definition Object
  10. 10. Por dentro das propriedades para criação de diretivas básicas • template • templateUrl • replace • restrict • scope • transclude
  11. 11. 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.mensagem = "Por favor, preencha o campo nome e telefone"; 8. }); 9. </script> 10. </head> 11. <body ng-controller="listaTelefonicaCtrl"> 12. <div class="alert"> 13. <div class='alert-topic'>Ops, um problema aconteceu!</div> 14. <div class='alert-description'>{{mensagem}}</div> 15. </div> 16. </body> 17. </html>
  12. 12. template / templateUrl Especifica o template ou a url do template que deverá ser incluído dentro do elemento que estiver utilizando a diretiva.
  13. 13. 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.mensagem = "Por favor, preencha o campo nome e telefone"; 8. }); 9. </script> 10. </head> 11. <body ng-controller="listaTelefonicaCtrl"> 12. <div class="alert"> 13. <div class='alert-topic'>Ops, um problema aconteceu!</div> 14. <div class='alert-description'>{{mensagem}}</div> 15. </div> 16. </body> 17. </html>
  14. 14. 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.mensagem = "Por favor, preencha o campo nome e telefone"; 8. }); 9. </script> 10. </head> 11. <body ng-controller="listaTelefonicaCtrl"> 12. <div class="alert"> 13. <div class='alert-topic'>Ops, um problema aconteceu!</div> 14. <div class='alert-description'>{{mensagem}}</div> 15. </div> 16. </body> 17. </html>
  15. 15. 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.mensagem = "Por favor, preencha o campo nome e telefone"; 8. }); 9. </script> 10. </head> 11. <body ng-controller="listaTelefonicaCtrl"> 12. </body> 13. </html>
  16. 16. 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.mensagem = "Por favor, preencha o campo nome e telefone"; 8. }); 9. </script> 10. </head> 11. <body ng-controller="listaTelefonicaCtrl"> 12. <div alert></div> 13. </body> 14. </html>
  17. 17. 1. <div alert></div> Diretiva antes da compilação
  18. 18. 1. app.directive("alert", function () { 2. return { 3. }; 4. });
  19. 19. 1. app.directive("alert", function () { 2. return { 3. template: 4. }; 5. });
  20. 20. 1. app.directive("alert", function () { 2. return { 3. template: 4. "<div class='alert'>" + 5. "<div class='alert-topic'>Ops, um problema aconteceu!</div>" + 6. "<div class='alert-description'>{{mensagem}}</div>" + 7. "</div>" 8. }; 9. });
  21. 21. 1. app.directive("alert", function () { 2. return { 3. template: 4. "<div class='alert'>" + 5. "<div class='alert-topic'>Ops, um problema aconteceu!</div>" + 6. "<div class='alert-description'>{{mensagem}}</div>" + 7. "</div>" 8. }; 9. });
  22. 22. 1. app.directive("alert", function () { 2. return { 3. }; 4. });
  23. 23. 1. app.directive("alert", function () { 2. return { 3. templateUrl: "alert.html" 4. }; 5. });
  24. 24. 1. app.directive("alert", function () { 2. return { 3. templateUrl: "alert.html" 4. }; 5. });
  25. 25. 1. <div alert=""> 2. <div class="alert"> 3. <div class="alert-topic">Ops, um problema aconteceu!</div> 4. <div class="alert-description">Por favor, preencha o campo nome e telefone</div> 5. </div> 6. </div> Diretiva depois da compilação
  26. 26. replace Substitui o elemento pelo conteúdo do template.
  27. 27. 1. <div alert=""> 2. <div class="alert"> 3. <div class="alert-topic">Ops, um problema aconteceu!</div> 4. <div class="alert-description">Por favor, preencha o campo nome e telefone</div> 5. </div> 6. </div> Diretiva depois da compilação
  28. 28. 1. <div alert=""> 2. <div class="alert"> 3. <div class="alert-topic">Ops, um problema aconteceu!</div> 4. <div class="alert-description">Por favor, preencha o campo nome e telefone</div> 5. </div> 6. </div> Diretiva depois da compilação
  29. 29. 1. app.directive("alert", function () { 2. return { 3. templateUrl: "alert.html" 4. }; 5. });
  30. 30. 1. app.directive("alert", function () { 2. return { 3. templateUrl: "alert.html", 4. replace: true 5. }; 6. });
  31. 31. 1. <div alert=""> 2. <div class="alert"> 3. <div class="alert-topic">Ops, um problema aconteceu!</div> 4. <div class="alert-description">Por favor, preencha o campo nome e telefone</div> 5. </div> 6. </div> Diretiva depois da compilação
  32. 32. 1. <div class="alert"> 2. <div class="alert-topic">Ops, um problema aconteceu!</div> 3. <div class="alert-description">Por favor, preencha o campo nome e telefone</div> 4. </div> Diretiva depois da compilação
  33. 33. restrict Restringe o modo de utilização da diretiva ao atributo, elemento, classe e comentário, ou ainda uma combinação deles. Caso não seja definido, o padrão é que a diretiva seja atribuída pelo atributo.
  34. 34. Tipos de restrição A - Diretiva restrita ao atributo do elemento E - Diretiva restrita ao elemento C - Diretiva restrita a classe do elemento M - Diretiva restrita ao comentário do elemento
  35. 35. 1. <div alert></div> Diretiva restrita ao atributo do elemento
  36. 36. 1. app.directive("alert", function () { 2. return { 3. templateUrl: "alert.html", 4. replace: true, 5. restrict: "A" 6. }; 7. });
  37. 37. 1. <alert></alert> Diretiva restrita ao elemento
  38. 38. 1. app.directive("alert", function () { 2. return { 3. templateUrl: "alert.html", 4. replace: true, 5. restrict: "E" 6. }; 7. });
  39. 39. 1. <div class="alert"></div> Diretiva restrita a classe do elemento
  40. 40. 1. app.directive("alert", function () { 2. return { 3. templateUrl: "alert.html", 4. replace: true, 5. restrict: "C" 6. }; 7. });
  41. 41. 1. <!-- directive: alert--> 2. <div></div> Diretiva restrita ao comentário do elemento
  42. 42. 1. app.directive("alert", function () { 2. return { 3. templateUrl: "alert.html", 4. replace: true, 5. restrict: "M" 6. }; 7. });
  43. 43. scope Por padrão, uma diretiva compartilha o mesmo scope de onde é utilizada. Para aumentar seu potencial de reuso, podemos isolar seu scope, passando os dados necessário por parâmetro.
  44. 44. @ Vincula um atributo a uma propriedade do scope da diretiva
  45. 45. 1. <alert></alert>
  46. 46. 1. <alert> 2. </alert>
  47. 47. 1. <alert message="Por favor, preencha o campo nome e telefone"> 2. </alert>
  48. 48. 1. app.directive("alert", function () { 2. return { 3. templateUrl: "alert.html", 4. replace: true, 5. restrict: "E" 6. }; 7. });
  49. 49. 1. app.directive("alert", function () { 2. return { 3. templateUrl: "alert.html", 4. replace: true, 5. restrict: "E", 6. scope: { 7. } 8. }; 9. });
  50. 50. 1. app.directive("alert", function () { 2. return { 3. templateUrl: "alert.html", 4. replace: true, 5. restrict: "E", 6. scope: { 7. message: "@message" 8. } 9. }; 10. });
  51. 51. 1. app.directive("alert", function () { 2. return { 3. templateUrl: "alert.html", 4. replace: true, 5. restrict: "E", 6. scope: { 7. message: "@" 8. } 9. }; 10. });
  52. 52. = Cria um vínculo bi-direcional entre uma propriedade do scope do template a uma propriedade do scope da diretiva
  53. 53. 1. <alert message="Por favor, preencha o campo nome e telefone"> 2. </alert>
  54. 54. 1. <alert message=""> 2. </alert>
  55. 55. 1. <alert message="mensagem"> 2. </alert>
  56. 56. 1. app.directive("alert", function () { 2. return { 3. templateUrl: "alert.html", 4. replace: true, 5. restrict: "E", 6. scope: { 7. message: "=message" 8. } 9. }; 10. });
  57. 57. 1. app.directive("alert", function () { 2. return { 3. templateUrl: "alert.html", 4. replace: true, 5. restrict: "E", 6. scope: { 7. message: "=" 8. } 9. }; 10. });
  58. 58. transclude É possível encapsular elementos dentro de uma diretiva.
  59. 59. 1. <alert> 2. </alert>
  60. 60. 1. <alert> 2. Por favor, preencha o campo nome e telefone 3. </alert>
  61. 61. 1. app.directive("alert", function () { 2. return { 3. templateUrl: "alert.html", 4. replace: true, 5. restrict: "E", 6. transclude: true 7. }; 8. });
  62. 62. 1. <div class="alert"> 2. <div class="alert-topic">Ops, um problema aconteceu!</div> 3. <div class="alert-description" ng-transclude></div> 4. </div> alert.html
  63. 63. 1. <div class="alert"> 2. <div class="alert-topic">Ops, um problema aconteceu!</div> 3. <div class="alert-description" ng-transclude> 4. Por favor, preencha o campo nome e telefone 5. </div> 6. </div> Diretiva depois da compilação
  64. 64. Por dentro das propriedades das diretivas para criação de diretivas avançadas • link • require • controller • compile
  65. 65. link Por meio da função link, podemos interagir com a DOM, vinculando eventos ou mesmo executar um procedimento de inicialização da diretiva.
  66. 66. 1. <accordion-item title="Rodrigo Branas"> 2. </accordion-item> 3. <accordion-item title="João da Silva"> 4. </accordion-item> 5. <accordion-item title="Pedro Cavalcante"> 6. </accordion-item>
  67. 67. 1. <accordion-item title="Rodrigo Branas"> 2. Agile Code</br> 3. rodrigo.branas@agilecode.com.br</br> 4. http://www.agilecode.com.br</br> 5. </accordion-item> 6. <accordion-item title="João da Silva"> 7. </accordion-item> 8. <accordion-item title="Pedro Cavalcante"> 9. </accordion-item>
  68. 68. 1. <accordion-item title="Rodrigo Branas"> 2. Agile Code</br> 3. rodrigo.branas@agilecode.com.br</br> 4. http://www.agilecode.com.br</br> 5. </accordion-item> 6. <accordion-item title="João da Silva"> 7. Google</br> 8. joao.silva@google.com</br> 9. http://www.google.com</br> 10. </accordion-item> 11. <accordion-item title="Pedro Cavalcante"> 12. </accordion-item>
  69. 69. 1. <accordion-item title="Rodrigo Branas"> 2. Agile Code</br> 3. rodrigo.branas@agilecode.com.br</br> 4. http://www.agilecode.com.br</br> 5. </accordion-item> 6. <accordion-item title="João da Silva"> 7. Google</br> 8. joao.silva@google.com</br> 9. http://www.google.com</br> 10. </accordion-item> 11. <accordion-item title="Pedro Cavalcante"> 12. Microsoft</br> 13. pedro.cavalcante@microsoft.com</br> 14. http://www.microsoft.com</br> 15. </accordion-item>
  70. 70. 1. app.directive("accordionItem", function () { 2. return { 3. templateUrl: "accordion-item.html", 4. restrict: "E", 5. transclude: true, 6. replace: true, 7. scope: { 8. title: "@" 9. } 10. }; 11. });
  71. 71. Parâmetros da função link • scope • element • attrs • controller • transclude
  72. 72. 1. app.directive("accordionItem", function () { 2. return { 3. templateUrl: "accordion-item.html", 4. restrict: "E", 5. transclude: true, 6. replace: true, 7. scope: { 8. title: "@" 9. } 10. }; 11. });
  73. 73. 1. app.directive("accordionItem", function () { 2. return { 3. templateUrl: "accordion-item.html", 4. restrict: "E", 5. transclude: true, 6. replace: true, 7. scope: { 8. title: "@" 9. }, 10. link: function (scope, element, attrs, ctrl, transcludeFn) { 11. } 12. }; 13. });
  74. 74. 1. app.directive("accordionItem", function () { 2. return { 3. templateUrl: "accordion-item.html", 4. restrict: "E", 5. transclude: true, 6. replace: true, 7. scope: { 8. title: "@" 9. }, 10. link: function (scope, element, attrs, ctrl, transcludeFn) { 11. element.bind("click", function () { 12. }); 13. } 14. }; 15. });
  75. 75. 1. app.directive("accordionItem", function () { 2. return { 3. templateUrl: "accordion-item.html", 4. restrict: "E", 5. transclude: true, 6. replace: true, 7. scope: { 8. title: "@" 9. }, 10. link: function (scope, element, attrs, ctrl, transcludeFn) { 11. element.bind("click", function () { 12. scope.$apply(function () { 13. scope.showDescription = !scope.showDescription; 14. }); 15. }); 16. } 17. }; 18. });
  76. 76. 1. <div> 2. <div class='accordion-topic'>{{title}}</div> 3. <div class='accordion-description' ng-show='showDescription' ng-transclude> 4. </div> 5. </div> accordion-item.html
  77. 77. require Cria um vínculo com outra diretiva, recebendo seu controller como parâmetro na função link.
  78. 78. 1. <accordion-item title="Rodrigo Branas"> 2. Agile Code</br> 3. rodrigo.branas@agilecode.com.br</br> 4. http://www.agilecode.com.br</br> 5. </accordion-item> 6. <accordion-item title="João da Silva"> 7. Google</br> 8. joao.silva@google.com</br> 9. http://www.google.com</br> 10. </accordion-item> 11. <accordion-item title="Pedro Cavalcante"> 12. Microsoft</br> 13. pedro.cavalcante@microsoft.com</br> 14. http://www.microsoft.com</br> 15. </accordion-item>
  79. 79. 1. <accordion> 2. <accordion-item title="Rodrigo Branas"> 3. Agile Code</br> 4. rodrigo.branas@agilecode.com.br</br> 5. http://www.agilecode.com.br</br> 6. </accordion-item> 7. <accordion-item title="João da Silva"> 8. Google</br> 9. joao.silva@google.com</br> 10. http://www.google.com</br> 11. </accordion-item> 12. <accordion-item title="Pedro Cavalcante"> 13. Microsoft</br> 14. pedro.cavalcante@microsoft.com</br> 15. http://www.microsoft.com</br> 16. </accordion-item> 17. </accordion>
  80. 80. 1. <accordion> 2. <accordion-item title="Rodrigo Branas"> 3. Agile Code</br> 4. rodrigo.branas@agilecode.com.br</br> 5. http://www.agilecode.com.br</br> 6. </accordion-item> 7. <accordion-item title="João da Silva"> 8. Google</br> 9. joao.silva@google.com</br> 10. http://www.google.com</br> 11. </accordion-item> 12. <accordion-item title="Pedro Cavalcante"> 13. Microsoft</br> 14. pedro.cavalcante@microsoft.com</br> 15. http://www.microsoft.com</br> 16. </accordion-item> 17. </accordion>
  81. 81. 1. app.directive("accordionItem", function () { 2. return { 3. templateUrl: "accordion-item.html", 4. restrict: "E", 5. transclude: true, 6. replace: true, 7. scope: { 8. title: "@" 9. }, 10. link: function (scope, element, attrs, ctrl, transcludeFn) { 11. element.bind("click", function () { 12. scope.$apply(function () { 13. scope.showDescription = !scope.showDescription; 14. }); 15. }); 16. } 17. }; 18. });
  82. 82. 1. app.directive("accordionItem", function () { 2. return { 3. templateUrl: "accordion-item.html", 4. restrict: "E", 5. transclude: true, 6. replace: true, 7. scope: { 8. title: "@" 9. }, 10. require: "^accordion", 11. link: function (scope, element, attrs, ctrl, transcludeFn) { 12. element.bind("click", function () { 13. scope.$apply(function () { 14. scope.showDescription = !scope.showDescription; 15. }); 16. }); 17. } 18. }; 19. });
  83. 83. 1. app.directive("accordionItem", function () { 2. return { 3. templateUrl: "accordion-item.html", 4. restrict: "E", 5. transclude: true, 6. replace: true, 7. scope: { 8. title: "@" 9. }, 10. require: "^accordion", 11. link: function (scope, element, attrs, ctrl, transcludeFn) { 12. element.bind("click", function () { 13. scope.$apply(function () { 14. scope.showDescription = !scope.showDescription; 15. }); 16. }); 17. } 18. }; 19. });
  84. 84. 1. app.directive("accordionItem", function () { 2. return { 3. templateUrl: "accordion-item.html", 4. restrict: "E", 5. transclude: true, 6. replace: true, 7. scope: { 8. title: "@" 9. }, 10. require: "^accordion", 11. link: function (scope, element, attrs, ctrl, transcludeFn) { 12. element.bind("click", function () { 13. ctrl.closeAllAccordionItens(); 14. scope.$apply(function () { 15. scope.showDescription = !scope.showDescription; 16. }); 17. }); 18. } 19. }; 20. });
  85. 85. 1. app.directive("accordionItem", function () { 2. return { 3. templateUrl: "accordion-item.html", 4. restrict: "E", 5. transclude: true, 6. replace: true, 7. scope: { 8. title: "@" 9. }, 10. require: "^accordion", 11. link: function (scope, element, attrs, ctrl, transcludeFn) { 12. element.bind("click", function () { 13. ctrl.closeAllAccordionItens(); 14. scope.$apply(function () { 15. scope.showDescription = !scope.showDescription; 16. }); 17. }); 18. } 19. }; 20. });
  86. 86. 1. app.directive("accordionItem", function () { 2. return { 3. templateUrl: "accordion-item.html", 4. restrict: "E", 5. transclude: true, 6. replace: true, 7. scope: { 8. title: "@" 9. }, 10. require: "^accordion", 11. link: function (scope, element, attrs, ctrl, transcludeFn) { 12. ctrl.addAccordionItemScope(scope); 13. element.bind("click", function () { 14. ctrl.closeAllAccordionItens(); 15. scope.$apply(function () { 16. scope.showDescription = !scope.showDescription; 17. }); 18. }); 19. } 20. }; 21. });
  87. 87. 1. app.directive("accordionItem", function () { 2. return { 3. templateUrl: "accordion-item.html", 4. restrict: "E", 5. transclude: true, 6. replace: true, 7. scope: { 8. title: "@" 9. }, 10. require: "^accordion", 11. link: function (scope, element, attrs, ctrl, transcludeFn) { 12. ctrl.addAccordionItemScope(scope); 13. element.bind("click", function () { 14. ctrl.closeAllAccordionItens(); 15. scope.$apply(function () { 16. scope.showDescription = !scope.showDescription; 17. }); 18. }); 19. } 20. }; 21. });
  88. 88. controller Permite a criação e o compartilhamento de comportamento com outras diretivas.
  89. 89. 1. app.directive("accordion", function () { 2. return { 3. template: "<div ng-transclude></div>", 4. restrict: "E", 5. transclude: true, 6. replace: true, 7. controller: function ($scope, $element, $attrs) { 8. var itensScope = []; 9. 10. var addAccordionItemScope = function (scope) { 11. itensScope.push(scope); 12. }; 13. 14. var closeAllAccordionItens = function () { 15. angular.forEach(itensScope, function (scope) { 16. scope.showItem = false; 17. }); 18. }; 19. 20. return { 21. addAccordionItemScope: addAccordionItemScope, 22. closeAllAccordionItens: closeAllAccordionItens 23. }; 24. } 25. }; 26. });

×