Criando componentes – Hello {{ person }}! – Quando usar diretivas?

View Github Repository Open presentation in a new window

cironunes

See all presentation from cironunes

Criando componentes – Hello {{ person }}! – Quando usar diretivas?

0 5

angular-components-talk

Slides da apresentação "Criando Componentes AngularJS"

On Github cironunes / angular-components-talk

Criando componentes

by Ciro Nunes / @cironunesdev

#AngularJSSP 20 de Junho '14

? Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
> “AngularJS estende o HTML para criarmos aplicações”
> “AngularJS ensina ao browser novos truques”

HTML++

Hello !


  
Hello {{ person }}

  

            

            
angular.module('myApp', []);
            

          
Qual é a feature que possibilita programar UIs de forma declarativas?

          

HTML Diretivas!

          
Hoje vamos falar sobre componentes (ou diretivas) AngularJS

          
Agenda

            
  • Consumindo componentes de terceiros
    • 
              
  • Melhores práticas para criar diretivas
    • 
              
  • Como compartilhar seus módulos
    • 
            
Quando usar diretivas?

            
  • Custom Elements
    • 
              
  • Manipular o DOM
    • 
              
  • Encapsular plugins
    • 
              
  • Definir a UI de forma declarativa
    • 
            
Não reinvente a roda!

          
Diretivas do core

            
  • ng-app
    • 
              
  • ng-controller
    • 
              
  • ng-model
    • 
              
  • ng-view
    • 
              
  • ng-click
    • 
              
  • ng-repeat
    • 
              
  • ng-view
    • 
              
  • ng-show
    • 
              
  • ng-hide
    • 
              
  • ...
    • 
            
Usando componentes de terceiros

          
$ bower search angular-ui
$ bower install angular-ui --save
            


            
angular.module('myApp', ['ui']);
            

          
Escolhendo componentes de terceiros

            
  • Cobertura de testes automatizados
    • 
              
  • Segue as melhores práticas?
    • 
            
Onde encontrar componentes incríveis

            
Criando diretivas

          
Criando diretivas

            
Crie um módulo para suas diretivas

            
  angular.module('myDirectives', []);
            


            
Inclua esse módulo no módulo da aplicação

            
  angular.module('myApp', ['myDirectives']);
            



            
  angular.module('myDirectives')
    .directive('myGreet', function() {
      return {
        restrict: 'A', // já vamos falar sobre isso!
        template: '
Hello World!
'
      };
    });
            

            
  

            

            
Hello World!

          
Convenção de nomenclatura

            
  • 
                Use um prefixo único seguido por "-". (e.g.: my-component)
                
    • Evita conflitos
      • 
                  
    • Fácil de identificar
      • 
                
    • 
              
  • Não use o prefixo "ng-"
    • 
              
  • O mais comum é um prefixo de duas letras (e.g.: "ng-", "ui-")
    • 
            
Restrict


            
Atributos:

            
restrict: 'A'
            


            
Elementos:

            
restrict: 'E'
            


            
Atributos e elementos:

            
restrict: 'AE'
            

          
Restrict

            
angular.module('myDirectives', [])
  .directive('myGreet', function() {
    return {
      restrict: 'E',
      template: '
Hello World!
'
    };
  });
            
            


            
Hello World!
Vamos deixar as coisas um pouco mais dinâmicas...

          
  .controller('MyCtrl', function($scope) {
    $scope.person = 'SP';
  })

  .directive('myGreet', function() {
    return {
      restrict: 'E'
      template: '
Hello {{ person }}!
'
    };
  });
              

              
  

    

              

              

                
Hello SP!

          
Scope

            
  • Por padrão as diretivas herdam do escopo pai
    • 
              
  • As diretivas podem alterar o escopo pai (sandbox?)
    • 
              
  • Falta de um contrato entre o consumidor e a diretiva
    • 
            
Isolate scope

            
Não herdam dos seus pais

          
Isolate scope

            
Componentes devem ser reutilizáveis

            
angular.module('myDirectives', [])
  .controller('MyCtrl', function() {
    $scope.person = 'John';
  })
  .directive('myGreet', function() {
    return {
      restrict: 'E',
      template: '
Hello {{ person }}!
',
      scope: {
        person: '@'
      }
    };
  });
            

            

  

            
          
Isolate scope

            
scope: {
  person: '@',  // top-down
  age: '=',     // two-way data-binding
  sayHello: '&' // bottom-up
}
            

          
Compile e Link

            
Onde a manipulação do DOM deve ser feita

          
app.directive('myGreet', function() {
  return {
    restrict: 'E',
    template: /* snip */,
    link: function($scope, $element, $attrs) {
      $element.on('click', function() {
        // do something
      });
    }
  }
});
            

          
Compile e Link

            

              Compile: cria a diretiva prepara uma linkFn
            


            

              Link: liga a diretiva ao escopo usando a linkFn
            

          
Transclude

          
Title

  
Lorem ipsum dolor sit amet



            
.directive('myModal', function() {
  return {
    restrict: 'E',
    transclude: true,
    template: '
' +
              ' 
' +
              '
'
  }
});
            
          
Melhores práticas

          
#1 Convenção de nomenclatura

          
#2 Encapsulamento

          
#3 Customização

          
Protip: Use um generator!

        
Compartilhando

          
#1 Crie um repositório

          
#2 bower init

          
#3 Crie seu componente seguindo as boas práticas

          
#4 Não se esqueça dos testes!

          
#5 bower publish

        
Obrigado!

            
Ciro Nunes / cironunes.com

          
is hiring Front-end Engineers

            mailto:cnunes@questrade.com