Jak implementovat Dependency Injection v AngularJs



Tento artil vám poskytne podrobné a komplexní znalosti o tom, jak implementovat Dependency Injection v AngularJs.

Dependency Injection je vzor návrhu softwaru, který určuje způsob, jakým se komponenty uchopí svých závislostí. Komponenty dostávají své závislosti namísto pevného kódování. Znovu použitelnost a udržovatelnost lze dosáhnout použitím injekce závislostí. Injekce nejvyšší závislosti v lze provést pomocí následujících komponent:





Injekce závislosti na hodnotě

Jednoduchý objekt v AngularJs je známý jako hodnota. Může to být řetězec, číslo nebo dokonce objekt JavaScriptu. Lze jej použít k předávání hodnot v továrnách, službách nebo řadičích během fáze běhu a konfigurace.

Příklad:



// definovat modul

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

MVC architektura v Javě s příkladem

// vytvoří hodnotový objekt a předá mu data



firstModule.value ('numberValue', 50)

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

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

V tomto příkladu jsou hodnoty definovány pomocí funkce value (). Název hodnoty je určen prvním parametrem a druhý parametr určuje hodnotu. To umožňuje továrnám, službám a řadičům odkazovat na tyto hodnoty vlastním jménem.

Vložení hodnoty

Můžeme vložit hodnotu do funkce ovladače AngularJs přidáním parametru se stejným názvem jako hodnota.

Příklad:

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

firstModule.value ('numberValue', 18)

firstModule.controller ('FirstController', function ($ scope, numberValue) {

console.log (numberValue)

})

Tovární injekce

Funkce, která vytváří hodnoty, se nazývá továrna. Hodnotu na vyžádání vytvoří továrna, kdykoli služba nebo řídicí jednotka potřebuje hodnotu vloženou z továrny. Jakmile je hodnota vytvořena, je znovu použita pro všechny služby a řadiče.

Využívá funkce továrny k výpočtu a vrácení hodnoty.

Příklad:

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

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

vrátit 'hodnotu'

})

firstModule.controller ('FirstController', function ($ scope, firstFactory) {

console.log (firstFactory)

})

Vkládání hodnot do továrny

Hodnotu lze do továrny vložit následující metodou:

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

firstModule.value ('numberValue', 29)

firstModule.controller ('FirstController', function ($ scope, numberValue) {

console.log (numberValue)

})

Je třeba poznamenat, že hodnotaje vytvořena tovární funkce, ale samotná tovární funkce. Pojďme s tímto článkem Dependency Injection v AngularJs.

Injekce služby v AngularJs

Jediný objekt JavaScript, který obsahuje sadu funkcí, se v AngularJs označuje jako služba. Logika nezbytná pro provedení služby je obsažena ve funkci. Službu lze vytvořit pomocí funkce service () na modulu.

Příklad:

// definovat modul

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

...

// vytvořit službu, která definuje metodu čtverec pro vrácení čtverce čísla

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

this.square = funkce (x) {

vrátit MathService.multiply (x, x)

}

})

// vložit službu 'CalciService' do řadiče

firstApp.controller ('CalciController', function ($ scope, CalciService,

defaultInput) {

$ scope.number = defaultInput

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

$ scope.square = funkce () {

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

}

})

Poskytovatel

K internímu vytváření služeb nebo továrny během fáze konfigurace využíváme Poskytovatele. Poskytovatel je speciální tovární metoda s funkcí get (), která se používá k vrácení hodnoty / služby / továrny.

Příklad:

// definovat modul

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

...

// vytvoření služby pomocí poskytovatele, který definuje čtverec metody pro vrácení

čtverec čísla.

firstApp.config (funkce ($ provide) {

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

toto. $ get = function () {

var továrna =

factory.multiply = funkce (x, y) {

návrat x * y

}

vrátit továrnu

}

})

})

Konstantní

Protože uživatel nemůže vkládat hodnoty do funkce module.config (), využíváme konstanty. Konstanty se používají k předávání hodnot ve fázi konfigurace.

firstApp.constant („configParam“, „konstantní hodnota“)

Příklad:

Směrnice uvedené výše lze použít následujícím způsobem:

Injekce závislostí

Příklad AngularJS Squaring

Zadejte libovolné číslo:

X2

Výsledek: {{result}}

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

firstApp.config (funkce ($ provide) {

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

toto. $ get = function () {

var továrna =

factory.multiply = funkce (x, y) {

návrat x * y

}

vrátit továrnu

}

})

})

firstApp.value ('defaultInput', 6)

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

var továrna =

factory.multiply = funkce (x, y) {

návrat x * y

}

vrátit továrnu

})

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

this.square = funkce (x) {

vrátit MathService.multiply (x, x)

}

})

firstApp.controller ('CalciController', function ($ scope, CalciService, defaultInput) {

$ scope.number = defaultInput

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

$ scope.square = funkce () {

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

}

})

implementace propojeného seznamu vc

VÝSTUP:

injekce závislostí v angularjs

S tímto se dostáváme na konec tohoto článku Dependency Injection v článku AngularJs. C sakra Edureka, důvěryhodná online vzdělávací společnost se sítí více než 250 000 spokojených studentů po celém světě.

Máte na nás dotaz? Uveďte to prosím v sekci komentářů této Dependency Injection v AngularJs a my se vám ozveme.