EmberJS - Injection de dépendances

Il s'agit d'un processus de fourniture de dépendances d'un objet à un autre et utilisé par une application Ember pour déclarer et instancier les objets et les classes de dépendances entre eux. Les classes Ember.Application et Ember.ApplicationInstance jouent un rôle important dans l'implémentation de l'injection de dépendances Ember.

La classe Ember.Application déclare et configure les objets et est utilisée comme «registre» pour les déclarations de dépendance, alors que la classe Ember.ApplicationInstance agit comme «propriétaire» pour les objets instanciés. Cependant, la classe Ember.Application agit comme registre principal pour une application et chaque classe Ember.ApplicationInstance sert de registre.

Enregistrements d'usine

Une fabrique spécifie une partie d'application telle qu'une route, un modèle, etc. et est enregistrée avec une clé particulière. Par exemple, le modèle d'index est défini avec template: l'index et la route d'application sont définis avec route: application .

La clé d'enregistrement comprend deux parties; l'un est le type d'usine et le second est le nom de l'usine et les deux segments sont séparés par deux-points (:). Par exemple, vous pouvez initialiser l'application en enregistrant la fabrique Logger avec la clé logger: main .

application.register('mylog:logmsg', MyLogger);

Injections d'usine

L'usine peut être injectée, une fois enregistrée. Par exemple, considérez le code suivant -

application.inject('route', 'mylog', 'mylog:logmsg');

Tous les types d'usines d'itinéraire seront représentés avec la propriété mylog et la valeur de cette propriété proviendra de l' usine mylog: logmsg . Vous pouvez également injecter sur une usine spécifique en utilisant la touche complète comme -

application.inject('route:index', 'mylog', 'mylog:logmsg');

Ici, seule la propriété mylog sera injectée sur la route d'index.

Recherches d'instances d'usine

Vous pouvez utiliser la méthode de recherche de l'instance de fabrique sur une instance d'application pour obtenir une fabrique instanciée à partir de l'application en cours d'exécution. Il utilise une chaîne pour déterminer la fabrique et renvoie un objet.

Par exemple, vous pouvez appeler la méthode de recherche sur une instance d'application pour récupérer une fabrique instanciée comme indiqué ci-dessous -

applicationInstance.lookup('factory-type:factory-name');

Exemple

L'exemple ci-dessous montre l'utilisation de l'enregistrement d'usine, de l'injection et des recherches d'instance dans l'application Ember. Créez un composant avec le nom dependency-inject qui sera défini sous app / components / . Ouvrez le fichier dependency-inject.js et ajoutez le code suivant -

import Ember from 'ember';
var inject = Ember.inject;

export default Ember.Component.extend ({
   //load the service in the file /app/services/message.js
   message: inject.service(),
   message: 'Click the above button to change text!!!',
   actions: {
      pressMe: function () {
         
         //after clicking button, above message will get display at console
         var testText = this.get('start').thisistest();
         this.set('message', testText);
         //after clicking button, it will enter in the component page
         this.get('logger').log('Entered in component!');
      },
      
      scheduleTasks: function () {
         //scheduling work on specific queues like "sync" or "afterRender" 
         Ember.run.schedule('afterRender', this, function () {
            console.log("CUSTOM: I'm in afterRender");
            Ember.run.schedule('sync', this, function () {
               console.log("CUSTOM: I'm back in sync");
            });
         });
      }
   }
});

Ouvrez maintenant le fichier de modèle de composant app / templates / components / dependency-inject.hbs et entrez le code suivant -

<button {{action "pressMe"}}>Click Here</button><br> 
<h2>{{message}}</h2>
<button {{action "scheduleTasks"}}>Schedule Tasks!</button>
{{yield}}

Ouvrez le fichier application.hbs et ajoutez la ligne de code suivante -

{{dependency-inject}}
{{outlet}}

Nous devons créer un initialiseur pour configurer une application en utilisant la commande suivante -

ember generate initializer init

Ouvrez le fichier init.js qui est créé sous app / initializers / et ajoutez le code suivant -

export function initialize(app) {
   //injecting the 'start' property into the component
   app.inject('component', 'start', 'service:message');
}

export default {
   //initializer name
   name: 'init',
   initialize: initialize
};

Créez un service qui peut être mis à disposition dans les différentes parties de l'application. Utilisez la commande suivante pour créer le service -

ember generate service message

Ouvrez maintenant le fichier de service message.js qui est créé sous app / services / avec le code suivant -

import Ember from 'ember';

export default Ember.Service.extend ({
   isAuthenticated: true,
   //after clicking the button, 'thisistest()' triggers and display the below text
   thisistest: function () {
      return "Welcome to Tutorialspoint!!!";
   }
});

Ensuite, créez un initialiseur qui configure l'application lors de son démarrage. L'initialiseur peut être créé à l'aide de la commande suivante -

ember generate initializer logger

Ouvrez le fichier d'initialisation logger.js qui est créé sous app / initializers / avec le code suivant -

import Ember from 'ember';

//it is an application initializer that run as your application boots
export function initialize(application) {
   var Logger = Ember.Object.extend({
      log(m) {
         console.log(m);
      }
   });
   
   //Registration key includes two parts; one is factory type and second is 
      name of factory
   application.register('logger:main', Logger);
   
   //Once a factory is registered, it can be injected by using 'application.inject' 
      along with 'logger' property 
   //and value for this property will come from 'logger:main'factory
   application.inject('component:dependency-inject', 'logger', 'logger:main');
}

export default {
   name: 'logger',
   initialize: initialize
};

Ensuite, créez l'initialiseur d'instance pour une application à l'aide de la commande suivante -

ember generate instance-initializer logger

Ouvrez le fichier d'initialisation logger.js qui est créé sous app / instance-initializers / avec le code suivant -

//Application instance initializers run as an application instance is loaded
export function initialize(applicationInstance) {
   var logger = applicationInstance.lookup('logger:main');
   
   //it indicates that instance has booted at console log
   logger.log('Hello...This message is from an instance-initializer!');
}

export default {
   //it is an instance initializer name
   name: 'logger',
   initialize: initialize
};

Production

Exécutez le serveur de braises; vous recevrez la sortie suivante -

Ensuite, cliquez sur le bouton Cliquez ici , il affichera le texte de la page de service comme indiqué dans la capture d'écran ci-dessous -

Maintenant, allez dans la console et vérifiez les messages de journal qui sont affichés à partir des initialiseurs d'instance une fois le texte affiché comme dans la capture d'écran ci-dessus -

Ensuite, cliquez sur le bouton de planification des tâches pour planifier le travail sur les files d'attente qui sont traitées dans l'ordre de priorité -

↰ Previous page