Paano Maipatupad ang Dependency Injection sa AngularJs



Ang artile na ito ay magbibigay sa iyo ng isang detalyado at komprehensibong kaalaman tungkol sa kung paano ipatupad ang Dependency Injection sa AngularJs.

Ang dependency injection ay isang pattern ng disenyo ng software na tumutukoy sa paraan kung saan hinahawakan ng mga bahagi ang kanilang mga dependency. Ang mga sangkap ay binibigyan ng kanilang mga dependency sa halip na mahirap i-coding ang mga ito. Ang kakayahang magamit muli at mapanatili ang maaaring makamit sa pamamagitan ng paggamit ng dependency injection. Kataas-taasang Depensyon na Iniksyon sa maaaring magawa ng mga sumusunod na sangkap:





Value Inpendensiyang Iniksyon

Ang isang simpleng bagay sa AngularJs ay kilala bilang isang halaga. Maaari itong maging isang string, isang numero o kahit isang object ng JavaScript. Maaari itong magamit upang maipasa ang mga halaga sa mga pabrika, serbisyo o tagakontrol sa takbo ng run at config.

Halimbawa:



// tukuyin ang isang module

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

// lumikha ng isang bagay na halaga at ipasa ang data dito



firstModule.value ('numberValue', 50)

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

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

Sa halimbawang ito, ang mga halaga ay tinukoy gamit ang halaga () na pagpapaandar. Ang pangalan ng halaga ay tinukoy ng unang parameter, at ang pangalawang parameter ay tumutukoy sa halaga. Pinapayagan nito ang mga pabrika, serbisyo, at mga tagakontrol na sanggunian ang mga halagang ito sa pamamagitan ng kanilang pangalan mismo.

Pag-iiniksyon ng isang Halaga

Maaari kaming mag-iniksyon ng isang halaga sa pagpapaandar ng AngularJs controller sa pamamagitan ng pagdaragdag ng isang parameter na may parehong pangalan bilang halaga.

Halimbawa:

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

firstModule.value ('numberValue', 18)

firstModule.controller ('FirstController', pagpapaandar ($ saklaw, numeroValue) {

console.log (numberValue)

})

Pag-iniksyon sa Pabrika

Ang isang pagpapaandar na lumilikha ng mga halaga ay kilala bilang isang pabrika. Ang isang halaga sa demand ay nilikha ng pabrika, tuwing ang isang serbisyo o tagakontrol ay nangangailangan ng isang halaga na na-injected mula sa pabrika. Kapag nalikha ang halaga, muling ginagamit ito para sa lahat ng mga serbisyo at tagakontrol.

Ginagawa nitong paggamit ang pagpapaandar ng pabrika upang makalkula at ibalik ang halaga.

Halimbawa:

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

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

ibalik ang 'isang halaga'

})

firstModule.controller ('FirstController', pagpapaandar ($ saklaw, firstFactory) {

console.log (firstFactory)

})

Pag-iniksyon ng mga halaga sa pabrika

Ang isang halaga ay maaaring ipasok sa pabrika sa pamamagitan ng sumusunod na pamamaraan:

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

firstModule.value ('numberValue', 29)

firstModule.controller ('FirstController', pagpapaandar ($ saklaw, numeroValue) {

console.log (numberValue)

})

Dapat pansinin na ang halagana ginawa ng pag-andar ng pabrika ay na-injected, hindi ang pagpapaandar ng pabrika mismo. Magpatuloy tayo sa artikulong ito ng Dependency Injection sa AngularJs.

Serbisyo sa Iniksyon sa AngularJs

Ang isang singleton na object ng JavaScript na naglalaman ng isang hanay ng mga pag-andar ay kilala bilang isang serbisyo sa AngularJs. Ang lohika na kinakailangan para sa serbisyo upang maisakatuparan ay nakapaloob sa pagpapaandar. Ang serbisyo ay maaaring malikha sa pamamagitan ng paggamit ng serbisyo () na pagpapaandar sa isang module.

Halimbawa:

// tukuyin ang isang module

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

mababaw vs malalim na kopya ng java

...

// lumikha ng isang serbisyo na tumutukoy sa isang pamamaraan parisukat upang ibalik ang parisukat ng isang numero

firstApp.service ('CalciService', pagpapaandar (MathService) {

this.square = function (x) {

ibalik ang MathService.multiply (x, x)

}

})

// i-injection ang serbisyong 'CalciService' sa controller

firstApp.controller ('CalciController', pagpapaandar ($ saklaw, CalciService,

defaultInput) {

$ saklaw.number = defaultInput

$ saklaw.result = CalciService.square ($ saklaw.bilang)

$ saklaw.square = pagpapaandar () {

$ saklaw.result = CalciService.square ($ saklaw.bilang)

}

})

Tagabigay

Upang panloob na lumikha ng mga serbisyo o pabrika sa yugto ng config, ginagamit namin ang Provider. Ang tagapagbigay ay isang espesyal na pamamaraan ng pabrika na may isang get () function na ginagamit upang ibalik ang halaga / serbisyo / pabrika.

Halimbawa:

// tukuyin ang isang module

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

...

// lumikha ng isang serbisyo gamit ang provider na tumutukoy sa isang parisukat na pamamaraan upang ibalik ang

parisukat ng isang numero.

firstApp.config (pagpapaandar ($ magbigay) {

$ magbigay.provider ('MathService', pagpapaandar () {

ito. $ get = function () {

pabrika ng var =

factory.multiply = pagpapaandar (x, y) {

ibalik x * y

}

bumalik pabrika

}

})

})

Patuloy

Dahil hindi maaaring mag-iniksyon ang gumagamit ng mga halaga sa pagpapaandar ng module.config (), gumagamit kami ng mga pare-pareho. Ginagamit ang mga pare-pareho upang ipasa ang mga halaga sa phase ng config.

firstApp.constant ('configParam', 'pare-pareho ang halaga')

Halimbawa:

Ang mga direktibong nabanggit sa itaas ay maaaring gamitin sa sumusunod na paraan:

ano ang vector sa java

Depensyon ng Iniksyon

Halimbawa ng AngularJS Squaring

Ipasok ang anumang numero:

X2

Resulta: {{resulta}}

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

firstApp.config (pagpapaandar ($ magbigay) {

$ magbigay.provider ('MathService', pagpapaandar () {

ito. $ get = function () {

pabrika ng var =

factory.multiply = pagpapaandar (x, y) {

ibalik x * y

}

bumalik pabrika

}

})

})

firstApp.value ('defaultInput', 6)

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

pabrika ng var =

factory.multiply = pagpapaandar (x, y) {

ibalik x * y

}

bumalik pabrika

})

firstApp.service ('CalciService', pagpapaandar (MathService) {

this.square = function (x) {

ibalik ang MathService.multiply (x, x)

}

})

naka-link na listahan sa c programa

firstApp.controller ('CalciController', pagpapaandar ($ saklaw, CalciService, defaultInput) {

$ saklaw.number = defaultInput

$ saklaw.result = CalciService.square ($ saklaw.bilang)

$ saklaw.square = pagpapaandar () {

$ saklaw.result = CalciService.square ($ saklaw.bilang)

}

})

OUTPUT:

dependency injection sa angularjs

Sa pamamagitan nito, natapos namin ang artikulong Dependency na ito sa AngularJs na artikulo. C ano ba ang ni Edureka, isang pinagkakatiwalaang kumpanya sa pag-aaral sa online na may isang network na higit sa 250,000 nasiyahan na mga nag-aaral na kumalat sa buong mundo.

May tanong ba sa amin? Mangyaring banggitin ito sa seksyon ng mga komento ng Dependency Injection na ito sa AngularJs at babalikan ka namin.