Injeção de dependência em AngularJS com exemplo

Índice:

Anonim

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

Injeção de dependência é um padrão de design de software que implementa inversão de controle para resolver dependências.

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

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

O diagrama acima mostra um exemplo simples de um ritual diário em programação de banco de dados.

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

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

Neste tutorial, você aprenderá-

  • Qual componente pode ser injetado como dependência no AngularJS
  • Exemplo de injeção de dependência
    • Componente de valor
    • Serviço

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 de construtor".

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 no AngularJS para obter dados de um banco de dados MySQL ou MS SQL Server por meio de um aplicativo da web PHP.

O serviço $ http é normalmente definido de dentro do controlador da seguinte maneira.

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

Agora, quando o serviço $ http é definido no controlador como 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 nosso "controlador" agora depende do "serviço $ http", um objeto deste serviço precisa ser disponibilizado para nosso controlador.
  2. Se o AngularJS descobrir que o serviço $ http não está instanciado, o AngularJS usará a função 'fábrica' para construir um objeto $ http.
  3. O injetor no Angular.JS então fornece uma instância do serviço $ http ao nosso controlador para processamento posterior.

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

Exemplo de injeção de dependência

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

  1. Um é por meio 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 se baseia no fato de criar um objeto JavaScript simples e passá-lo ao controlador para processamento posterior.

Isso é implementado usando as duas etapas abaixo

Etapa 1) Crie um objeto JavaScript usando o componente de valor e anexe-o ao seu módulo AngularJS.JS principal.

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

Etapa 2) Acesse o objeto JavaScript a partir do controlador Angular.JS

Event Registration


Guru99 Global Event

{{ID}}

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

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

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

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

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

  1.  $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.

  1. {{EU IA}}

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 como abaixo

2) Serviço

Serviço é definido como um objeto JavaScript singleton que consiste em um conjunto de funções que você deseja expor e injetar em 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 chamadas de 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 adiciona dois números.

Event Registration

Guru99 Global Event




Result: {{result}}

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 de nosso módulo principal AngularJS JS.

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

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

  1.  return a+b;

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

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

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

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

Agora estamos acessando a função 'Addition' que é 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 de nosso controlador.

Resumo:

  • A 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ê tivesse 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 de AngularJS pode ser usado para injetar objetos JavaScript simples em seu controlador.
  • 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.