Quelle est la différence entre service, directive et module?

J'ai lu beaucoup de documents et je suis de plus en plus confus. Je ne peux pas comprendre la différence entre un

• un service
• directif
• module

Je vois beaucoup de composants personnalisés. Parfois, ils utilisent des directives, parfois des services. Cela commence toujours par un module. Quelqu'un peut-il expliquer par un exemple quelle est la différence entre ces trois types?

Pensez à un module comme étant un endroit pour câbler un certain nombre d'autres choses, telles que des directives, des services, des constantes, etc. Les modules peuvent être injectés dans d'autres modules vous donnant un niveau élevé de réutilisation.

Lors de l'écriture d'une application angulaire, vous auriez un module de niveau supérieur qui est votre code d'application (sans modèles).

Les services sont principalement un moyen de communiquer entre les contrôleurs, mais vous pouvez injecter un service dans un autre. Les services sont souvent utilisés pour accéder à vos magasins de données et les gens encapsuleront les API angulaires, telles que ngResource. Cette technique est utile car elle rend les tests (en particulier les moqueurs) assez faciles. Vous pouvez avoir des services pour faire d'autres choses comme l'authentification, la journalisation, etc.

Les directives sont utilisées pour créer des widgets ou encapsuler des éléments existants tels que les plugins jquery. L'emballage des plugins existants peut être un défi et la raison pour laquelle vous le feriez est d'établir une liaison de données bidirectionnelle entre les plugins et angular. Si vous n'avez pas besoin de liaison de données bidirectionnelle, vous n'avez pas besoin de les encapsuler.

Une directive est également un endroit pour faire des manipulations DOM, attraper des événements DOM, etc. Vous ne devriez pas faire de choses liées au DOM dans des contrôleurs ou des services. La création de directives peut devenir assez complexe. À mon humble avis, je recommande d'abord de regarder l'API pour quelque chose qui peut faire ce que vous recherchez OU de demander conseil au groupe Google d'Angular.

De mes propres notes personnelles (principalement des extraits de la documentation, des messages du groupe Google et des messages SO):

Modules

• fournir un moyen pour les services d'espace de noms / groupes, les directives, les filtres, les informations de configuration et le code d'initialisation
• aider à éviter les variables globales
• sont utilisés pour configurer l'injecteur $, permettant aux choses définies par le module (ou tout le module lui-même) d'être injectées ailleurs (truc d'injection de dépendance)
• Les modules angulaires ne sont pas liés à CommonJS ou Require.js. Contrairement aux modules AMD ou Require.js, les modules Angular n'essaient pas de résoudre le problème de l'ordre de chargement des scripts ou de la récupération de script paresseuse. Ces objectifs sont orthogonaux et les deux systèmes de modules peuvent vivre côte à côte et atteindre leurs objectifs (ainsi le prétend la documentation).

Prestations de service

• sont des singletons, il n'y a donc qu'une seule instance de chaque service que vous définissez. En tant que singletons, ils ne sont pas affectés par les étendues et peuvent donc être accédés par (partagés avec) plusieurs vues / contrôleurs / directives / autres services
• Vous pouvez (et devriez probablement) créer des services personnalisés lorsque
  • deux ou plusieurs choses doivent accéder aux mêmes données (n'utilisez pas la portée racine) ou vous voulez simplement encapsuler proprement vos données
  • vous souhaitez encapsuler les interactions avec, par exemple, un serveur Web (étendre $ resource ou $ http dans votre service)
• Les services intégrés commencent par «$».
• Pour utiliser un service, l'injection de dépendances est requise sur le dépendant (par exemple, sur le contrôleur, ou un autre service, ou une directive).

Directives (certains des éléments ci-dessous disent essentiellement la même chose, mais j'ai trouvé que parfois un libellé légèrement différent aide beaucoup)

• sont responsables de la mise à jour du DOM lorsque l'état du modèle change
• étendre le vocabulaire HTML = enseigner de nouvelles astuces HTML.
  Angular est livré avec un ensemble intégré de directives (par exemple, ng- * stuff) qui sont utiles pour créer des applications Web, mais vous pouvez ajouter les vôtres afin que HTML puisse être transformé en un langage DSL (Domain Specific Language) déclaratif. Par exemple, les éléments <tabs> et <pane> sur la démo de la page d'accueil Angular "Création de composants".
  • Directives intégrées non évidentes (car elles ne commencent pas par "ng"): a, form, input, script, select, textarea. Sous Angular, tout cela fait plus que la normale!
• Les directives vous permettent de "composant HTML". Les directives sont souvent meilleures que ng-include. Par exemple, lorsque vous commencez à écrire beaucoup de HTML avec principalement des liaisons de données, refactorisez ce HTML en directives (réutilisables).
• Le compilateur Angular vous permet d'attacher un comportement à n'importe quel élément ou attribut HTML et même de créer de nouveaux éléments ou attributs HTML avec un comportement personnalisé. Angular appelle ces directives d' extensions de comportement .
  • Lorsque vous résumez tout cela, une directive n'est qu'une fonction qui s'exécute lorsque le compilateur Angular la rencontre dans le DOM.
• Une directive est un comportement ou une transformation DOM qui est déclenchée par la présence d'un attribut, d'un nom d'élément, d'un nom de classe ou d'un nom dans un commentaire. La directive est un comportement qui doit être déclenché lorsque des constructions HTML spécifiques sont rencontrées dans le processus de compilation (HTML). Les directives peuvent être placées dans des noms d'élément, des attributs, des noms de classe, ainsi que des commentaires.
  • La plupart des directives sont limitées à l'attribut uniquement. Par exemple, DoubleClick n'utilise que des directives d'attributs personnalisés.
• voir aussi Qu'est-ce qu'une directive angularjs?

Définissez et regroupez les éléments angulaires (trucs d'injection de dépendances) dans des modules.
Partagez des données et intégrez l'interaction du serveur Web dans les services.
Étendez HTML et faites des manipulations DOM dans les directives.
Et rendez les contrôleurs aussi «fins» que possible.