EmberJS - Inyección de dependencia

Es un proceso de suministro de dependencias de un objeto a otro y utilizado por una aplicación Ember para declarar e instanciar los objetos y las clases de dependencia entre ellos. Las clases Ember.Application y Ember.ApplicationInstance juegan un papel importante en la implementación de la inyección de dependencia de Ember.

La clase Ember.Application declara y configura los objetos y se utiliza como 'registro' para las declaraciones de dependencia, mientras que la clase Ember.ApplicationInstance actúa como 'propietario' para los objetos instanciados. Sin embargo, la clase Ember.Application actúa como registro principal para una aplicación y cada clase Ember.ApplicationInstance sirve como registro.

Registros de fábrica

Una fábrica especifica una parte de la aplicación como ruta, plantilla, etc. y se registra con una clave en particular. Por ejemplo, la plantilla de índice se define con template: index y la ruta de la aplicación se define con route: application .

La clave de registro incluye dos partes; uno es el tipo de fábrica y el segundo es el nombre de la fábrica y ambos segmentos se dividen por dos puntos (:). Por ejemplo, puede inicializar la aplicación registrando la fábrica de registradores con el registrador: clave principal .

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

Inyecciones de fábrica

La fábrica se puede inyectar, una vez registrado. Por ejemplo, considere el siguiente código:

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

Todo el tipo de fábricas de rutas se representará con la propiedad mylog y el valor de esta propiedad vendrá de la fábrica mylog: logmsg . También puede inyectar en una fábrica específica usando la clave completa como:

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

Aquí solo la propiedad mylog se inyectará en la ruta del índice.

Búsquedas de instancias de fábrica

Puede utilizar el método de búsqueda de la instancia de fábrica en una instancia de aplicación para obtener una fábrica instanciada de la aplicación en ejecución. Utiliza una cadena para determinar la fábrica y devuelve un objeto.

Por ejemplo, puede llamar al método de búsqueda en una instancia de aplicación para obtener una fábrica instanciada como se muestra a continuación:

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

Ejemplo

El ejemplo que se muestra a continuación muestra el uso del registro de fábrica, la inyección y las búsquedas de instancias en la aplicación Ember. Cree un componente con el nombre dependency-inject que se definirá en app / components / . Abra el archivo dependency-inject.js y agregue el siguiente código:

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");
            });
         });
      }
   }
});

Ahora abra el archivo de plantilla de componente app / templates / components / dependency-inject.hbs e ingrese el siguiente código:

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

Abra el archivo application.hbs y agregue la siguiente línea de código:

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

Necesitamos crear un inicializador para configurar una aplicación usando el siguiente comando:

ember generate initializer init

Abra el archivo init.js que se crea en app / initializers / y agregue el siguiente código:

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
};

Cree un servicio que pueda estar disponible en las diferentes partes de la aplicación. Utilice el siguiente comando para crear el servicio:

ember generate service message

Ahora abra el archivo de servicio message.js que se crea en app / services / con el siguiente código:

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!!!";
   }
});

A continuación, cree un inicializador que configure la aplicación a medida que se inicia. El inicializador se puede crear usando el siguiente comando:

ember generate initializer logger

Abra el archivo inicializador logger.js que se crea en app / initializers / con el siguiente código:

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
};

A continuación, cree el inicializador de instancia para una aplicación mediante el siguiente comando:

ember generate instance-initializer logger

Abra el archivo inicializador logger.js que se crea en app / instance-initializers / con el siguiente código:

//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
};

Salida

Ejecute el servidor ember; recibirá el siguiente resultado:

A continuación, haga clic en el botón Haga clic aquí , se mostrará el texto de la página de servicio como se muestra en la captura de pantalla a continuación:

Ahora vaya a la consola y verifique los mensajes de registro que se muestran desde los inicializadores de la instancia después de que el texto se muestra como en la captura de pantalla anterior:

A continuación, haga clic en el botón Programar tareas para programar el trabajo en las colas que se procesan en el orden de prioridad:

↰ Previous page