Construindo Diretivas com AngularJS

Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br
Criando Diretivas
com AngularJS

“Transformar equipes de desenvolvimento de software”
http://www.agilecode.com.br

Rodrigo Branas
rodrigo.branas@agilecode.com.br
http://www.agilecode.com.br
• Desenvolvendo Software na Gennera
• Criando treinamentos na Agile Code
• Escrevendo na Java Magazine e PacktPub
• Palestrando sobre desenvolvimento de
software em eventos, universidades e
empresas

Certificações
Formação Acadêmica
Ciências da Computação – UFSC
Gerenciamento de Projetos - FGV
SCJA, SCJP, SCJD, SCWCD, SCBCD, PMP, MCP e CSM
Experiência
Há mais de 12 anos desenvolvendo software na
plataforma Java com as empresas: EDS, HP, NET,
Citibank, GM, Dígitro, Softplan, OnCast, Senai,
VALE, RBS, Unimed, Globalcode, V.Office, Suntech,
WPlex e Gennera.

• Há mais de 5 anos liderando pessoas.
• Mais de 2000 horas em sala de aula.
• Mais de 100 apresentações em eventos.
• 6 artigos escritos para revistas.
• 1 livro.
• Mais de 500 profissionais treinados.
• Criação de 22 palestras.
• Criação de 10 treinamentos.
• Criação de mais de 3.000 slides.
O que realmente me motiva?

1. app.directive("nomeDaDiretiva", function () {
2. });
Registrando a diretiva no módulo

2. return {
3. };
4. });
Criando o Directive Definition Object

2. return {
3. // Propriedades da Diretiva
4. };
5. });
Adicionando propriedades ao Directive
Definition Object

Por dentro das propriedades para criação de
diretivas básicas
• template
• templateUrl
• replace
• restrict
• scope
• transclude

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>

template / templateUrl
Especifica o template ou a url do template
que deverá ser incluído dentro do elemento
que estiver utilizando a diretiva.

2. <head>
4. <script>
8. });
9. </script>
10. </head>
12. </body>
13. </html>

2. <head>
4. <script>
8. });
9. </script>
10. </head>
12. <div alert></div>
13. </body>
14. </html>

Diretiva antes da compilação

1. app.directive("alert", function () {
2. return {
3. };
4. });

2. return {
3. template:
4. };
5. });

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

2. return {
3. templateUrl: "alert.html"
4. };
5. });

1. <div 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

replace
Substitui o elemento pelo conteúdo do
template.

2. return {
3. templateUrl: "alert.html",
4. replace: true
5. };
6. });

3. <div class="alert-description">Por favor, preencha o campo nome e telefone</div>
4. </div>

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.

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

Diretiva restrita ao atributo do elemento

2. return {
4. replace: true,
5. restrict: "A"
6. };
7. });

1. <alert></alert>
Diretiva restrita ao elemento

2. return {
4. replace: true,
5. restrict: "E"
6. };
7. });

1. <div class="alert"></div>
Diretiva restrita a classe do elemento

2. return {
4. replace: true,
5. restrict: "C"
6. };
7. });

1. 
2. <div></div>
Diretiva restrita ao comentário do elemento

2. return {
4. replace: true,
5. restrict: "M"
6. };
7. });

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.

@
Vincula um atributo a uma
propriedade do scope da diretiva

1. <alert message="Por favor, preencha o campo nome e telefone">
2. </alert>

2. return {
4. replace: true,
5. restrict: "E",
6. scope: {
7. }
8. };
9. });

2. return {
4. replace: true,
5. restrict: "E",
6. scope: {
7. message: "@message"
8. }
9. };
10. });

2. return {
4. replace: true,
5. restrict: "E",
6. scope: {
7. message: "@"
8. }
9. };
10. });

=
Cria um vínculo bi-direcional entre
uma propriedade do scope do
template a uma propriedade do
scope da diretiva

1. <alert message="">
2. </alert>

1. <alert message="mensagem">
2. </alert>

2. return {
4. replace: true,
5. restrict: "E",
6. scope: {
7. message: "=message"
8. }
9. };
10. });

2. return {
4. replace: true,
5. restrict: "E",
6. scope: {
7. message: "="
8. }
9. };
10. });

transclude
É possível encapsular elementos dentro de
uma diretiva.

1. <alert>
2. Por favor, preencha o campo nome e telefone
3. </alert>

2. return {
4. replace: true,
5. restrict: "E",
6. transclude: true
7. };
8. });

3. <div class="alert-description" ng-transclude></div>
4. </div>
alert.html

3. <div class="alert-description" ng-transclude>
4. Por favor, preencha o campo nome e telefone
5. </div>
6. </div>

Por dentro das propriedades das diretivas
para criação de diretivas avançadas
• link
• require
• controller
• compile

link
Por meio da função link, podemos interagir
com a DOM, vinculando eventos ou mesmo
executar um procedimento de inicialização
da diretiva.

1. <accordion-item title="Rodrigo Branas">
2. </accordion-item>
3. <accordion-item title="João da Silva">
5. <accordion-item title="Pedro Cavalcante">

2. Agile Code</br>
3. rodrigo.branas@agilecode.com.br</br>
4. http://www.agilecode.com.br</br>

2. Agile Code</br>
7. Google</br>
8. joao.silva@google.com</br>
9. http://www.google.com</br>

2. Agile Code</br>
7. Google</br>
12. Microsoft</br>
13. pedro.cavalcante@microsoft.com</br>
14. http://www.microsoft.com</br>

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

Parâmetros da função link
• scope
• element
• attrs
• controller
• transclude

2. return {
4. restrict: "E",
6. replace: true,
7. scope: {
8. title: "@"
9. },
10. link: function (scope, element, attrs, ctrl, transcludeFn) {
11. }
12. };
13. });

2. return {
4. restrict: "E",
6. replace: true,
7. scope: {
8. title: "@"
9. },
11. element.bind("click", function () {
12. });
13. }
14. };
15. });

2. return {
4. restrict: "E",
6. replace: true,
7. scope: {
8. title: "@"
9. },
12. scope.$apply(function () {
13. scope.showDescription = !scope.showDescription;
14. });
15. });
16. }
17. };
18. });

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

require
Cria um vínculo com outra diretiva,
recebendo seu controller como parâmetro
na função link.

1. <accordion>
3. Agile Code</br>
8. Google</br>
13. Microsoft</br>
14. pedro.cavalcante@microsoft.com</br>
15. http://www.microsoft.com</br>
17. </accordion>

2. return {
4. restrict: "E",
6. replace: true,
7. scope: {
8. title: "@"
9. },
10. require: "^accordion",
15. });
16. });
17. }
18. };
19. });

2. return {
4. restrict: "E",
6. replace: true,
7. scope: {
8. title: "@"
9. },
13. ctrl.closeAllAccordionItens();
16. });
17. });
18. }
19. };
20. });

2. return {
4. restrict: "E",
6. replace: true,
7. scope: {
8. title: "@"
9. },
12. ctrl.addAccordionItemScope(scope);
14. ctrl.closeAllAccordionItens();
17. });
18. });
19. }
20. };
21. });

controller
Permite a criação e o compartilhamento de
comportamento com outras diretivas.

1. app.directive("accordion", function () {
2. return {
3. template: "<div ng-transclude></div>",
4. restrict: "E",
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. });

Construindo Diretivas com AngularJS

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Construindo Diretivas com AngularJS

Similar to Construindo Diretivas com AngularJS (20)

More from Rodrigo Branas

More from Rodrigo Branas (16)

Recently uploaded

Recently uploaded (6)

Construindo Diretivas com AngularJS