Injetando dependência em aplicativos AngularJS

Quando você começa a aprender as primeiras características do AngularJS, pode se deparar com algo chamado Injeção de Dependência (DI): a premissa de que o AngularJS injeta dependências sempre que um aplicativo precisa delas. Como desenvolvedor, nossa tarefa é apenas passar a dependência para o módulo e todo o resto será cuidado pelo AngularJS. Agora posso mostrar como tudo é feito de maneira fácil usando uma das melhores bibliotecas de componentes Angular do mercado –Ignite UI for Angular.

Para criar um controlador, passamos $scope objeto e outras dependências para a função do controlador do módulo. Por exemplo, para criar um ProductController, estamos passando $scope dependências de objeto e serviço de Calculadora. Isso reitera o conhecimento de que, como desenvolvedor, nosso trabalho é passar as dependências e o AngularJS as injetará sempre que o aplicativo precisar delas.

Do nosso ponto de vista, realmente não nos importamos com a forma como o AngularJS injeta dependências – não precisamos saber como funciona o processo de injeção para desenvolver aplicativos. No entanto, é melhor se conhecermos uma variedade de maneiras de passar dependências. No AngularJS, as dependências podem ser passadas de três maneiras possíveis. Eles são os seguintes:

1. Passando uma dependência como argumentos de função
2. Passando uma dependência como argumentos de matriz
3. Passando uma dependência usando o serviço $inject

Vamos explorar essas opções uma a uma.

Passando uma dependência como um argumento de função

Talvez você se encontre frequentemente passando uma dependência como um argumento de função, o que é perfeitamente normal. Por exemplo, passamos um objeto $scope para criar um controlador, conforme mostrado na listagem abaixo:

app.controller("ProductController", function ($scope) {
    $scope.message = "Hey I am passed as function argument"
});

Passar dependências como argumentos de função funciona bem até implantarmos o aplicativo na produção com uma versão reduzida do aplicativo. Normalmente, para melhorar o desempenho, minimizamos o aplicativo em produção, mas passar a dependência como um argumento de função é interrompido quando minimizamos o aplicativo.

Obviamente, em produção, para melhor desempenho, gostaríamos de implantar a versão reduzida do aplicativo, mas o aplicativo será interrompido porque o nome do parâmetro será alterado para um nome de alias mais curto. Para evitar essa interrupção na produção, devemos escolher outra opção.

Passando uma dependência como argumentos de matriz

Possivelmente, a maneira mais popular de passar uma dependência em um aplicativo AngularJS é passá-los como argumentos de matriz. Quando passamos uma dependência como um argumento de matriz, o aplicativo não é interrompido na produção quando minimizamos o aplicativo. Podemos fazer isso de duas maneiras possíveis:

1. Usando a função Named
2. Usando a função anônima embutida

Usando a função Named

Podemos passar dependências como Argumentos de Array com a função nomeada, conforme mostrado na listagem abaixo:

var app = angular.module('app', []);

function ProductController($scope) {
    $scope.greet = "Infragistics";
};
app.controller('ProductController', ['$scope', ProductController]);

Como você notará, estamos passando uma dependência $scope objeto na matriz junto com o nome da função do controlador. Mais de uma dependência pode ser passada, desde que sejam separadas por vírgula. Por exemplo, podemos passar $http serviço e o objeto $scope como dependências, conforme mostrado na listagem abaixo:

var app = angular.module('app', []);

function ProductController($scope,$http) {
    $scope.greet = $http.get("api.com");       
};
app.controller('ProductController', ['$scope','$http', ProductController]);

Como discutimos anteriormente, passar dependências como argumentos de matriz não interrompe o aplicativo quando minimizamos o aplicativo.

Usando a função anônima embutida

Pessoalmente, acho que usar uma função nomeada é muito mais conveniente do que usar uma função anônima embutida. Para mim, é fácil gerenciar a função do controlador nomeado. Se você preferir a função embutida, poderá passar dependências como argumentos de matriz exatamente da mesma forma que as passa em funções de controlador nomeadas. Podemos passar dependências em uma função embutida como argumentos de matriz, conforme mostrado na listagem abaixo:

var app = angular.module('app', []);

app.controller('ProductController', ['$scope', '$http', function ($scope,$http) {
    $scope.greet = "Foo is Great!"
}]);

Lembre-se de que as dependências injetadas como argumentos Array funcionam mesmo se minimizarmos o aplicativo.

Passando uma dependência usando o serviço $inject

Há mais uma maneira de injetar dependências no AngularJS: usando o serviço $inject. Ao fazer isso, injetamos manualmente as dependências. Podemos injetar $scope dependências de objetos usando o serviço $inject, conforme mostrado na listagem abaixo:

function ProductController($scope){
    $scope.greet = "Foo is Not Great!5";
}

ProductController.$inject = ['$scope'];

app.controller('ProductController', ProductController);

O uso do serviço $inject também não interrompe o aplicativo quando minimizamos o aplicativo para produção. Na maioria das vezes, encontraremos $inject serviços sendo usados para injetar dependências em testes de unidade do controlador.

Antes de terminarmos este artigo, vamos ver como podemos usar $inject para injetar um serviço no controlador em um aplicativo em tempo real. Criamos um serviço conforme mostrado na lista abaixo:

app.factory("Calculator", function () {
    return {
        add: function (a, b) {
            return a + b;
        }
    }
});

Precisamos usar um serviço de calculadora dentro do CalController. O CalController pode ser criado conforme mostrado na lista abaixo:

app.controller('CalController', CalController);
function CalController($scope, Calculator) {

    $scope.result = 0;
    $scope.add = function () {
        alert("hi22");
        $scope.result= Calculator.add($scope.num1, $scope.num2);
    }
};

Neste ponto, o aplicativo deve funcionar porque as dependências são passadas como argumentos de função. No entanto, o aplicativo será interrompido quando o minimizarmos. Então, vamos em frente e injetar as dependências usando o $inject conforme mostrado na listagem abaixo:

CalController.$inject = ['$scope', 'Calculator'];

Na exibição, o controlador pode ser usado conforme mostrado abaixo:

<div ng-controller="CalController">
    <input type="number" ng-model="num1" placeholder="Enter number 1" />
    <input type="number" ng-model="num2" placeholder="Enter number 2" />
    <button ng-click="add()">Add</button>
    {{result}}
</div>

E aí está – a maneira mais fácil de inserir dependências em aplicativos AngularJS.