Qu'est-ce qu'une directive AngularJS?


181

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.

2
Vous m'avez eu à ... voir la définition claire de jQuery à titre d'exemple.
joshuamabina

Je ne sais pas comment c'était en 2012 sur Stack Overflow, mais je viens de réviser cette question et d'ajouter la balise "angular-directive". Ses informations sur les balises donnent en fait une définition assez claire. De plus, j'ai remarqué que je ne trouve pas la deuxième citation dans la documentation du développeur…
user4642212

Réponses:


142

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.


En HTML , nous avons des choses comme <a href="...">, <img src="...">, <br>, <table><tr><th>. Comment décririez-vous ce que sont a, href, img, src, br, table, tr et th? Voilà ce qu'est une directive.


2
Mark, merci. Je pense que c'est clair et probablement le plus proche d'une réponse précise. Je pense que les directives sont toujours liées aux balises HTML, non? Il est donc peut-être plus exact de dire qu'une directive est une fonction liée à une balise HTML. En tant que tel, il permet d'étendre le langage HTML de manière déclarative.
tohster

Eh bien, une directive peut être utilisée dans un commentaire, donc toutes les directives ne doivent pas nécessairement être liées à une balise HTML. Par exemple,<!-- directive: my-directive exp -->
Mark Rajcok

Mark, est-ce que ce serait une utilisation non conventionnelle d'une directive? c'est-à-dire que les directives sont classiquement utilisées et conçues pour étendre HTML.
tohster

9
OK, j'ai une meilleure compréhension maintenant. Une façon d'y penser est: 1. Les DSL représentent généralement des arbres de syntaxe 2. Le DOM HTML est un arbre de syntaxe DSL, mais c'est un arbre rigide: les balises sont pour la plupart rigoureusement conçues et conçues, et non extensibles. 3. AngularJS et le mécanisme de directive en particulier, rendent le DOM HTML plus flexible en permettant aux développeurs de créer des nœuds d'arborescence personnalisés. Ces nœuds peuvent représenter de nouveaux comportements, ou des agrégations de comportements existants (sous-arborescences) 4. Ainsi, les directives permettent au DOM HTML d'évoluer vers un DSL personnalisé
tohster

1
@MarkRajcok J'ai du mal avec votre dernier paragraphe. Est-ce clair <div></div>est une directive? Tu as dit oui. Mais il n'y a pas de décoration ici (via élément, classe, commentaire, attribut) .Les gens ici disent que ce sont des repères pour un DOM HTML . Pouvez-vous clarifier ? (Je ne parle pas de la cause où vous pouvez créer une directive pour un élément simple comme <div>)
Royi Namir

11

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.


4

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.


J'ai ajouté ce que je pense être une explication un peu moins technique.
raam86

1
Merci, c'est très utile. Alors peut-être que je peux le voir comme une sorte de modèle dynamique (similaire à une classe en programmation OO) qui encapsule un composant, le décrit par des propriétés et des comportements, est capable d'être instancié et peut s'exprimer dans le DOM? Et la raison pour laquelle il existe (par rapport à un objet javascript ou à un modèle html) est de permettre aux balises HTML d'adopter des comportements plus dynamiques, semblables à des objets, afin qu'elles puissent commencer à devenir manipulables dans la programmation de type OO?
tohster

Oui et non. Je ne dirais pas que la raison pour laquelle les directives existent a beaucoup à voir avec leur manipulation dans la programmation OO. En fait, toute l'approche angularjs du framework semble fortement liée aux attributs HTML et aux nœuds DOM arbitraires plutôt qu'à l'écriture de code Javascript OO. Je trouve cette ambiance en regardant tous les exemples de la façon dont angularjs résout les problèmes quotidiens. Je dirais que la principale raison derrière les directives est d'avoir le moyen d'intégrer les comportements et les données dans un composant sémantiquement structuré.
WTK

3

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.


2

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.


2
Merci pour la réponse rapide! Le but d'une directive est donc d'étendre le vocabulaire du HTML par la création de balises et d'attributs personnalisés? Cela semble assez puissant, même si cela semble aborder un problème beaucoup plus large que "MVW". BTW d'autres peuvent ne pas être d'accord, mais je pense que faire défiler vers le bas d'une page, puis passer la souris sur un mot hyperlien, puis lire une info-bulle contextuelle qui ne mentionne pas une seule fois le mot "directive" n'est pas exactement un " définition très claire de ce qu’est une directive. Néanmoins, appréciez vraiment la réponse rapide.
tohster

Oui! Vous pouvez vérifier ce violon qu'ils ont fait. Le html réel est différent du on dans le volet html.
raam86
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.