web-dev-qa-db-fra.com

Qu'est-ce qu'une directive AngularJS?

J'ai passé beaucoup de temps à lire la documentation d'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 aux autres personnes cherchant à prendre AngularJS:

Qu'est-ce qu'une directive AngularJS?

Il devrait exister une définition simple et précise d’une directive quelque part, mais le site Web AngularJS offre 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 le documentation pour les développeurs :

Les directives sont un moyen d'enseigner de nouvelles astuces 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.

Et il existe une série de discussions sur des directives qui, ironiquement, semblent présumer que le public comprend déjà ce qu’elles sont.

Est-ce que n'importe qui pourrait 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 l'exemple définition de jQuery )
  2. Quels problèmes pratiques et quelles situations est-il censé traiter?
  3. Quel modèle de conception il incarne, ou bien comment il s’intègre dans la prétendue mission MVC/ MVW d’AngularJS.
javascriptangularjsangular-directive
178
tohster

Peut-être qu'une définition simple et initiale simple pour angular angulaires) serait

Les directives AngularJS (directives-ng) sont des attributs HTML avec un préfixe ng (modèle-ng, application-ng, répétition-ng, liaison-ng) utilisées par Angular pour étendre le code HTML. (- depuis: W3schools angular tutorial )

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 (entrée, sélection, textarea) aux données de l'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, du moins pour moi, c’était l’une des meilleures introductions à Angular. Une approche plus complète serait tout ce que @ mark-rajcok a déjà dit.

11
jplozgom

En regardant dans la documentation, les directives sont des structures que vous pouvez écrire et que angularjs analyse afin de créer des objets et des comportements. En d’autres termes, il s’agit d’un modèle dans lequel votre widget (composant) est structuré, comment il se comporte et comment il se nourrit de données. Angularjs s’exécute alors contre 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. Jetez un coup d’œil à l’exemple angularjs de directives - elles définissent le volet de tabulation (qui n’est bien sûr pas valide en HTML normal). C'est plus intuitif que d'utiliser div-s ou spans pour créer une structure qui est ensuite stylée pour ressembler à un onglet.

4
WTK

Dans AngularJS, les directives sont des repères html 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 indique au compilateur HTML d’AngularJS ($ compile) pour exécuter 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.

3
Vivek Panday

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

Nous avons étendu le vocabulaire HTML avec un élément personnalisé tabs. Le tabs résume la structure et le comportement complexes du code HTML nécessaires au 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;
        }

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

2
raam86