SlideShare uma empresa Scribd logo
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?
Como criar uma diretiva?
1. app.directive("nomeDaDiretiva", function () {
2. });
Registrando a diretiva no módulo
1. app.directive("nomeDaDiretiva", function () {
2. return {
3. };
4. });
Criando o Directive Definition Object
1. app.directive("nomeDaDiretiva", function () {
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
Construindo Diretivas com AngularJS
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.
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>
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>
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>
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>
1. <div alert></div>
Diretiva antes da compilação
1. app.directive("alert", function () {
2. return {
3. };
4. });
1. app.directive("alert", function () {
2. return {
3. template:
4. };
5. });
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. });
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. });
1. app.directive("alert", function () {
2. return {
3. };
4. });
1. app.directive("alert", function () {
2. return {
3. templateUrl: "alert.html"
4. };
5. });
1. app.directive("alert", function () {
2. return {
3. templateUrl: "alert.html"
4. };
5. });
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
replace
Substitui o elemento pelo conteúdo do
template.
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
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
1. app.directive("alert", function () {
2. return {
3. templateUrl: "alert.html"
4. };
5. });
1. app.directive("alert", function () {
2. return {
3. templateUrl: "alert.html",
4. replace: true
5. };
6. });
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
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
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
1. <div alert></div>
Diretiva restrita ao atributo do elemento
1. app.directive("alert", function () {
2. return {
3. templateUrl: "alert.html",
4. replace: true,
5. restrict: "A"
6. };
7. });
1. <alert></alert>
Diretiva restrita ao elemento
1. app.directive("alert", function () {
2. return {
3. templateUrl: "alert.html",
4. replace: true,
5. restrict: "E"
6. };
7. });
1. <div class="alert"></div>
Diretiva restrita a classe do elemento
1. app.directive("alert", function () {
2. return {
3. templateUrl: "alert.html",
4. replace: true,
5. restrict: "C"
6. };
7. });
1. <!-- directive: alert-->
2. <div></div>
Diretiva restrita ao comentário do elemento
1. app.directive("alert", function () {
2. return {
3. templateUrl: "alert.html",
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></alert>
1. <alert>
2. </alert>
1. <alert message="Por favor, preencha o campo nome e telefone">
2. </alert>
1. app.directive("alert", function () {
2. return {
3. templateUrl: "alert.html",
4. replace: true,
5. restrict: "E"
6. };
7. });
1. app.directive("alert", function () {
2. return {
3. templateUrl: "alert.html",
4. replace: true,
5. restrict: "E",
6. scope: {
7. }
8. };
9. });
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. });
1. app.directive("alert", function () {
2. return {
3. templateUrl: "alert.html",
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="Por favor, preencha o campo nome e telefone">
2. </alert>
1. <alert message="">
2. </alert>
1. <alert message="mensagem">
2. </alert>
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. });
1. app.directive("alert", function () {
2. return {
3. templateUrl: "alert.html",
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. </alert>
1. <alert>
2. Por favor, preencha o campo nome e telefone
3. </alert>
1. app.directive("alert", function () {
2. return {
3. templateUrl: "alert.html",
4. replace: true,
5. restrict: "E",
6. transclude: true
7. };
8. });
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
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
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.
Construindo Diretivas com AngularJS
Construindo Diretivas com AngularJS
Construindo Diretivas com AngularJS
Construindo Diretivas com AngularJS
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>
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>
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>
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>
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
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. });
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. });
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. });
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. });
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.
Construindo Diretivas com AngularJS
Construindo Diretivas com AngularJS
Construindo Diretivas com AngularJS
Construindo Diretivas com AngularJS
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>
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>
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>
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. });
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. });
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. });
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. });
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. });
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. });
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. });
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",
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. });

Mais conteúdo relacionado

Mais procurados

Workshop React.js
Workshop React.jsWorkshop React.js
Workshop React.js
Commit University
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
Ferdous Mahmud Shaon
 
Introduction to Django
Introduction to DjangoIntroduction to Django
Introduction to Django
James Casey
 
Introduction Node.js
Introduction Node.jsIntroduction Node.js
Introduction Node.js
Erik van Appeldoorn
 
CSS3 2D/3D transform
CSS3 2D/3D transformCSS3 2D/3D transform
CSS3 2D/3D transform
Kenny Lee
 
Spring Framework - AOP
Spring Framework - AOPSpring Framework - AOP
Spring Framework - AOP
Dzmitry Naskou
 
ReactJs
ReactJsReactJs
Solid NodeJS with TypeScript, Jest & NestJS
Solid NodeJS with TypeScript, Jest & NestJSSolid NodeJS with TypeScript, Jest & NestJS
Solid NodeJS with TypeScript, Jest & NestJS
Rafael Casuso Romate
 
Wroclaw GraphQL - GraphQL in Java
Wroclaw GraphQL - GraphQL in JavaWroclaw GraphQL - GraphQL in Java
Wroclaw GraphQL - GraphQL in Java
MarcinStachniuk
 
12 tips on Django Best Practices
12 tips on Django Best Practices12 tips on Django Best Practices
12 tips on Django Best Practices
David Arcos
 
AngularJS Animations
AngularJS AnimationsAngularJS Animations
AngularJS Animations
Eyal Vardi
 
Node js introduction
Node js introductionNode js introduction
Node js introduction
Joseph de Castelnau
 
NestJS - O framework progressivo
NestJS - O framework progressivoNestJS - O framework progressivo
NestJS - O framework progressivo
Wender Machado
 
JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An Introduction
Manvendra Singh
 
An Introduction to the DOM
An Introduction to the DOMAn Introduction to the DOM
An Introduction to the DOM
Mindy McAdams
 
Angular 10 course_content
Angular 10 course_contentAngular 10 course_content
Angular 10 course_content
NAVEENSAGGAM1
 
Web development with django - Basics Presentation
Web development with django - Basics PresentationWeb development with django - Basics Presentation
Web development with django - Basics Presentation
Shrinath Shenoy
 
Introducing CSS Grid Layout
Introducing CSS Grid LayoutIntroducing CSS Grid Layout
Introducing CSS Grid Layout
Rachel Andrew
 
Spring Boot
Spring BootSpring Boot
Spring Boot
Jiayun Zhou
 
Spring integration
Spring integrationSpring integration
Spring integration
Zülfikar Karakaya
 

Mais procurados (20)

Workshop React.js
Workshop React.jsWorkshop React.js
Workshop React.js
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Introduction to Django
Introduction to DjangoIntroduction to Django
Introduction to Django
 
Introduction Node.js
Introduction Node.jsIntroduction Node.js
Introduction Node.js
 
CSS3 2D/3D transform
CSS3 2D/3D transformCSS3 2D/3D transform
CSS3 2D/3D transform
 
Spring Framework - AOP
Spring Framework - AOPSpring Framework - AOP
Spring Framework - AOP
 
ReactJs
ReactJsReactJs
ReactJs
 
Solid NodeJS with TypeScript, Jest & NestJS
Solid NodeJS with TypeScript, Jest & NestJSSolid NodeJS with TypeScript, Jest & NestJS
Solid NodeJS with TypeScript, Jest & NestJS
 
Wroclaw GraphQL - GraphQL in Java
Wroclaw GraphQL - GraphQL in JavaWroclaw GraphQL - GraphQL in Java
Wroclaw GraphQL - GraphQL in Java
 
12 tips on Django Best Practices
12 tips on Django Best Practices12 tips on Django Best Practices
12 tips on Django Best Practices
 
AngularJS Animations
AngularJS AnimationsAngularJS Animations
AngularJS Animations
 
Node js introduction
Node js introductionNode js introduction
Node js introduction
 
NestJS - O framework progressivo
NestJS - O framework progressivoNestJS - O framework progressivo
NestJS - O framework progressivo
 
JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An Introduction
 
An Introduction to the DOM
An Introduction to the DOMAn Introduction to the DOM
An Introduction to the DOM
 
Angular 10 course_content
Angular 10 course_contentAngular 10 course_content
Angular 10 course_content
 
Web development with django - Basics Presentation
Web development with django - Basics PresentationWeb development with django - Basics Presentation
Web development with django - Basics Presentation
 
Introducing CSS Grid Layout
Introducing CSS Grid LayoutIntroducing CSS Grid Layout
Introducing CSS Grid Layout
 
Spring Boot
Spring BootSpring Boot
Spring Boot
 
Spring integration
Spring integrationSpring integration
Spring integration
 

Destaque

The New Age Business Analyst - Role of BA in the Changing times of Agile Soft...
The New Age Business Analyst - Role of BA in the Changing times of Agile Soft...The New Age Business Analyst - Role of BA in the Changing times of Agile Soft...
The New Age Business Analyst - Role of BA in the Changing times of Agile Soft...
Texavi Innovative Solutions
 
A evolução do AngularJS
A evolução do AngularJSA evolução do AngularJS
A evolução do AngularJS
Rodrigo Branas
 
AngularJS - 10 passos para aprender a criar suas directivas
AngularJS - 10 passos para aprender a criar suas directivasAngularJS - 10 passos para aprender a criar suas directivas
AngularJS - 10 passos para aprender a criar suas directivas
Janderson Fernandes Cardoso
 
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo BranasNode.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Rodrigo Branas
 
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Rodrigo Branas
 
Node.js - #2 - Sistema de Módulos - Rodrigo Branas
Node.js - #2 - Sistema de Módulos - Rodrigo BranasNode.js - #2 - Sistema de Módulos - Rodrigo Branas
Node.js - #2 - Sistema de Módulos - Rodrigo Branas
Rodrigo Branas
 
Node.js - #5 - Process - Rodrigo Branas
Node.js - #5 - Process - Rodrigo BranasNode.js - #5 - Process - Rodrigo Branas
Node.js - #5 - Process - Rodrigo Branas
Rodrigo Branas
 
Validando Formulários com AngularJS
Validando Formulários com AngularJSValidando Formulários com AngularJS
Validando Formulários com AngularJS
Rodrigo Branas
 
Selenium - WebDriver
Selenium - WebDriverSelenium - WebDriver
Selenium - WebDriver
Rodrigo Branas
 
Node.js - #6 - Core Modules - net - Rodrigo Branas
Node.js - #6 - Core Modules - net - Rodrigo BranasNode.js - #6 - Core Modules - net - Rodrigo Branas
Node.js - #6 - Core Modules - net - Rodrigo Branas
Rodrigo Branas
 
Criando Filtros com AngularJS
Criando Filtros com AngularJSCriando Filtros com AngularJS
Criando Filtros com AngularJS
Rodrigo Branas
 
JavaScript - Expressões Regulares
JavaScript - Expressões RegularesJavaScript - Expressões Regulares
JavaScript - Expressões Regulares
Rodrigo Branas
 
Cloud computing
Cloud computingCloud computing
Cloud computing
otavio021
 
Introdução ao Apache Camel: Padrões de Integração
Introdução ao Apache Camel: Padrões de IntegraçãoIntrodução ao Apache Camel: Padrões de Integração
Introdução ao Apache Camel: Padrões de Integração
otavio021
 
Autocomplete con AngularJs
Autocomplete con AngularJs Autocomplete con AngularJs
Autocomplete con AngularJs
Scio Consulting
 
Criando um componente de busca com AngularJS
Criando um componente de busca com AngularJSCriando um componente de busca com AngularJS
Criando um componente de busca com AngularJS
Douglas Lira
 
Porque eu deveria utilizar Agile
Porque eu deveria utilizar AgilePorque eu deveria utilizar Agile
Porque eu deveria utilizar Agile
Rodrigo Branas
 
AngularJS: Service, factory & provider
AngularJS: Service, factory & providerAngularJS: Service, factory & provider
AngularJS: Service, factory & provider
Corley S.r.l.
 
E-trânsito cidadão - IPVA em suas mãos
E-trânsito cidadão - IPVA em suas mãosE-trânsito cidadão - IPVA em suas mãos
E-trânsito cidadão - IPVA em suas mãos
João Gabriel Lima
 
Angular js com diretivas
Angular js com diretivasAngular js com diretivas
Angular js com diretivas
Matheus Lima
 

Destaque (20)

The New Age Business Analyst - Role of BA in the Changing times of Agile Soft...
The New Age Business Analyst - Role of BA in the Changing times of Agile Soft...The New Age Business Analyst - Role of BA in the Changing times of Agile Soft...
The New Age Business Analyst - Role of BA in the Changing times of Agile Soft...
 
A evolução do AngularJS
A evolução do AngularJSA evolução do AngularJS
A evolução do AngularJS
 
AngularJS - 10 passos para aprender a criar suas directivas
AngularJS - 10 passos para aprender a criar suas directivasAngularJS - 10 passos para aprender a criar suas directivas
AngularJS - 10 passos para aprender a criar suas directivas
 
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo BranasNode.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
 
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
 
Node.js - #2 - Sistema de Módulos - Rodrigo Branas
Node.js - #2 - Sistema de Módulos - Rodrigo BranasNode.js - #2 - Sistema de Módulos - Rodrigo Branas
Node.js - #2 - Sistema de Módulos - Rodrigo Branas
 
Node.js - #5 - Process - Rodrigo Branas
Node.js - #5 - Process - Rodrigo BranasNode.js - #5 - Process - Rodrigo Branas
Node.js - #5 - Process - Rodrigo Branas
 
Validando Formulários com AngularJS
Validando Formulários com AngularJSValidando Formulários com AngularJS
Validando Formulários com AngularJS
 
Selenium - WebDriver
Selenium - WebDriverSelenium - WebDriver
Selenium - WebDriver
 
Node.js - #6 - Core Modules - net - Rodrigo Branas
Node.js - #6 - Core Modules - net - Rodrigo BranasNode.js - #6 - Core Modules - net - Rodrigo Branas
Node.js - #6 - Core Modules - net - Rodrigo Branas
 
Criando Filtros com AngularJS
Criando Filtros com AngularJSCriando Filtros com AngularJS
Criando Filtros com AngularJS
 
JavaScript - Expressões Regulares
JavaScript - Expressões RegularesJavaScript - Expressões Regulares
JavaScript - Expressões Regulares
 
Cloud computing
Cloud computingCloud computing
Cloud computing
 
Introdução ao Apache Camel: Padrões de Integração
Introdução ao Apache Camel: Padrões de IntegraçãoIntrodução ao Apache Camel: Padrões de Integração
Introdução ao Apache Camel: Padrões de Integração
 
Autocomplete con AngularJs
Autocomplete con AngularJs Autocomplete con AngularJs
Autocomplete con AngularJs
 
Criando um componente de busca com AngularJS
Criando um componente de busca com AngularJSCriando um componente de busca com AngularJS
Criando um componente de busca com AngularJS
 
Porque eu deveria utilizar Agile
Porque eu deveria utilizar AgilePorque eu deveria utilizar Agile
Porque eu deveria utilizar Agile
 
AngularJS: Service, factory & provider
AngularJS: Service, factory & providerAngularJS: Service, factory & provider
AngularJS: Service, factory & provider
 
E-trânsito cidadão - IPVA em suas mãos
E-trânsito cidadão - IPVA em suas mãosE-trânsito cidadão - IPVA em suas mãos
E-trânsito cidadão - IPVA em suas mãos
 
Angular js com diretivas
Angular js com diretivasAngular js com diretivas
Angular js com diretivas
 

Semelhante a Construindo Diretivas com AngularJS

Automação de Testes com AngularJS
Automação de Testes com AngularJSAutomação de Testes com AngularJS
Automação de Testes com AngularJS
Rodrigo Branas
 
Programando para programadores: Desafios na evolução de um Framework
Programando para programadores: Desafios na evolução de um FrameworkProgramando para programadores: Desafios na evolução de um Framework
Programando para programadores: Desafios na evolução de um Framework
Pablo Dall'Oglio
 
Javascript truquesmagicos
Javascript truquesmagicosJavascript truquesmagicos
Javascript truquesmagicos
ponto hacker
 
HTTP, JSON, REST e AJAX com AngularJS
HTTP, JSON, REST e AJAX com AngularJSHTTP, JSON, REST e AJAX com AngularJS
HTTP, JSON, REST e AJAX com AngularJS
Rodrigo Branas
 
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersJavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
Harlley Oliveira
 
Java e Cloud Computing
Java e Cloud ComputingJava e Cloud Computing
Java e Cloud Computing
Mario Jorge Pereira
 
JSF 2.0 e ScrumToys
JSF 2.0 e ScrumToysJSF 2.0 e ScrumToys
JSF 2.0 e ScrumToys
Dr. Spock
 
Aplicacoes Rapidas Para Web Com Django
Aplicacoes Rapidas Para Web Com DjangoAplicacoes Rapidas Para Web Com Django
Aplicacoes Rapidas Para Web Com Django
Diemesleno Souza Carvalho
 
Scope AngularJS
Scope AngularJSScope AngularJS
Scope AngularJS
Rodrigo Branas
 
Criando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJSCriando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJS
Rodrigo Branas
 
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015  Porto Alegre - Interfaces ricas com Rails e React.JSTDC2015  Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
Rodrigo Urubatan
 
Phonegap - Framework Mobile
Phonegap - Framework MobilePhonegap - Framework Mobile
Phonegap - Framework Mobile
Ildyone Martins
 
Spring MVC Framework
Spring MVC FrameworkSpring MVC Framework
Spring MVC Framework
elliando dias
 
JSF 2.0: Uma Evolução nas Interfaces Web com Java
JSF 2.0: Uma Evolução nas Interfaces Web com JavaJSF 2.0: Uma Evolução nas Interfaces Web com Java
JSF 2.0: Uma Evolução nas Interfaces Web com Java
Dr. Spock
 
Técnicas de Refactoring
Técnicas de RefactoringTécnicas de Refactoring
Técnicas de Refactoring
Rodrigo Branas
 
JSF 2.0 e ScrumToys
JSF 2.0 e ScrumToysJSF 2.0 e ScrumToys
JSF 2.0 e ScrumToys
Dr. Spock
 
O que esperar do Zend Framework 3
O que esperar do Zend Framework 3O que esperar do Zend Framework 3
O que esperar do Zend Framework 3
Flávio Lisboa
 
Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_
Rodrigo Urubatan
 
Ambiente de Desenvolvimento Java usando Ant
Ambiente de Desenvolvimento Java usando AntAmbiente de Desenvolvimento Java usando Ant
Ambiente de Desenvolvimento Java usando Ant
Denis L Presciliano
 
Analise frameworks php
Analise frameworks phpAnalise frameworks php
Analise frameworks php
Igor Moura
 

Semelhante a Construindo Diretivas com AngularJS (20)

Automação de Testes com AngularJS
Automação de Testes com AngularJSAutomação de Testes com AngularJS
Automação de Testes com AngularJS
 
Programando para programadores: Desafios na evolução de um Framework
Programando para programadores: Desafios na evolução de um FrameworkProgramando para programadores: Desafios na evolução de um Framework
Programando para programadores: Desafios na evolução de um Framework
 
Javascript truquesmagicos
Javascript truquesmagicosJavascript truquesmagicos
Javascript truquesmagicos
 
HTTP, JSON, REST e AJAX com AngularJS
HTTP, JSON, REST e AJAX com AngularJSHTTP, JSON, REST e AJAX com AngularJS
HTTP, JSON, REST e AJAX com AngularJS
 
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersJavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
 
Java e Cloud Computing
Java e Cloud ComputingJava e Cloud Computing
Java e Cloud Computing
 
JSF 2.0 e ScrumToys
JSF 2.0 e ScrumToysJSF 2.0 e ScrumToys
JSF 2.0 e ScrumToys
 
Aplicacoes Rapidas Para Web Com Django
Aplicacoes Rapidas Para Web Com DjangoAplicacoes Rapidas Para Web Com Django
Aplicacoes Rapidas Para Web Com Django
 
Scope AngularJS
Scope AngularJSScope AngularJS
Scope AngularJS
 
Criando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJSCriando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJS
 
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015  Porto Alegre - Interfaces ricas com Rails e React.JSTDC2015  Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
 
Phonegap - Framework Mobile
Phonegap - Framework MobilePhonegap - Framework Mobile
Phonegap - Framework Mobile
 
Spring MVC Framework
Spring MVC FrameworkSpring MVC Framework
Spring MVC Framework
 
JSF 2.0: Uma Evolução nas Interfaces Web com Java
JSF 2.0: Uma Evolução nas Interfaces Web com JavaJSF 2.0: Uma Evolução nas Interfaces Web com Java
JSF 2.0: Uma Evolução nas Interfaces Web com Java
 
Técnicas de Refactoring
Técnicas de RefactoringTécnicas de Refactoring
Técnicas de Refactoring
 
JSF 2.0 e ScrumToys
JSF 2.0 e ScrumToysJSF 2.0 e ScrumToys
JSF 2.0 e ScrumToys
 
O que esperar do Zend Framework 3
O que esperar do Zend Framework 3O que esperar do Zend Framework 3
O que esperar do Zend Framework 3
 
Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_
 
Ambiente de Desenvolvimento Java usando Ant
Ambiente de Desenvolvimento Java usando AntAmbiente de Desenvolvimento Java usando Ant
Ambiente de Desenvolvimento Java usando Ant
 
Analise frameworks php
Analise frameworks phpAnalise frameworks php
Analise frameworks php
 

Mais de Rodrigo Branas

Clean Architecture
Clean ArchitectureClean Architecture
Clean Architecture
Rodrigo Branas
 
Node.js - #4 - Timers - Rodrigo Branas
Node.js - #4 - Timers - Rodrigo BranasNode.js - #4 - Timers - Rodrigo Branas
Node.js - #4 - Timers - Rodrigo Branas
Rodrigo Branas
 
Node.js - #3 - Global Objects - Rodrigo Branas
Node.js - #3 - Global Objects - Rodrigo BranasNode.js - #3 - Global Objects - Rodrigo Branas
Node.js - #3 - Global Objects - Rodrigo Branas
Rodrigo Branas
 
Node.js - #1 - Introdução - Rodrigo Branas
Node.js - #1 - Introdução - Rodrigo BranasNode.js - #1 - Introdução - Rodrigo Branas
Node.js - #1 - Introdução - Rodrigo Branas
Rodrigo Branas
 
#6 - Git - Desfazendo as coisas
#6 - Git - Desfazendo as coisas#6 - Git - Desfazendo as coisas
#6 - Git - Desfazendo as coisas
Rodrigo Branas
 
#1 - Git - Introdução
#1 - Git - Introdução#1 - Git - Introdução
#1 - Git - Introdução
Rodrigo Branas
 
#5 - Git - Contribuindo com um repositório remoto
#5 - Git - Contribuindo com um repositório remoto#5 - Git - Contribuindo com um repositório remoto
#5 - Git - Contribuindo com um repositório remoto
Rodrigo Branas
 
#4 - Git - Stash
#4 - Git - Stash#4 - Git - Stash
#4 - Git - Stash
Rodrigo Branas
 
#3 - Git - Branching e Merging
#3 - Git - Branching e Merging#3 - Git - Branching e Merging
#3 - Git - Branching e Merging
Rodrigo Branas
 
#2 - Git - DAG
#2 - Git - DAG#2 - Git - DAG
#2 - Git - DAG
Rodrigo Branas
 
JavaScript - Date
JavaScript - DateJavaScript - Date
JavaScript - Date
Rodrigo Branas
 
Criando serviços com AngularJS
Criando serviços com AngularJSCriando serviços com AngularJS
Criando serviços com AngularJS
Rodrigo Branas
 
Test-Driven Development com JavaScript, Jasmine Karma
Test-Driven Development com JavaScript, Jasmine  KarmaTest-Driven Development com JavaScript, Jasmine  Karma
Test-Driven Development com JavaScript, Jasmine Karma
Rodrigo Branas
 
Grunt
GruntGrunt
Bower
BowerBower
Desvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptDesvendando a linguagem JavaScript
Desvendando a linguagem JavaScript
Rodrigo Branas
 

Mais de Rodrigo Branas (16)

Clean Architecture
Clean ArchitectureClean Architecture
Clean Architecture
 
Node.js - #4 - Timers - Rodrigo Branas
Node.js - #4 - Timers - Rodrigo BranasNode.js - #4 - Timers - Rodrigo Branas
Node.js - #4 - Timers - Rodrigo Branas
 
Node.js - #3 - Global Objects - Rodrigo Branas
Node.js - #3 - Global Objects - Rodrigo BranasNode.js - #3 - Global Objects - Rodrigo Branas
Node.js - #3 - Global Objects - Rodrigo Branas
 
Node.js - #1 - Introdução - Rodrigo Branas
Node.js - #1 - Introdução - Rodrigo BranasNode.js - #1 - Introdução - Rodrigo Branas
Node.js - #1 - Introdução - Rodrigo Branas
 
#6 - Git - Desfazendo as coisas
#6 - Git - Desfazendo as coisas#6 - Git - Desfazendo as coisas
#6 - Git - Desfazendo as coisas
 
#1 - Git - Introdução
#1 - Git - Introdução#1 - Git - Introdução
#1 - Git - Introdução
 
#5 - Git - Contribuindo com um repositório remoto
#5 - Git - Contribuindo com um repositório remoto#5 - Git - Contribuindo com um repositório remoto
#5 - Git - Contribuindo com um repositório remoto
 
#4 - Git - Stash
#4 - Git - Stash#4 - Git - Stash
#4 - Git - Stash
 
#3 - Git - Branching e Merging
#3 - Git - Branching e Merging#3 - Git - Branching e Merging
#3 - Git - Branching e Merging
 
#2 - Git - DAG
#2 - Git - DAG#2 - Git - DAG
#2 - Git - DAG
 
JavaScript - Date
JavaScript - DateJavaScript - Date
JavaScript - Date
 
Criando serviços com AngularJS
Criando serviços com AngularJSCriando serviços com AngularJS
Criando serviços com AngularJS
 
Test-Driven Development com JavaScript, Jasmine Karma
Test-Driven Development com JavaScript, Jasmine  KarmaTest-Driven Development com JavaScript, Jasmine  Karma
Test-Driven Development com JavaScript, Jasmine Karma
 
Grunt
GruntGrunt
Grunt
 
Bower
BowerBower
Bower
 
Desvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptDesvendando a linguagem JavaScript
Desvendando a linguagem JavaScript
 

Último

ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negóciosExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão
 
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
Faga1939
 
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docxse38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
ronaldos10
 
ExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebuliçãoExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão
 
Subindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWSSubindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWS
Ismael Ash
 
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de   DevOps/CLoudFerramentas que irão te ajudar a entrar no mundo de   DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ismael Ash
 

Último (6)

ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negóciosExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
 
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
 
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docxse38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
 
ExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebuliçãoExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebulição
 
Subindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWSSubindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWS
 
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de   DevOps/CLoudFerramentas que irão te ajudar a entrar no mundo de   DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
 

Construindo Diretivas com AngularJS

  • 1. Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br Criando Diretivas com AngularJS
  • 2. “Transformar equipes de desenvolvimento de software” http://www.agilecode.com.br
  • 3. Rodrigo Branas rodrigo.branas@agilecode.com.br http://www.agilecode.com.br • Desenvolvendo Software na Gennera • Criando treinamentos na Agile Code • Escrevendo na Java Magazine e PacktPub • Palestrando sobre desenvolvimento de software em eventos, universidades e empresas
  • 4. Certificações Formação Acadêmica Ciências da Computação – UFSC Gerenciamento de Projetos - FGV SCJA, SCJP, SCJD, SCWCD, SCBCD, PMP, MCP e CSM Experiência Há mais de 12 anos desenvolvendo software na plataforma Java com as empresas: EDS, HP, NET, Citibank, GM, Dígitro, Softplan, OnCast, Senai, VALE, RBS, Unimed, Globalcode, V.Office, Suntech, WPlex e Gennera.
  • 5. • Há mais de 5 anos liderando pessoas. • Mais de 2000 horas em sala de aula. • Mais de 100 apresentações em eventos. • 6 artigos escritos para revistas. • 1 livro. • Mais de 500 profissionais treinados. • Criação de 22 palestras. • Criação de 10 treinamentos. • Criação de mais de 3.000 slides. O que realmente me motiva?
  • 6. Como criar uma diretiva?
  • 7. 1. app.directive("nomeDaDiretiva", function () { 2. }); Registrando a diretiva no módulo
  • 8. 1. app.directive("nomeDaDiretiva", function () { 2. return { 3. }; 4. }); Criando o Directive Definition Object
  • 9. 1. app.directive("nomeDaDiretiva", function () { 2. return { 3. // Propriedades da Diretiva 4. }; 5. }); Adicionando propriedades ao Directive Definition Object
  • 10. Por dentro das propriedades para criação de diretivas básicas • template • templateUrl • replace • restrict • scope • transclude
  • 12. 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>
  • 13. template / templateUrl Especifica o template ou a url do template que deverá ser incluído dentro do elemento que estiver utilizando a diretiva.
  • 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. 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>
  • 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. </body> 13. </html>
  • 17. 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>
  • 18. 1. <div alert></div> Diretiva antes da compilação
  • 19. 1. app.directive("alert", function () { 2. return { 3. }; 4. });
  • 20. 1. app.directive("alert", function () { 2. return { 3. template: 4. }; 5. });
  • 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. 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. });
  • 23. 1. app.directive("alert", function () { 2. return { 3. }; 4. });
  • 24. 1. app.directive("alert", function () { 2. return { 3. templateUrl: "alert.html" 4. }; 5. });
  • 25. 1. app.directive("alert", function () { 2. return { 3. templateUrl: "alert.html" 4. }; 5. });
  • 26. 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
  • 27. replace Substitui o elemento pelo conteúdo do template.
  • 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. 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
  • 30. 1. app.directive("alert", function () { 2. return { 3. templateUrl: "alert.html" 4. }; 5. });
  • 31. 1. app.directive("alert", function () { 2. return { 3. templateUrl: "alert.html", 4. replace: true 5. }; 6. });
  • 32. 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
  • 33. 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
  • 34. 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.
  • 35. 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
  • 36. 1. <div alert></div> Diretiva restrita ao atributo do elemento
  • 37. 1. app.directive("alert", function () { 2. return { 3. templateUrl: "alert.html", 4. replace: true, 5. restrict: "A" 6. }; 7. });
  • 39. 1. app.directive("alert", function () { 2. return { 3. templateUrl: "alert.html", 4. replace: true, 5. restrict: "E" 6. }; 7. });
  • 40. 1. <div class="alert"></div> Diretiva restrita a classe do elemento
  • 41. 1. app.directive("alert", function () { 2. return { 3. templateUrl: "alert.html", 4. replace: true, 5. restrict: "C" 6. }; 7. });
  • 42. 1. <!-- directive: alert--> 2. <div></div> Diretiva restrita ao comentário do elemento
  • 43. 1. app.directive("alert", function () { 2. return { 3. templateUrl: "alert.html", 4. replace: true, 5. restrict: "M" 6. }; 7. });
  • 44. 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.
  • 45. @ Vincula um atributo a uma propriedade do scope da diretiva
  • 48. 1. <alert message="Por favor, preencha o campo nome e telefone"> 2. </alert>
  • 49. 1. app.directive("alert", function () { 2. return { 3. templateUrl: "alert.html", 4. replace: true, 5. restrict: "E" 6. }; 7. });
  • 50. 1. app.directive("alert", function () { 2. return { 3. templateUrl: "alert.html", 4. replace: true, 5. restrict: "E", 6. scope: { 7. } 8. }; 9. });
  • 51. 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. });
  • 52. 1. app.directive("alert", function () { 2. return { 3. templateUrl: "alert.html", 4. replace: true, 5. restrict: "E", 6. scope: { 7. message: "@" 8. } 9. }; 10. });
  • 53. = Cria um vínculo bi-direcional entre uma propriedade do scope do template a uma propriedade do scope da diretiva
  • 54. 1. <alert message="Por favor, preencha o campo nome e telefone"> 2. </alert>
  • 57. 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. });
  • 58. 1. app.directive("alert", function () { 2. return { 3. templateUrl: "alert.html", 4. replace: true, 5. restrict: "E", 6. scope: { 7. message: "=" 8. } 9. }; 10. });
  • 59. transclude É possível encapsular elementos dentro de uma diretiva.
  • 61. 1. <alert> 2. Por favor, preencha o campo nome e telefone 3. </alert>
  • 62. 1. app.directive("alert", function () { 2. return { 3. templateUrl: "alert.html", 4. replace: true, 5. restrict: "E", 6. transclude: true 7. }; 8. });
  • 63. 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
  • 64. 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
  • 65. Por dentro das propriedades das diretivas para criação de diretivas avançadas • link • require • controller • compile
  • 66. link Por meio da função link, podemos interagir com a DOM, vinculando eventos ou mesmo executar um procedimento de inicialização da diretiva.
  • 71. 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>
  • 72. 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>
  • 73. 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>
  • 74. 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>
  • 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. }; 11. });
  • 76. Parâmetros da função link • scope • element • attrs • controller • transclude
  • 77. 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. });
  • 78. 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. });
  • 79. 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. });
  • 80. 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. });
  • 81. 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
  • 82. require Cria um vínculo com outra diretiva, recebendo seu controller como parâmetro na função link.
  • 87. 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>
  • 88. 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>
  • 89. 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>
  • 90. 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. });
  • 91. 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. });
  • 92. 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. });
  • 93. 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. });
  • 94. 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. });
  • 95. 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. });
  • 96. 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. });
  • 97. controller Permite a criação e o compartilhamento de comportamento com outras diretivas.
  • 98. 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. });