EmberJS - Dependency Injection

È un processo di fornitura delle dipendenze di un oggetto a un altro e utilizzato da un'applicazione Ember per dichiarare e istanziare gli oggetti e le classi di dipendenza tra di loro. Le classi Ember.Application e Ember.ApplicationInstance svolgono un ruolo importante nell'implementazione di Ember's Dependency Injection.

La classe Ember.Application dichiara e configura gli oggetti e viene utilizzata come "registro" per le dichiarazioni di dipendenza, dove la classe Ember.ApplicationInstance funge da "proprietario" per gli oggetti istanziati. Tuttavia, la classe Ember.Application funge da registro principale per un'applicazione e ogni classe Ember.ApplicationInstance funge da registro.

Registrazioni di fabbrica

Una factory specifica una parte dell'applicazione come route, template, ecc. Ed è registrata con una chiave particolare. Ad esempio, il modello di indice è definito con template: index e il percorso dell'applicazione è definito con route: application .

La chiave di registrazione comprende due parti; uno è il tipo di fabbrica e il secondo è il nome della fabbrica ed entrambi i segmenti sono divisi da due punti (:). Ad esempio, è possibile inizializzare l'applicazione registrando la fabbrica Logger con logger: chiave principale .

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

Iniezioni di fabbrica

La fabbrica può essere iniettata, una volta registrata. Ad esempio, considera il seguente codice:

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

Tutti i tipi di factory di route verranno rappresentati con la proprietà mylog e il valore per questa proprietà verrà dalla factory mylog: logmsg . Puoi anche iniettare su una fabbrica specifica utilizzando la chiave completa come:

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

Qui solo la proprietà mylog verrà iniettata sulla route dell'indice.

Ricerche di istanze di fabbrica

È possibile utilizzare il metodo di ricerca dell'istanza di fabbrica su un'istanza dell'applicazione per ottenere una fabbrica istanziata dall'applicazione in esecuzione. Usa una stringa per determinare la fabbrica e restituisce un oggetto.

Ad esempio, puoi chiamare il metodo di ricerca su un'istanza dell'applicazione per recuperare una factory istanziata come mostrato di seguito:

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

Esempio

L'esempio riportato di seguito mostra l'uso della registrazione di fabbrica, dell'iniezione e delle ricerche di istanze nell'applicazione Ember. Crea un componente con il nome dependency-inject che verrà definito in app / components / . Apri il file dependency-inject.js e aggiungi il codice seguente:

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

Ora apri il file modello del componente app / templates / components / dependency-inject.hbs e inserisci il seguente codice:

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

Apri il file application.hbs e aggiungi la seguente riga di codice:

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

Dobbiamo creare un inizializzatore per configurare un'applicazione utilizzando il seguente comando:

ember generate initializer init

Apri il file init.js che viene creato in app / initializers / e aggiungi il seguente codice:

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

Creare un servizio che possa essere reso disponibile nelle diverse parti dell'applicazione. Utilizzare il seguente comando per creare il servizio:

ember generate service message

Ora apri il file di servizio message.js che viene creato in app / services / con il seguente codice:

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

Successivamente, crea un inizializzatore che configura l'applicazione all'avvio. L'inizializzatore può essere creato utilizzando il seguente comando:

ember generate initializer logger

Apri il file di inizializzazione logger.js che viene creato in app / inizializzatori / con il seguente codice:

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

Successivamente, crea l'inizializzatore di istanza per un'applicazione utilizzando il seguente comando:

ember generate instance-initializer logger

Apri il file di inizializzazione logger.js che viene creato in app / instance-initializers / con il seguente codice:

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

Produzione

Esegui il server ember; riceverai il seguente output -

Quindi, fai clic sul pulsante Fai clic qui , verrà visualizzato il testo dalla pagina del servizio come mostrato nello screenshot qui sotto -

Ora vai alla console e controlla i messaggi di log che vengono visualizzati dagli inizializzatori dell'istanza dopo che il testo è stato visualizzato come nello screenshot qui sopra -

Quindi, fare clic sul pulsante di pianificazione delle attività per pianificare il lavoro sulle code che vengono elaborate nell'ordine di priorità -

↰ Previous page