O que é uma diretiva AngularJS?

Passei bastante tempo lendo a documentação do AngularJS e vários tutoriais e fiquei bastante surpreso com o quão inacessível é a documentação.

Tenho uma pergunta simples e respondível que também pode ser útil para outras pessoas que desejam adquirir o AngularJS:

O que é uma diretiva AngularJS?

Deve haver uma definição simples e precisa de uma diretiva em algum lugar, mas o site do AngularJS oferece essas definições surpreendentemente inúteis:

Na página inicial :

As diretivas são um recurso exclusivo e poderoso disponível no AngularJS. As diretivas permitem que você invente uma nova sintaxe HTML, específica para seu aplicativo.

Na documentação do desenvolvedor :

As diretivas são uma maneira de ensinar novos truques em HTML. Durante a compilação do DOM, as diretivas são comparadas com o HTML e executadas. Isso permite que as diretivas registrem o comportamento ou transformem o DOM.

E há uma série de palestras sobre diretrizes que, ironicamente, parecem assumir que o público já entende o que são.

Alguém seria capaz de oferecer, para referência clara, uma definição precisa do que é uma diretiva que explica:

1. O que é (veja a definição clara de jQuery como um exemplo)
2. Quais problemas e situações práticas se destina a abordar
3. Qual padrão de design ele personifica ou, alternativamente, como ele se encaixa na suposta missão MVC / MVW do AngularJS.

O que é (veja a definição clara de jQuery como um exemplo)?

Uma diretiva é essencialmente uma função ^† que é executada quando o compilador Angular a encontra no DOM. A (s) função (s) pode (m) fazer quase tudo, e é por isso que acho que é bastante difícil definir o que é uma diretiva. Cada diretiva possui um nome (como ng-repeat, tabs, make-up-yourself) e cada diretiva determina onde pode ser usada: elemento, atributo, classe, em um comentário.

^† Normalmente, uma diretiva possui apenas uma função de link (pós). Uma diretiva complicada pode ter uma função de compilação, uma função de pré-link e uma função de pós-link.

Quais problemas e situações práticas ele pretende resolver?

A coisa mais poderosa que as diretivas podem fazer é estender o HTML. Suas extensões são uma linguagem específica de domínio (DSL) para criar seu aplicativo. Por exemplo, se seu aplicativo executar um site de compras on-line, você poderá estender o HTML para ter diretivas "carrinho de compras", "cupom", "promoções" etc. etc. - quaisquer palavras, objetos ou conceitos que sejam mais naturais para usar nas " compras on-line ", em vez de" div "se" span "s (como o @WTK já mencionou).

As diretivas também podem componente HTML - agrupe um monte de HTML em algum componente reutilizável. Se você estiver usando o ng-include para extrair muito HTML, provavelmente é hora de refatorar as diretivas.

Qual padrão de design ele incorpora ou, alternativamente, como ele se encaixa na suposta missão MVC / MVW do angularjs

As diretivas são onde você manipula o DOM e captura os eventos do DOM. É por isso que as funções de compilação e link da diretiva recebem o "elemento" como argumento. Você pode

• defina um monte de HTML (isto é, um modelo) para substituir a diretiva
• eventos de ligação a este elemento (ou seus filhos)
• adicionar / remover uma classe
• altere o valor text ()
• observe as alterações nos atributos definidos no mesmo elemento (na verdade, são os valores dos atributos que são observados - essas são propriedades do escopo; portanto, a diretiva observa o "modelo" para alterações)
• etc.

Talvez uma definição realmente simples e inicial de diretivas angulares seja

As diretivas AngularJS (diretivas-ng) são atributos HTML com um prefixo ng (modelo-ng, aplicativo-ng, repetição-ng, ligação-ng) usado pelo Angular para estender o HTML. ( de: tutorial angular do W3schools )

Alguns exemplos disso seriam

A diretiva ng-app define um aplicativo AngularJS.

A diretiva ng-model vincula o valor dos controles HTML (entrada, seleção, área de texto) aos dados do aplicativo.

A diretiva ng-bind liga os dados do aplicativo à visualização HTML.

<div ng-app="">
    <p>Name: <input type="text" ng-model="name"></p>
    <p ng-bind="name"></p>
</div>

Confira este tutorial, pelo menos para mim, foi uma das melhores introduções ao Angular. Uma abordagem mais completa seria tudo o que o @ mark-rajcok disse antes.

Analisando a documentação, as diretivas são estruturas que você pode escrever que angularjs analisa para criar objetos e comportamentos.Em outras palavras, é um modelo no qual você usa a combinação de nós arbitrários e pseudo-javascript e espaços reservados para dados para expressar intenções de como seu widget (componente) está estruturado, como se comporta e como é alimentado com dados. O Angularjs então executa essas diretivas para convertê- las em código html / javascript.

As diretivas existem para que você possa criar componentes mais complexos (widgets) usando a semântica adequada. Basta dar uma olhada no exemplo de diretivas angularjs - elas estão definindo o painel de guias (o que não é válido em HTML comum). É mais intuitivo do que usar div-s ou spans para criar uma estrutura que é estilizada para parecer um painel de guias.

Nas diretivas AngularJS, são marcadores html re para um elemento HTML DOM, como um atributo (restrito-A), nome do elemento (restrito-E), comentário (restrito-M) ou classe CSS (restrito-C) que informa ao compilador HTML do AngularJS ($ compilar) para executar um comportamento especificado para esse elemento DOM ou até mesmo transformar o elemento DOM e seus filhos. Alguns exemplos são ng-bind, ng-hide / show etc.

A página inicial é muito clara sobre isso: quando você passa o mouse sobre as guias na última seção:

Estendemos o vocabulário do HTML com um tabs elemento personalizado . O tabsresumo da estrutura HTML complexa e do comportamento necessário para a renderização das guias. O resultado é uma visualização mais legível e uma sintaxe facilmente reutilizável ".

Em seguida, na próxima guia:

angular.module('components', []).
  directive('tabs', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      controller: function($scope, $element) {
        var panes = $scope.panes = [];

        $scope.select = function(pane) {
          angular.forEach(panes, function(pane) {
            pane.selected = false;
          });
          pane.selected = true;
        }

Assim, você pode inventar elementos html, ou seja, tabse deixar angular manipular a renderização desses elementos.