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.

Construindo Diretivas com AngularJS

48,333 views

Published on

Aprenda a criar diretivas com AngularJS

Published in: Technology

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. });

×