Componentes de Injeção de Dependência do AngularJS

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.

⚠️ Nota sobre a versão: O suporte ao AngularJS terminou em janeiro de 2022., sem patches de segurança. O Angular moderno injeta através de provedores @Injectable e injetar()O código abaixo permanece histórico.

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, vamos analisar mais detalhadamente a injeção de dependência e como isso é feito em AngularJS.

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

Em AngularJS, as dependências são injetadas usando um "método de fábrica injetável" ou uma "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.

Um AngularJS módulo Registra objetos injetáveis ​​por meio de cinco receitas.

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;

1. 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.
2. 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.
3. O injetor dentro do AngularJS fornece então uma instância do serviço $http ao nosso controlador para processamento posterior.

Formulários de anotação: Anotação implícita O compilador lê os nomes dos parâmetros, então a minificação o quebra. A notação de array inline e o `$inject` sobrevivem; o `ng-strict-di` no `ng-app` rejeita anotações implícitas.

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

1. Uma é através do “Componente de Valor”
2. 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 na criação de um simples JavaScript objeto e passando-o para o controlador para processamento posterior.

Isso é implementado usando as duas etapas abaixo

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

O componente de valor recebe dois parâmetros: um é a chave e o outro é o valor. JavaObjeto de script que é criado.

Passo 2) Acessar o JavaObjeto de script do Controlador AngularJS

<! 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>

O código acima executa os passos abaixo.

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

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

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

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

3.  $scope.ID =TutorialID;

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

4. {{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 no AngularJS 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

1.  mainApp.service('AdditionService', function()

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

2.  this.ADDITION = function(a,b)

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

3.  return a+b;

   Aqui estamos definindo o corpo da nossa função ADIÇÃO, que simplesmente soma os parâmetros e retorna o valor resultante.

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

   Esta é a etapa principal que envolve a injeção de dependência. Na definição do nosso controlador, agora estamos referenciando o nosso serviço 'AdditionService'. Quando o AngularJS encontrar essa referência, ele instanciará um objeto do tipo 'AdditionService'.

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

   Agora estamos acessando a função 'ADDITION', 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.

Perguntas Frequentes