Injeção de dependência é um padrão de design de software que especifica a maneira como os componentes controlam suas dependências. Os componentes recebem suas dependências em vez de serem codificados permanentemente. A reutilização e a manutenção podem ser alcançadas usando injeção de dependência. Injeção Suprema Dependência em pode ser feito pelos seguintes componentes:
- Injeção de dependência de valor
- Injeção de fábrica
- Injeção de serviço em AngularJs
- Fornecedor
- Constante
Injeção de dependência de valor
Um objeto simples em AngularJs é conhecido como valor. Pode ser uma string, um número ou até mesmo um objeto JavaScript. Ele pode ser usado para passar valores em fábricas, serviços ou controladores durante a fase de execução e configuração.
Exemplo:
// define um módulo
var firstModule = angular.module ('firstModule', [])
// cria um objeto de valor e passa dados para ele
firstModule.value ('numberValue', 50)
firstModule.value ('stringValue', 'xyz')
firstModule.value ('objectValue', {val1: 456, val2: 'xyz'})
Neste exemplo, os valores são definidos usando a função value (). O nome do valor é especificado pelo primeiro parâmetro e o segundo parâmetro especifica o valor. Isso permite que as fábricas, serviços e controladores façam referência a esses valores por seus próprios nomes.
Injetando um Valor
Podemos injetar um valor na função do controlador AngularJs adicionando um parâmetro com o mesmo nome do valor.
Exemplo:
var firstModule = angular.module ('firstModule', [])
firstModule.value ('numberValue', 18)
firstModule.controller ('FirstController', function ($ scope, numberValue) {
console.log (numberValue)
})
Injeção de fábrica
Uma função que cria valores é conhecida como fábrica. Um valor sob demanda é criado pela fábrica, sempre que um serviço ou controlador precisa de um valor injetado da fábrica. Depois que o valor é criado, ele é reutilizado para todos os serviços e controladores.
Ele usa a função de fábrica para calcular e retornar o valor.
Exemplo:
var firstModule = angular.module ('firstModule', [])
firstModule.factory ('firstFactory', function () {
retornar 'um valor'
})
firstModule.controller ('FirstController', function ($ scope, firstFactory) {
console.log (firstFactory)
})
Injetando valores na fábrica
Um valor pode ser injetado na fábrica pelo seguinte método:
var firstModule = angular.module ('firstModule', [])
firstModule.value ('numberValue', 29)
firstModule.controller ('FirstController', function ($ scope, numberValue) {
console.log (numberValue)
})
Deve-se observar que o valorproduzida pela função de fábrica é injetada, não a própria função de fábrica. Vamos prosseguir com este artigo sobre injeção de dependência em AngularJs.
Injeção de serviço em AngularJs
Um objeto JavaScript singleton que contém um conjunto de funções é conhecido como serviço em AngularJs. A lógica necessária para que o serviço seja executado está contida na função. O serviço pode ser criado usando a função service () em um módulo.
Exemplo:
como reverter string em python
// define um módulo
var firstApp = angular.module ('firstApp', [])
...
// cria um serviço que define um método quadrado para devolver o quadrado de um número
firstApp.service ('CalciService', function (MathService) {
this.square = function (x) {
retornar MathService.multiply (x, x)
}
})
// injete o serviço 'CalciService' no controlador
firstApp.controller ('CalciController', function ($ scope, CalciService,
defaultInput) {
$ scope.number = defaultInput
$ scope.result = CalciService.square ($ scope.number)
$ scope.square = function () {
$ scope.result = CalciService.square ($ scope.number)
}
})
Fornecedor
Para criar internamente serviços ou fábrica durante a fase de configuração, usamos Provider. Provider é um método de fábrica especial com uma função get () que é usada para retornar o valor / serviço / fábrica.
Exemplo:
// define um módulo
var firstApp = angular.module ('firstApp', [])
...
// cria um provedor de uso de serviço que define um quadrado de método para retornar o
quadrado de um número.
firstApp.config (function ($ fornecer) {
$ supply.provider ('MathService', function () {
isto. $ get = function () {
var factory =
factory.multiply = function (x, y) {
retornar x * y
}
devolver a fábrica
}
})
})
Constante
Como o usuário não pode injetar valores na função module.config (), usamos constantes. As constantes são usadas para passar valores na fase de configuração.
firstApp.constant (“configParam”, “valor constante”)
por que eu deveria aprender sql
Exemplo:
As diretivas mencionadas acima podem ser usadas da seguinte maneira:
Injeção de dependência
Exemplo de quadratura AngularJS
Insira qualquer número:
X2
Resultado: {{result}}
var firstApp = angular.module ('firstApp', [])
firstApp.config (function ($ fornecer) {
$ supply.provider ('MathService', function () {
isto. $ get = function () {
var factory =
factory.multiply = function (x, y) {
retornar x * y
}
devolver a fábrica
}
})
})
firstApp.value ('defaultInput', 6)
firstApp.factory ('MathService', function () {
var factory =
factory.multiply = function (x, y) {
retornar x * y
}
devolver a fábrica
})
firstApp.service ('CalciService', function (MathService) {
this.square = function (x) {
retornar MathService.multiply (x, x)
}
})
firstApp.controller ('CalciController', function ($ scope, CalciService, defaultInput) {
$ scope.number = defaultInput
$ scope.result = CalciService.square ($ scope.number)
$ scope.square = function () {
$ scope.result = CalciService.square ($ scope.number)
}
})
RESULTADO:
Com isso, chegamos ao fim deste artigo sobre injeção de dependência em AngularJs. C diabos o pela Edureka, uma empresa de aprendizagem online confiável com uma rede de mais de 250.000 alunos satisfeitos espalhados por todo o mundo.
Tem alguma questão para nós? Mencione isso na seção de comentários desta injeção de dependência em AngularJs e entraremos em contato com você.