Injeção de dependência AngularJS: quais componentes foram injetados

O que é injeção de dependência em AngularJS?

Injeção de dependência em AngularJS é um padrão de design de software que implementa inversão de controle para resolver dependências. Ele decide como os componentes mantêm suas dependências. Ele pode ser usado ao definir os componentes ou fornecer blocos de execução e configuração do módulo. Ele permite que você torne os componentes reutilizáveis, testáveis e passíveis de manutenção.

Inversão de controle: significa que os objetos não criam outros objetos dos quais dependem para realizar seu trabalho. Em vez disso, eles obtêm esses objetos de uma fonte externa. Isso forma a base da injeção de dependência AngularJS, em que se um objeto depende de outro; o objeto primário não assume a responsabilidade de criar o objeto dependente e depois usar seus métodos. Em vez disso, uma fonte externa (que em AngularJS é a própria estrutura AngularJS) cria o objeto dependente e o entrega ao objeto de origem para uso posterior.

Então, vamos primeiro entender o que é uma dependência.

O diagrama acima mostra um exemplo simples de injeção de dependência AngularJS de um ritual diário na programação de banco de dados.

A caixa 'Modelo' representa a “classe Modelo” que normalmente é criada para interagir com o banco de dados. Então agora o banco de dados é uma dependência para a “classe Model” funcionar.
Por injeção de dependência, criamos um serviço para pegar todas as informações do banco de dados e entrar na classe do modelo.

No restante deste tutorial, veremos mais sobre injeção de dependência e como isso é feito no AngularJS.

Qual componente pode ser injetado como dependência no AngularJS?

Em Angular.JS, as dependências são injetadas usando um “método de fábrica injetável” ou “função construtora”.

Esses componentes podem ser injetados com componentes de “serviço” e “valor” como dependências. Vimos isso em um tópico anterior com o serviço $http.

Já vimos que o serviço $http pode ser usado dentro do AngularJS para obter dados de um MySQL ou MS SQL Banco de dados do servidor por meio de um PHP aplicação web.

O serviço $http normalmente é definido no controlador da seguinte maneira.

sampleApp.controller ('AngularJSController', function ($scope, $http)

Agora, quando o serviço $http é definido no controlador conforme mostrado acima. Isso significa que o controlador agora depende do serviço $ http.

Portanto, quando o código acima for executado, o AngularJS executará as seguintes etapas;

Verifique se o “serviço $http” foi instanciado. Como o nosso “controlador” agora depende do “serviço $http”, um objeto deste serviço precisa ser disponibilizado ao nosso controlador.
Se o AngularJS descobrir que o serviço $http não está instanciado, o AngularJS usará a função 'factory' para construir um objeto $http.
O injetor dentro do Angular.JS fornece então uma instância do serviço $http ao nosso controlador para processamento adicional.

Agora que a dependência foi injetada em nosso controlador, podemos invocar as funções necessárias dentro do serviço $http para processamento adicional.

Exemplo de injeção de dependência

Neste exemplo, aprenderemos como usar injeção de dependência em AngularJS.

A injeção de dependência pode ser implementada de 2 maneiras

Uma é através do “Componente de Valor”
Outra é através de um “Serviço”

Vejamos a implementação de ambas as formas com mais detalhes.

1) Componente de valor

Este conceito baseia-se no facto de criar um simples JavaScript objeto e passá-lo ao controlador para processamento posterior.

Isso é implementado usando as duas etapas abaixo

Passo 1) Crie uma JavaCrie um objeto de script usando o componente de valor e anexe-o ao seu módulo AngularJS.JS principal.

O componente de valor assume dois parâmetros; uma é a chave e a outra é o valor do objeto javascript que é criado.

Passo 2) Acessar o JavaObjeto de script do Controlador Angular.JS

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>

</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="sampleApp">

<div ng-controller="AngularJSController">
    <h3> Guru99 Global Event</h3>
    {{ID}}
</div>
<script>

    var sampleApp = angular.module('sampleApp',[]);
    sampleApp.value("TutorialID", 5);
    sampleApp.controller('AngularJSController', function($scope,TutorialID) {
        $scope.ID =TutorialID;
    });

</script>
</body>
</html>

No exemplo de código acima, as etapas principais abaixo estão sendo executadas

```
sampleApp.value("TutorialID", 5);
```

A função de valor do módulo Angular.JS JS está sendo usada para criar um par chave-valor chamado “TutorialID” e o valor “5”.

sampleApp.controller('AngularJSController', function ($scope,TutorialID)

A variável TutorialID agora fica acessível ao controlador como um parâmetro de função.

```
 $scope.ID =TutorialID;
```

O valor de TutorialID que é 5, agora está sendo atribuído a outra variável chamada ID no objeto $scope. Isso está sendo feito para que o valor 5 possa ser passado do controlador para a visualização.

```
{{ID}}
```

O parâmetro ID está sendo exibido na visualização como uma expressão. Portanto, a saída de '5' será exibida na página.

Quando o código acima for executado, a saída será mostrada abaixo

2) Serviço

O serviço é definido como um singleton JavaObjeto de script que consiste em um conjunto de funções que você deseja expor e injetar no seu controlador.

Por exemplo, o “$http” é um serviço em Angular.JS que quando injetado em seus controladores fornece as funções necessárias de

(get(), query(), save(), remove(), delete()).

Essas funções podem então ser invocadas a partir do seu controlador de acordo.

Vejamos um exemplo simples de como você pode criar seu próprio serviço. Vamos criar um serviço de adição simples que soma dois números.

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>

</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<h3> Guru99 Global Event</h3>

<div ng-app = "mainApp" ng-controller = "DemoController">
    <p>Result: {{result}}</p>
</div>
<script>
    var mainApp = angular.module("mainApp", []);

    mainApp.service('AdditionService', function(){
        this.ADDITION = function(a,b) {
            return a+b;
        }
    });

    mainApp.controller('DemoController', function($scope, AdditionService) {

            $scope.result = AdditionService.ADDITION(5,6);
    });
</script>

</body>
</html>

No exemplo acima, as seguintes etapas são realizadas

 mainApp.service('AdditionService', function()

Aqui estamos criando um novo serviço chamado 'AdditionService' usando o parâmetro de serviço do nosso módulo AngularJS JS principal.

```
 this.Addition = function(a,b)
```

Aqui estamos criando uma nova função chamada Adição dentro do nosso serviço. Isso significa que quando AngularJS instanciar nosso AdditionService dentro de nosso controlador, poderemos acessar a função ‘Addition’. Nesta definição de função, estamos dizendo que esta função aceita dois parâmetros, a e b.

```
 return a+b;
```

Aqui estamos definindo o corpo da nossa função de adição que simplesmente adiciona os parâmetros e retorna o valor adicionado.

 mainApp.controller('DemoController', function($scope, AdditionService)

Esta é a etapa principal que envolve injeção de dependência. Na nossa definição de controlador, agora estamos nos referindo ao nosso serviço 'AdditionService'. Quando o AngularJS vir isso, ele instanciará um objeto do tipo 'AdditionService'.

 $scope.result = AdditionService.Addition(5,6);

Agora estamos acessando a função 'Adição' que está definida em nosso serviço e atribuindo-a ao objeto $scope do controlador.

Portanto, este é um exemplo simples de como podemos definir nosso serviço e injetar a funcionalidade desse serviço dentro do nosso controlador.

Resumo

Injeção de dependência, como o nome indica, é o processo de injeção de funcionalidade dependente em módulos em tempo de execução.
Usar injeção de dependência ajuda a ter um código mais reutilizável. Se você tiver uma funcionalidade comum usada em vários módulos de aplicativo, a melhor maneira é definir um serviço central com essa funcionalidade e, em seguida, injetar esse serviço como uma dependência em seus módulos de aplicativo.
O objeto de valor do AngularJS pode ser usado para injetar JavaObjetos de script em seu controlador usando $inject em AngularJS.
O módulo de serviço pode ser usado para definir seus serviços personalizados que podem ser reutilizados em vários módulos AngularJS.

Você pode gostar: