16

Considerando a injeção de dependências no AngularJS, existem alguns modos de fazer. Os modos até onde eu sei são:

Forma 1:

angular
  .module('meuModulo', [])
  .controller('MeuController', function(dependencia)) {
    //...
  });

Forma 2:

angular
  .module('meuModulo', [])
  .controller('MeuController', ['dependencia', function(dependencia)) {
    //...
  }]);

Forma 3:

angular
  .module('meuModulo', [])
  .controller('MeuController', MeuController);

MeuController.$inject = ['dependencia'];

function MeuController(dependencia)) {
    //...
}

Eu usei como exemplo o controller mas dá pra utilizar para factory, directive, filter, etc.

Os meus questionamentos sobre isso são: Quais as reais diferenças entre as formas de injetar as dependências? Qual a indicação para cada caso? Tem outras formas de realizá-las?

2

3 Respostas 3

12
+50

A forma 2 e 3 considera a posição do argumento, e não o nome.

Na minificação do Javascript, por exemplo, uma vez que os nomes das variáveis são alterados, poderia causar erros na sua aplicação em Angular.

O AngularJs lê o valor do parâmetro e injeta a dependência magicamente. Como a minificação faria $scope se transformar em a, poderia causar um erro dizendo que a não foi injectado.

Ou seja, o uso de $inject ou do Array com os nomes dos argumentos tem esse objetivo: Você está falando para o Angular injetar pela posição do parâmetro, e não pelo nome.

Assim, seria possível fazer algo como:

angular.module('app').controller(['$scope', '$http', (a, b) {
    console.log(a); // Retorna a instância de `$scope`
}]);
1
  • É verdade, inclusive no fórum do Angular recomenda não usar a forma 1. Se usar o ASP.Net e fizer o bundle dos arquivos Javascript, usando a primeira forma pode gerar erro de referência. Commented 17/02/2017 às 12:47
9

Apenas uma resposta como alternativa, fornecendo um 4º método (que é o que eu uso), assim você tem mais alternativas.

A resposta do Wallace está perfeita, você deve ter em mente que se for executar minificação de código, é importante que você mantenha a ordem de injeção e dependências a mesma. Fazer isso manualmente pode ser trabalhoso e aumentar chances de erro.

É recomendado sempre utilizar a forma 2 ou 3. A diferença entre elas é apenas uma questão de preferência de código. Alguns preferem uma enquanto outros preferem a outra.


Se você usa grunt, pode usar este plugin que vai facilitar muito a sua vida.

Este então seria o 4º método, pois você não precisa se preocupar em adicionar a injeção, ele faz isso automaticamente. Com base no seu exemplo, você poderia escrever seu código assim:

/* @ngInject */
.controller('MeuController', function(dependencia) {
    //...
});

E ele seria compilado para:

.controller('MeuController', function(dependencia) {
    //...
});
MeuController.$inject = ['dependencia'];

Deste modo você não se preocupa com a ordem delas. Se seu projeto tiver 10 injeções e você precisar remover uma que está ali no meio, não precisaria alterar manualmente a ordem.

5

Forma 1 (Implicit Annotation):

É a maneira mais simples de lidar com as dependências e assume que as assinaturas dos parâmetros da função são nomes de dependências. No exemplo acima dependencia é um service que precisa ser injetado na função. Uma das vantagens deste método é o de não haver um array de nomes para manter os parâmetros da função sincronizados. Você pode reorganizar as dependências livremente. Entretando este método não irá funcionar com minificadores/ofuscados pelo fato dos parâmetros serem renomeados. Por conta dessas ressalvas é recomendado evitar essa maneira.

Forma 2 (Inline Array Annotation) :

Este é o método recomentado de acordo com a documentação do AngularJS. Assim passamos um array que consiste em uma lista de strings (os nomes das dependências) seguido pela função em si. Quando utilizado esse tipo de anotação, é necessário ter cuidado para manter os parâmetros e a declaração da função sincronizados.

Forma 3 ($inject Property Annotation):

É o método indicado pelo Angular Styleguide do John Papa (Um dos responsáveis pelo desenvolvimento do do AngularJS). Desta forma os minificadores ainda serão capazes de serem utilizados e injetar corretamente os services. A função precisa ter a anotação da propriedade $inject que é um array dos nomes dos serviços injetados. Neste cenário a ordem dos valores injetados deve ser igual à ordem dos parâmetros na função.


Referências:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .