Cum se implementează injecția de dependență în AngularJs



Acest artile vă va oferi o cunoaștere detaliată și cuprinzătoare despre cum să implementați injecția de dependență în AngularJs.

Injecția de dependență este un model de proiectare software care specifică modul în care componentele pun mâna pe dependențele lor. Componentelor li se acordă dependențele lor în loc să le codifice greu. Reutilizarea și mentenabilitatea pot fi realizate prin utilizarea injecției de dependență. Injecție de dependență supremă în se poate face prin următoarele componente:





Injecție de dependență de valoare

Un obiect simplu din AngularJs este cunoscut ca valoare. Poate fi un șir, un număr sau chiar un obiect JavaScript. Poate fi folosit pentru a transmite valori în fabrici, servicii sau controlere în timpul fazei de executare și configurare.

Exemplu:



// definiți un modul

var firstModule = angular.module ('firstModule', [])

// creați un obiect de valoare și transmiteți-i date



firstModule.value ('numberValue', 50)

firstModule.value ('stringValue', 'xyz')

firstModule.value ('objectValue', {val1: 456, val2: 'xyz'})

În acest exemplu, valorile sunt definite folosind funcția value (). Numele valorii este specificat de primul parametru, iar al doilea parametru specifică valoarea. Acest lucru permite fabricilor, serviciilor și controlorilor să facă referire la aceste valori după numele lor.

Injectarea unei valori

Putem injecta o valoare în funcția de control AngularJs adăugând un parametru cu același nume ca valoarea.

Exemplu:

var firstModule = angular.module ('firstModule', [])

firstModule.value ('numberValue', 18)

firstModule.controller („FirstController”, funcție ($ scope, numberValue) {

console.log (numberValue)

})

Injecție din fabrică

O funcție care creează valori este cunoscută sub numele de fabrică. O valoare la cerere este creată din fabrică, ori de câte ori un serviciu sau un controler are nevoie de o valoare injectată din fabrică. Odată ce valoarea este creată, aceasta este reutilizată pentru toate serviciile și controlorii.

Utilizează funcția din fabrică pentru a calcula și a returna valoarea.

Exemplu:

var firstModule = angular.module ('firstModule', [])

firstModule.factory ('firstFactory', function () {

returnează „o valoare”

})

firstModule.controller („FirstController”, funcție ($ scope, firstFactory) {

console.log (firstFactory)

})

Injectarea valorilor în fabrică

O valoare poate fi injectată în fabrică prin următoarea metodă:

var firstModule = angular.module ('firstModule', [])

firstModule.value ('numberValue', 29)

firstModule.controller („FirstController”, funcție ($ scope, numberValue) {

console.log (numberValue)

})

Trebuie remarcat faptul că valoareaprodus de funcția din fabrică este injectat, nu funcția din fabrică în sine. Să trecem mai departe cu acest articol despre injectarea dependenței în AngularJs.

Injecție de serviciu în AngularJs

Un obiect JavaScript unic care conține un set de funcții este cunoscut ca serviciu în AngularJs. Logica necesară pentru efectuarea serviciului este conținută în funcție. Serviciul poate fi creat utilizând funcția service () pe un modul.

Exemplu:

// definiți un modul

var firstApp = angular.module ('firstApp', [])

roluri și responsabilități de dezvoltator hadoop

...

// creați un serviciu care definește o metodă pătrat pentru a returna pătratul unui număr

firstApp.service („CalciService”, funcție (MathService) {

this.square = function (x) {

returnează MathService.multiply (x, x)

}

})

// injectați serviciul „CalciService” în controler

firstApp.controller („CalciController”, funcție ($ scope, CalciService,

defaultInput) {

$ scope.number = defaultInput

$ scope.result = CalciService.square ($ scope.number)

$ scope.square = function () {

$ scope.result = CalciService.square ($ scope.number)

}

})

Furnizor

Pentru a crea servicii interne sau fabrică în timpul fazei de configurare, folosim furnizorul. Furnizorul este o metodă specială din fabrică cu o funcție get () care este utilizată pentru a returna valoarea / serviciul / fabrica.

Exemplu:

// definiți un modul

var firstApp = angular.module ('firstApp', [])

...

// creați un serviciu folosind furnizorul care definește o metodă pătrată pentru a returna

pătratul unui număr.

firstApp.config (funcție ($ provide) {

$ provide.provider ('MathService', function () {

aceasta. $ get = function () {

var factory =

factory.multiply = funcție (x, y) {

returnează x * y

}

retur fabrica

}

})

})

Constant

Deoarece utilizatorul nu poate injecta valori în funcția module.config (), folosim constante. Constantele sunt folosite pentru a transmite valori în faza de configurare.

firstApp.constant („configParam”, „valoare constantă”)

Exemplu:

Directivele menționate mai sus pot fi utilizate în următorul mod:

Injecție de dependență

Exemplul AngularJS Squaring

Introduceți orice număr:

X2

Rezultat: {{result}}

var firstApp = angular.module ('firstApp', [])

firstApp.config (funcție ($ provide) {

$ provide.provider ('MathService', function () {

aceasta. $ get = function () {

var factory =

factory.multiply = funcție (x, y) {

returnează x * y

}

retur fabrica

}

})

})

firstApp.value ('defaultInput', 6)

firstApp.factory ('MathService', function () {

var factory =

factory.multiply = funcție (x, y) {

returnează x * y

}

retur fabrica

})

firstApp.service („CalciService”, funcție (MathService) {

this.square = function (x) {

returnează MathService.multiply (x, x)

}

})

firstApp.controller („CalciController”, funcție ($ scope, CalciService, defaultInput) {

$ scope.number = defaultInput

$ scope.result = CalciService.square ($ scope.number)

$ scope.square = function () {

$ scope.result = CalciService.square ($ scope.number)

}

})

IEȘIRE:

injectarea dependenței în angularjs

Cu aceasta, ajungem la sfârșitul acestui articol privind injecția de dependență în AngularJs. C uită-te la de Edureka, o companie de învățare online de încredere, cu o rețea de peste 250.000 de elevi mulțumiți răspândiți pe tot globul.

Ai o întrebare pentru noi? Vă rugăm să o menționați în secțiunea de comentarii a acestei injecții de dependență în AngularJs și vă vom răspunde.