Qu'est-ce qu'une directive AngularJS?

J'ai passé beaucoup de temps à lire la documentation AngularJS et plusieurs tutoriels, et j'ai été assez surpris de voir à quel point la documentation est inaccessible.

J'ai une question simple et répondable qui peut également être utile à ceux qui cherchent à prendre AngularJS:

Qu'est-ce qu'une directive AngularJS?

Il devrait y avoir une définition simple et précise d'une directive quelque part, mais le site Web AngularJS propose ces définitions étonnamment inutiles:

Sur la page d'accueil :

Les directives sont une fonctionnalité unique et puissante disponible dans AngularJS. Les directives vous permettent d'inventer une nouvelle syntaxe HTML, spécifique à votre application.

Dans la documentation développeur :

Les directives sont un moyen d'enseigner de nouvelles astuces HTML. Pendant la compilation DOM, les directives sont comparées au HTML et exécutées. Cela permet aux directives d'enregistrer le comportement ou de transformer le DOM.

Et il y a une série de discussions sur les directives qui, ironiquement, semblent supposer que le public comprend déjà ce qu'elles sont.

Quelqu'un pourrait-il offrir, pour référence claire, une définition précise de ce qu'est une directive qui explique:

1. Qu'est-ce que c'est (voir la définition claire de jQuery à titre d'exemple)
2. Quels problèmes et situations pratiques il est prévu de résoudre
3. Quel modèle de conception il incarne, ou comment il s'intègre dans la prétendue mission MVC / MVW d'AngularJS.

Qu'est-ce que c'est (voir la définition claire de jQuery à titre d'exemple)?

Une directive est essentiellement une fonction ^† qui s'exécute lorsque le compilateur Angular la trouve dans le DOM. La (les) fonction (s) peuvent faire presque tout, c'est pourquoi je pense qu'il est assez difficile de définir ce qu'est une directive. Chaque directive a un nom (comme ng-repeat, tabs, make-up-your-own) et chaque directive détermine où elle peut être utilisée: élément, attribut, classe, dans un commentaire.

^† Une directive n'a normalement qu'une fonction de (post) liaison. Une directive compliquée peut avoir une fonction de compilation, une fonction de pré-liaison et une fonction de post-liaison.

Quels problèmes et situations pratiques entend-il résoudre?

La chose la plus puissante que les directives peuvent faire est d'étendre le HTML. Vos extensions sont un langage DSL ( Domain Specific Language ) pour la création de votre application. Par exemple, si votre application exécute un site d'achat en ligne, vous pouvez étendre le code HTML pour avoir des directives "panier", "coupon", "spéciaux", etc. - quels que soient les mots, objets ou concepts qu'il est plus naturel d'utiliser dans le " le domaine des achats en ligne, plutôt que les «div» et les «span» (comme @WTK déjà mentionné).

Les directives peuvent également intégrer du HTML - regrouper un tas de HTML en un composant réutilisable. Si vous vous retrouvez à utiliser ng-include pour extraire beaucoup de HTML, il est probablement temps de le refactoriser en directives.

Quel modèle de conception incarne-t-il, ou comment s'intègre-t-il dans la prétendue mission MVC / MVW d'angularjs

Les directives sont l'endroit où vous manipulez le DOM et attrapez les événements DOM. C'est pourquoi les fonctions de compilation et de liaison de la directive reçoivent toutes deux l '"élément" comme argument. Vous pouvez

• définir un tas de HTML (c'est-à-dire un modèle) pour remplacer la directive
• lier des événements à cet élément (ou à ses enfants)
• ajouter / supprimer une classe
• changer la valeur text ()
• surveillez les modifications des attributs définis dans le même élément (en fait, ce sont les valeurs des attributs qui sont surveillées - ce sont des propriétés de portée, donc la directive surveille le «modèle» pour les changements)
• etc.

Peut-être qu'une définition initiale très simple des directives angulaires serait

Les directives AngularJS (ng-directives) sont des attributs HTML avec un préfixe ng (ng-model, ng-app, ng-repeat, ng-bind) utilisé par Angular pour étendre le HTML. (à partir de: tutoriel angulaire W3schools )

Quelques exemples de ceci seraient

La directive ng-app définit une application AngularJS.

La directive ng-model lie la valeur des contrôles HTML (input, select, textarea) aux données d'application.

La directive ng-bind lie les données d'application à la vue HTML.

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

Consultez ce tutoriel, au moins pour moi, c'était l'une des meilleures introductions à Angular. Une approche plus complète serait tout ce que @ mark-rajcok a dit auparavant.

En regardant la documentation, les directives sont des structures que vous pouvez écrire qu'angularjs analyse afin de créer des objets et des comportements. votre widget (composant) est structuré, comment il se comporte et comment il est alimenté en données. Angularjs s'exécute ensuite sur ces directives pour les traduire en code html / javascript fonctionnel.

Les directives sont là pour vous permettre de créer des composants plus complexes (widgets) en utilisant une sémantique appropriée. Jetez simplement un œil à l'exemple angularjs de directives - ils définissent le volet d'onglet (qui n'est bien sûr pas valide en HTML standard). C'est plus intuitif que d'utiliser des div-s ou des travées pour créer une structure qui est ensuite conçue pour ressembler à un volet d'onglets.

Dans AngularJS, les directives sont des marqueurs html re pour un élément HTML DOM comme un attribut (restrict-A), un nom d'élément (restrict-E), un commentaire (restrict-M) ou une classe CSS (restrict-C) qui indiquent au compilateur HTML d'AngularJS ($ compile) pour effectuer un comportement spécifié sur cet élément DOM ou même transformer l'élément DOM et ses enfants, certains exemples sont ng-bind, ng-hide / show etc.

La page d'accueil est très claire à ce sujet: lorsque vous survolez les onglets de la dernière section:

Nous avons étendu le vocabulaire HTML avec un tabs élément personnalisé . Le tabsrésume la structure et le comportement HTML complexes nécessaires pour le rendu des onglets. Le résultat est une vue plus lisible et une syntaxe très facilement réutilisable. "

Puis dans l'onglet suivant:

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

Ainsi, vous pouvez inventer des éléments html ie tabset laisser angular gérer le rendu de ces éléments.