Qu'est-ce qu'une directive angularjs ?

Question

J'ai passé pas mal de temps à lire la documentation angularjs et plusieurs tutoriels, et j'ai été assez surpris de voir à quel point la documentation est inabordable.

J'ai une question simple, à laquelle il est possible de répondre, et qui peut également être utile à d'autres personnes cherchant à se familiariser avec 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 la site web angularjs propose ces définitions étonnamment inutiles :

• Sur la page d'accueil : Les directives sont une fonctionnalité unique et puissante disponible uniquement dans Angular. Les directives vous permettent d'inventer une nouvelle syntaxe HTML, spécifique à votre application.

• Dans le documentation des développeurs : Les directives sont un moyen d'enseigner de nouveaux trucs à HTML. Pendant la compilation du DOM, les directives sont comparées au HTML et exécutées. Cela permet aux directives d'enregistrer un comportement, ou de transformer le DOM.

• Il existe un série de discussions sur des directives qui, ironiquement, semblent supposer que le public comprend déjà de quoi il s'agit.

Quelqu'un serait-il en mesure de proposer, à titre de référence, une définition précise de ce qu'est une directive qui explique :

1. Ce que c'est (voir le définition de jQuery à titre d'exemple)
2. Quels sont les problèmes et les situations pratiques qu'il est censé résoudre ?
3. Quel modèle de conception incarne-t-il, ou alternativement, comment s'intègre-t-il dans le prétendu modèle MVC/ MVW mission d'angularjs

Merci !

Answer 1

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

Une directive est essentiellement une fonction † qui s'exécute lorsque le compilateur Angular le trouve dans le DOM. La ou les fonctions 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-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 complexe peut avoir une fonction de compilation, une fonction de pré-liaison et une fonction de post-liaison.

Quels sont les problèmes et les situations pratiques qu'elle vise à résoudre ?

La chose la plus puissante que les directives puissent faire est d'étendre le HTML. Vos extensions sont Langage spécifique au domaine (DSL) pour construire votre application. Par exemple, si votre application gère un site d'achats en ligne, vous pouvez étendre le HTML pour avoir des directives "shopping-cart", "coupon", "specials", etc. - quels que soient les mots, objets ou concepts qui sont plus naturels à utiliser dans le domaine des "achats en ligne", plutôt que des "div "s et "span "s (comme @WTK l'a déjà mentionné).

Les directives permettent également de décomposer le HTML en composants, c'est-à-dire de regrouper un paquet de HTML en un composant réutilisable. Si vous vous retrouvez à utiliser ng-include pour regrouper beaucoup de HTML, il est probablement temps de passer aux directives.

Quel modèle de conception incarne-t-il, ou alternativement, comment s'inscrit-il dans la 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 compile et link de la directive reçoivent toutes deux "element" comme argument. Vous pouvez

• définir un paquet de HTML (i.e., un modèle) pour remplacer la directive
• lier des événements à cet élément (ou à ses enfants)
• ajouter/supprimer une classe
• changer la valeur de text()
• surveiller les changements apportés aux 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, d'où 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 ? C'est ce qu'est une directive.

Answer 2

Peut-être un simple et initial La définition 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és par Angular pour étendre le HTML. ( de : W3schools angular tutorial )

Voici quelques exemples

Le site ng-app définit une application AngularJS.

Le site ng-model lie la valeur des contrôles HTML (input, select, textarea) aux données de l'application.

Le site ng-bind lie les données de l'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, du moins pour moi, c'est l'une des meilleures introductions à Angular. Une approche plus complète serait tout ce que @mark-rajcok a dit avant.

Answer 3

En d'autres termes, il s'agit d'un modèle dans lequel vous utilisez un mélange de nodes arbitraires, de pseudo-javascript et de placeholders pour les données afin d'exprimer vos intentions sur la façon dont 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 construire des composants plus complexes (widgets) en utilisant la sémantique appropriée. Il suffit de regarder l'exemple de directives d'angularjs - elles définissent le panneau d'onglets (qui n'est bien sûr pas valide en HTML normal). C'est plus intuitif que d'utiliser des div-s ou des spans pour créer une structure qui est ensuite stylisée en fonction de l'architecture de la page. ressembler à un volet d'onglets.

Answer 4

Dans AngularJS, les directives sont des marqueurs html pour un élément DOM HTML, 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) d'exécuter un comportement spécifique à cet élément DOM ou même de transformer l'élément DOM et ses enfants.

Answer 5

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

Nous avons étendu le vocabulaire de HTML avec une fonction personnalisée tabs élément. Le site tabs fait abstraction de la structure HTML complexe et le comportement nécessaire au rendu des onglets. Le résultat est une vue plus 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;
        }

Vous pouvez donc inventer des éléments html, par exemple tabs et laisser angular gérer le rendu de ces éléments.