HTML++

Hello {{ person }}!

  
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!
'
      };
    });
            

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!
'
    };
  });
            

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 }}!
'
    };
  });
              

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: '
' +
              ' 
' +
              '
'
  }
});
            

Obrigado!

Ciro Nunes / cironunes.com

is hiring Front-end Engineers