EmberJS - injeção de dependência

É um processo de fornecer dependências de um objeto a outro e usado por um aplicativo Ember para declarar e instanciar os objetos e classes de dependência entre eles. Os Ember.Application e Ember.ApplicationInstance aulas desempenhar um papel importante na implementação Dependency Injection do Ember.

A classe Ember.Application declara e configura os objetos e é usada como 'registro' para declarações de dependência, onde a classe Ember.ApplicationInstance atua como 'proprietário' para objetos instanciados. No entanto, a classe Ember.Application atua como registro primário para um aplicativo e cada classe Ember.ApplicationInstance serve como registro.

Registros de fábrica

Uma fábrica especifica uma parte do aplicativo, como rota, modelo, etc. e é registrada com uma chave específica. Por exemplo, o modelo de índice é definido com modelo: índice e a rota do aplicativo é definida com rota: aplicativo .

A chave de registro inclui duas partes; um é o tipo de fábrica e o segundo é o nome da fábrica e ambos os segmentos são divididos por dois pontos (:). Por exemplo, você pode inicializar o aplicativo registrando a fábrica do Logger com a chave logger: principal .

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

Injeções de fábrica

A fábrica pode ser injetada, uma vez cadastrada. Por exemplo, considere o seguinte código -

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

Todos os tipos de fábricas de rota serão representados com a propriedade mylog e o valor para esta propriedade virá da fábrica mylog: logmsg . Você também pode injetar em uma fábrica específica usando a chave completa como -

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

Aqui, apenas a propriedade mylog será injetada na rota do índice.

Pesquisas de instância de fábrica

Você pode usar o método de pesquisa da instância de fábrica em uma instância de aplicativo para obter uma fábrica instanciada do aplicativo em execução. Ele usa uma string para determinar a fábrica e retorna um objeto.

Por exemplo, você pode chamar o método lookup em uma instância do aplicativo para buscar uma fábrica instanciada, conforme mostrado abaixo -

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

Exemplo

O exemplo a seguir mostra o uso de registro de fábrica, injeção e pesquisas de instância no aplicativo Ember. Crie um componente com o nome de injeção de dependência que será definido em app / components / . Abra o arquivo dependency-inject.js e adicione o seguinte 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");
            });
         });
      }
   }
});

Agora abra o arquivo de modelo de componente app / templates / components / dependency-inject.hbs e insira o seguinte código -

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

Abra o arquivo application.hbs e adicione a seguinte linha de código -

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

Precisamos criar um inicializador para configurar um aplicativo usando o seguinte comando -

ember generate initializer init

Abra o arquivo init.js que é criado em app / initializers / e adicione o seguinte 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
};

Crie um serviço que pode ser disponibilizado nas diferentes partes da aplicação. Use o seguinte comando para criar o serviço -

ember generate service message

Agora abra o arquivo de serviço message.js que é criado em app / services / com o seguinte 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!!!";
   }
});

Em seguida, crie um inicializador que configure o aplicativo durante a inicialização. O inicializador pode ser criado usando o seguinte comando -

ember generate initializer logger

Abra o arquivo inicializador logger.js que é criado em app / initializers / com o seguinte 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
};

Em seguida, crie o inicializador de instância para um aplicativo usando o seguinte comando -

ember generate instance-initializer logger

Abra o arquivo inicializador logger.js que é criado em app / instance-initializers / com o seguinte 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
};

Resultado

Execute o servidor ember; você receberá a seguinte saída -

Em seguida, clique no botão Clique aqui , ele exibirá o texto da página de serviço conforme mostrado na imagem abaixo -

Agora vá para o console e verifique se há mensagens de log que são exibidas a partir dos inicializadores de instância depois que o texto é exibido como na imagem anterior -

Em seguida, clique no botão Agendar Tarefas para agendar o trabalho nas filas que são processadas na ordem de prioridade -

↰ Previous page