Hoe afhankelijkheidsinjectie in AngularJs te implementeren

Dit artikel biedt u een gedetailleerde en uitgebreide kennis van het implementeren van Dependency Injection in AngularJs.

Dependency Injection is een softwareontwerppatroon dat de manier specificeert waarop componenten hun afhankelijkheden in handen krijgen. De componenten krijgen hun afhankelijkheden in plaats van ze hard te coderen. Herbruikbaarheid en onderhoudbaarheid kunnen worden bereikt door gebruik te maken van afhankelijkheidsinjectie. Supreme Dependency Injection in kan worden gedaan door de volgende componenten:



Waarde afhankelijkheidsinjectie

Een eenvoudig object in AngularJs staat bekend als een waarde. Het kan een tekenreeks, een getal of zelfs een JavaScript-object zijn. Het kan worden gebruikt om waarden door te geven in fabrieken, services of controllers tijdens de run- en configuratiefase.

Voorbeeld:

// definieer een module

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

// maak een waardeobject en geef er gegevens aan door

firstModule.value ('numberValue', 50)

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

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

In dit voorbeeld worden waarden gedefinieerd met de functie value (). De naam van de waarde wordt gespecificeerd door de eerste parameter, en de tweede parameter specificeert de waarde. Dit stelt de fabrieken, diensten en controllers in staat om deze waarden bij hun naam zelf te noemen.

Een waarde toevoegen

We kunnen een waarde in de AngularJs-controllerfunctie injecteren door een parameter toe te voegen met dezelfde naam als de waarde.

Voorbeeld:

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

firstModule.value ('numberValue', 18)

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

console.log (numberValue)

})

Fabrieksinjectie

Een functie die waarden creëert, staat bekend als een fabriek. Een waarde op aanvraag wordt gecreëerd door de fabriek, wanneer een service of controller een waarde nodig heeft die vanuit de fabriek wordt geïnjecteerd. Zodra de waarde is gecreëerd, wordt deze hergebruikt voor alle services en controllers.

Het maakt gebruik van de fabrieksfunctie om de waarde te berekenen en te retourneren.

__init__ in python

Voorbeeld:

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

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

retourneer 'een waarde'

})

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

console.log (firstFactory)

})

Waarden in de fabriek injecteren

Een waarde kan op de volgende manier in de fabriek worden geïnjecteerd:

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

firstModule.value ('numberValue', 29)

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

console.log (numberValue)

})

Opgemerkt moet worden dat de waardegeproduceerd door de fabrieksfunctie wordt geïnjecteerd, niet de fabrieksfunctie zelf. Laten we verder gaan met dit artikel van Dependency Injection in AngularJs.

Service-injectie in AngularJs

Een singleton JavaScript-object dat een set functies bevat, wordt in AngularJs een service genoemd. De logica die nodig is om de service uit te voeren, is vervat in de functie. Service kan worden gemaakt door de functie service () op een module te gebruiken.

Voorbeeld:

// definieer een module

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

...

// maak een service die een methode definieert vierkant om het kwadraat van een getal terug te geven

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

this.square = functie (x) {

retourneer MathService.multiply (x, x)

}

})

beëindig een programma in java

// injecteer de service 'CalciService' in de controller

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

defaultInput) {

$ scope.number = defaultInput

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

$ scope.square = functie () {

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

}

})

Aanbieder

Om tijdens de configuratiefase intern services of factory te creëren, maken we gebruik van Provider. Provider is een speciale fabrieksmethode met een functie get () die wordt gebruikt om de waarde / service / fabriek te retourneren.

Voorbeeld:

// definieer een module

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

...

// maak een service met behulp van een provider die een methodevierkant definieert om de

vierkant van een getal.

firstApp.config (functie ($ bieden) {

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

this. $ get = function () {

var fabriek =

factory.multiply = functie (x, y) {

retourneer x * y

}

terugkeer fabriek

}

})

})

Constante

Omdat de gebruiker geen waarden kan injecteren in de functie module.config (), maken we gebruik van constanten. Constanten worden gebruikt om waarden door te geven in de configuratiefase.

firstApp.constant ('configParam', 'constante waarde')

Voorbeeld:

Bovenstaande richtlijnen kunnen op de volgende manier worden gebruikt:

Afhankelijkheidsinjectie

AngularJS Squaring Voorbeeld

Voer een willekeurig nummer in:

X2

Resultaat: {{resultaat}}

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

firstApp.config (functie ($ bieden) {

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

this. $ get = function () {

var fabriek =

factory.multiply = functie (x, y) {

retourneer x * y

}

terugkeer fabriek

}

})

})

firstApp.value ('defaultInput', 6)

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

var fabriek =

factory.multiply = functie (x, y) {

retourneer x * y

}

terugkeer fabriek

})

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

this.square = functie (x) {

retourneer MathService.multiply (x, x)

}

})

c ++ fibonacci-reeks

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

$ scope.number = defaultInput

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

$ scope.square = functie () {

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

}

})

UITGANG:

afhankelijkheidsinjectie in angularjs

Hiermee komen we aan het einde van dit Dependency Injection in AngularJs-artikel. C ach uit de door Edureka, een vertrouwd online leerbedrijf met een netwerk van meer dan 250.000 tevreden leerlingen verspreid over de hele wereld.

Heeft u een vraag voor ons? Vermeld het in het opmerkingengedeelte van deze afhankelijkheidsinjectie in AngularJs en we nemen contact met u op.