Quelles sont les principales différences entre les composants et les directives dans AngularJS 1.5?
J'ai du mal à comprendre la vraie différence entre les composants et les directives. Je comprends maintenant que les composants sont un concept beaucoup plus simple.
En gardant cela à l'esprit, y a-t-il une raison de continuer à utiliser des directives lors de l'utilisation d'AngularJS 1.5?
Peut-être que le contexte réel me manque ici, mais il semble que les composants fournissent une API plus simple.
Alors, pourquoi devrais-je continuer à utiliser une directive?
Angular 2 indique que tout est un composant, donc travailler vers une migration facile de 1.5 à 2, ne serait-il pas logique de n'utiliser que des composants à l'avenir?
Dans le passé, j'ai utilisé des directives pour créer, par exemple, une zone de texte de recherche automatique, il n'y a aucune raison pour laquelle je ne devrais pas le faire maintenant dans un composant, n'est-ce pas? Et puis-je réutiliser ce composant dans d'autres composants que je crée?
Il suffit de copier les documents angular, car ils les ont mis de la meilleure façon possible.).
Comprendre les composants
Dans Angular, un composant est un type spécial de directive qui utilise une configuration plus simple qui convient à une structure d'application basée sur un composant.
Cela facilite l'écriture d'une application d'une manière similaire à l'utilisation des composants Web ou à l'utilisation du style d'architecture d'application Angular 2).
Avantages des composants:
- configuration plus simple que les directives simples
- promouvoir les valeurs par défaut et les meilleures pratiques
- optimisé pour l'architecture basée sur les composants
- l'écriture de directives de composant facilitera la mise à niveau vers Angular 2
Quand ne pas utiliser les composants:
- pour les directives qui reposent sur la manipulation DOM, l'ajout d'écouteurs d'événements, etc., car les fonctions de compilation et de liaison ne sont pas disponibles
- lorsque vous avez besoin d'options de définition de directive avancées comme priorité, terminal, multi-éléments
- lorsque vous voulez une directive déclenchée par un attribut ou une classe CSS, plutôt qu'un élément
plus de lecture: https://docs.angularjs.org/guide/component
Je vais essayer d'expliquer en utilisant une perspective de haut niveau, inspirée de cet article ( Angular 2: The Difference Between Components and Directives ). Il indique Angular 2 mais est également utile dans le contexte AngularJs.
Directives
En informatique, il existe le concept de "directive Pragma". Selon Wikipedia:
"En programmation informatique, un pragma de directive (de" pragmatique ") est une construction de langage qui spécifie comment un compilateur (ou assembleur ou interprète) doit traiter son entrée. Les directives ne font pas partie du langage proprement dit "
Cela correspond bien à la description donnée par les documents AngularJS:
"À un niveau élevé, les directives sont des marqueurs sur un élément DOM (comme un attribut, un nom d'élément, un commentaire ou une classe CSS) qui indiquent au compilateur HTML d'AngularJS ($ compile) d'attacher un comportement spécifié à cet élément DOM (par exemple via des écouteurs d'événements) ), ou même pour transformer l'élément DOM et ses enfants. "
Donc, ce que font essentiellement les directives, c'est de donner des instructions au compilateur (angulaire), afin de modifier le DOM ou son comportement.
Composants
Les composants dans AngularJS sont une directive spéciale; ils essaient d'imiter les composants Web, comme l'indique la documentation AngularJS:
Dans AngularJS, un composant est un type spécial de directive qui utilise une configuration plus simple qui convient à une structure d'application basée sur un composant.
Cela facilite l'écriture d'une application d'une manière similaire à l'utilisation des composants Web ou au style d'architecture d'application du nouveau Angular.
Quand utiliser quoi?
Personnellement, j'utilise des composants sauf s'il y a une bonne raison de ne pas le faire.
Certaines de ces raisons sont données dans les documents AngularJS pour les composants:
- pour les directives qui doivent effectuer des actions dans les fonctions de compilation et de pré-liaison, car elles ne sont pas disponibles
- lorsque vous avez besoin d'options de définition de directive avancées comme priorité, terminal, multi-éléments
- lorsque vous voulez une directive déclenchée par un attribut ou une classe CSS, plutôt qu'un élément
Une autre façon de le dire:
Les directives sont le mécanisme par lequel nous pouvons attacher un comportement aux éléments du DOM.
Les composants sont un type de directive spécifique qui permet d'utiliser la fonctionnalité des composants Web - des éléments réutilisables encapsulés disponibles dans toute notre application.
Conclusion possible
Je pense que la question n'est pas si bonne une fois que vous comprenez qu'un composant est une directive. Les deux concepts n'essaient pas de résoudre le même problème. Les composants sont plutôt une extension qui permet d'utiliser des directives pour créer des applications Web basées sur des composants.
Approfondissement
Todd Motto partage ses connaissances sur ce sujet dans ce petit Gist .
Une directive décore le DOM, elle ajoute un comportement et étend le DOM existant. Lorsque vous utilisez un .component (), vous créez DOM, lorsque vous utilisez .directive () vous décorez DOM, c'est l'état d'esprit