Angular comprend le module et l'injecteur, c'est-à-dire l'injection de dépendance

Les avantages de l'injection de dépendance (DI) ne seront plus discutés, et ceux qui ont utilisé le cadre du ressort le savent. En tant que cadre JS de premier plan, AngularJS prend également en charge DI, qui est une fonctionnalité que JavaScript / jQuery n'a pas. Di lié aux angularjs incluent angular.module (), angular.injector (), $ injecteur et $ fournis. Pour un conteneur DI, il doit avoir trois éléments: l'enregistrement des services, la déclaration de dépendance et l'acquisition d'objets. Par exemple, dans le printemps, l'enregistrement du service est implémenté via la balise <Ean> du fichier de configuration XML ou de l'annotation @Repository, @Service, @Controller et @Component; L'acquisition de l'objet peut être implémentée par applicationContext.getBean (); La déclaration de dépendances peut être configurée dans le fichier XML, ou elle peut être déclarée dans le code Java à l'aide de @Resource et d'autres annotations. Dans Angular, le module et les $ fournis sont équivalents à l'enregistrement du service; L'injecteur est utilisé pour obtenir des objets (Angular terminera automatiquement l'injection de dépendances); Il existe 3 façons de déclarer les dépendances en angulaire. Ce qui suit est une introduction à la DI angulaire de ces 3 aspects.

1. Angular.module () crée, obtient et enregistre les modules en angulaire

The Angular.Module () est un lieu mondial pour créer, enregistrer et récupérer des modules angulaires. Lorsqu'il a passé deux arguments ou plus, un nouveau module est créé. S'il est passé qu'un seul argument, un module existant (le nom passé comme premier argument au module) est récupéré.

 // passer plus d'un paramètre signifie un nouveau module; Un tableau vide signifie que le module ne s'appuie pas sur d'autres modules var createModule = angular.module ("mymodule", []); // il n'y a qu'un seul paramètre (nom du module), ce qui signifie obtenir le module // Si le module n'existe pas, le cadre angulaire lancera une exception Var GetModule = Angular.Module ("Mymodule"); alert (createModule == getmodule);

Cette fonction peut créer de nouveaux modules ou obtenir des modules existants. Que ce soit à créer ou à obtenir, il se distingue par le nombre de paramètres.

angular.module (nom, [nécessite], [configfn]);

Nom: Type de chaîne, représentant le nom du module;

Exige: un tableau de chaînes, représentant la liste d'autres modules dont dépend le module. Si vous ne comptez pas sur d'autres modules, utilisez un tableau vide;

ConfigFn: utilisé pour effectuer des configurations sur ce module.

Maintenant, nous savons comment créer et obtenir des modules, alors quelles sont exactement les modules? Il n'y a qu'une seule phrase sur le guide officiel du développeur: vous pouvez considérer un module comme un conteneur pour les différentes parties de vos contrôleurs d'applications, services, filtres, directives, etc. Je ne le comprends pas très bien maintenant. Cela signifie à peu près qu'un module est une collection de certaines fonctions, comme un ensemble composé d'éléments enfants tels que les contrôleurs, les services, les filtres, les instructions, etc. Je ne peux pas l'expliquer maintenant, donc je vais le laisser derrière.

2. La relation entre $ fournit et module

Le service $ Fourn a un certain nombre de méthodes pour enregistrer les composants avec l'injecteur $. Beaucoup de ces fonctions sont également exposées sur le module angulaire.

Comme mentionné précédemment: le module et la fourniture sont utilisés pour enregistrer les services en injecteur. Vérifiez l'API officielle et vous pouvez voir que $ fournit fournit fournit (), constante (), value (), factory () et service () pour créer des services de diverses natures; Angular.Module fournit également ces 5 méthodes d'enregistrement de service. En fait, les fonctions des deux sont exactement les mêmes, qui sont utilisées pour enregistrer les services avec le conteneur DI dans l'injecteur.

Auto sous l'API officielle comprend $ fournir et $ injecteur, module implicite qui est automatiquement ajouté à chaque injecteur $. Littéralement, chaque injecteur a ces 2 services implicites. Mais dans la version 1.2.25, je pense qu'il n'y a aucun moyen d'obtenir le $ fournir dans l'injecteur. Je ne sais pas pourquoi c'est? D'une manière générale, vous n'avez pas besoin d'afficher ce service, utilisez simplement l'API fournie dans le module.

 var injector = angular.injector (); alert (injector.has ("$ fournis")); // falSesert (injector.has ("$ injecteur"); // true

3. Angular.Injector ()

Vous pouvez également obtenir l'injecteur à l'aide d'Angular.Injector (); mais il n'est pas lié au module. Cette approche n'a pas de sens, elle équivaut à créer un conteneur DI vide, et il n'y a pas de service, comment les autres peuvent-ils l'utiliser? La bonne façon est de spécifier les modules qui doivent être chargés lors de la création de l'injecteur.

 // Créer un module Mymodule et enregistrer le service var mymodule = angular.module ('mymodule', []); mymodule.service ('myservice', function () {this.my = 0;}); // Créer un module hermodule et enregistrer le service var hermodule = angular.module ('' Hermodule ', []); hermodule.service ('Herservice', function () {this.her = 1;}); // Chargez le service var injecteur = angular.injector (["mymodule", "hermodule"]); alert (injector.get ("myService").

Si plusieurs modules sont chargés, les services sous plusieurs modules peuvent être obtenus via l'injecteur retourné. Dans cet exemple, si seul Mymoudle est chargé, l'injecteur obtenu ne peut pas accéder aux services sous Hermoudle. Il est particulièrement important de noter ici: angular.injector () peut être appelé plusieurs fois, et chaque fois il renvoie l'objet injecteur nouvellement créé.

 var injector1 = angular.injector (["mymodule", "hermodule"]); var injector2 = angular.injector (["mymodule", "hermodule"]); alert (injector1 == injector2); // false

4. Trois façons de déclarer les dépendances en angulaire

Angular fournit trois façons d'obtenir des dépendances: inférence, annotation et méthodes en ligne.

 // Créer un module mymodule et enregistrer le service var mymodule = angular.module ('mymodule', []); mymodule.service ('myservice', function () {this.my = 0;}); // get injectorvar injector = angular.injector (["mymodule"]); // le premier inferenceinjector.invoke(function(myService){alert(myService.my);});// The second annotationfunction explicit(serviceA) {alert(serviceA.my);};explicit.$inject = ['myService'];injector.invoke(explicit);// The third type of inlineinject

Parmi eux, les méthodes d'annotation et de ligne ne nécessitent pas le nom du paramètre de fonction, qui est recommandé; La méthode d'inférence nécessite que le nom du paramètre et le nom du service soient cohérents. Si le code JS est compressé ou obscurci, il y aura des problèmes avec la fonction, et cette méthode n'est pas recommandée.

Ce qui précède est une compilation des informations injectées par la dépendance AngularJS. Nous continuerons d'ajouter des informations pertinentes à l'avenir. Merci pour votre soutien pour ce site Web!