Sådan implementeres afhængighedsinjektion i AngularJs



Denne artikel giver dig en detaljeret og omfattende viden om, hvordan du implementerer Dependency Injection i AngularJs.

Dependency Injection er et softwaredesignmønster, der specificerer den måde, hvorpå komponenter får fat i deres afhængigheder. Komponenterne får deres afhængighed i stedet for hårdt at kode dem. Genanvendelighed og vedligeholdelsesevne kan opnås ved hjælp af afhængighedsinjektion. Højeste afhængighedsinjektion i kan udføres af følgende komponenter:





Værdiafhængighedsinjektion

Et simpelt objekt i AngularJs er kendt som en værdi. Det kan være en streng, et tal eller endda et JavaScript-objekt. Det kan bruges til at overføre værdier i fabrikker, tjenester eller controllere i løbet af køre- og konfigurationsfasen.

Eksempel:



// definer et modul

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

// oprette et værdiobjekt og videregive data til det



firstModule.value ('numberValue', 50)

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

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

I dette eksempel defineres værdier ved hjælp af funktionen (). Navnet på værdien specificeres af den første parameter, og den anden parameter angiver værdien. Dette gør det muligt for fabrikkerne, tjenesterne og controllerne at henvise til disse værdier ved deres eget navn.

Injektion af en værdi

Vi kan indsprøjte en værdi i AngularJs controller-funktionen ved at tilføje en parameter med samme navn som værdien.

Eksempel:

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

firstModule.value ('numberValue', 18)

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

console.log (numberValue)

})

Fabriksinjektion

En funktion, der skaber værdier, er kendt som en fabrik. En værdi efter behov oprettes af fabrikken, hver gang en tjeneste eller controller har brug for en værdi, der indsprøjtes fra fabrikken. Når værdien er oprettet, genbruges den til alle tjenester og controllere.

Det bruger fabriksfunktionen til at beregne og returnere værdien.

Eksempel:

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

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

returner 'en værdi'

})

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

java-kommando for at afslutte programmet

console.log (firstFactory)

})

Indsprøjtning af værdier til fabrikken

En værdi kan injiceres på fabrikken ved hjælp af følgende metode:

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

firstModule.value ('numberValue', 29)

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

console.log (numberValue)

})

Det skal bemærkes, at værdienproduceret af fabriksfunktionen injiceres, ikke selve fabriksfunktionen. Lad os gå videre med denne artikel om Dependency Injection in AngularJs.

Serviceinjektion i AngularJs

Et enkelt JavaScript-objekt, der indeholder et sæt funktioner, er kendt som en tjeneste i AngularJs. Den nødvendige logik for, at tjenesten kan udføres, er indeholdt i funktionen. Service kan oprettes ved hjælp af funktionen service () på et modul.

Eksempel:

// definer et modul

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

...

// opret en tjeneste, der definerer en metode firkant for at returnere firkantet af et tal

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

this.square = funktion (x) {

returner MathService.multiply (x, x)

}

})

// indsprøjt servicen 'CalciService' i controlleren

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

defaultInput) {

dynamisk hukommelsesallokering i c ++ med eksempelprogram

$ scope.number = defaultInput

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

$ scope.square = funktion () {

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

}

})

Udbyder

For internt at oprette tjenester eller fabrik i konfigurationsfasen bruger vi leverandøren. Udbyder er en speciel fabriksmetode med en get () - funktion, der bruges til at returnere værdien / tjenesten / fabrikken.

Eksempel:

// definer et modul

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

...

// Opret en tjeneste ved hjælp af udbyder, der definerer et metodefelt for at returnere

kvadrat af et tal.

firstApp.config (funktion ($ give) {

$ give.provider ('MathService', funktion () {

dette. $ get = funktion () {

var fabrik =

fabrik.multiply = funktion (x, y) {

returner x * y

}

returnere fabrik

}

})

})

Konstant

Da brugeren ikke kan injicere værdier i module.config () -funktionen, bruger vi konstanter. Konstanter bruges til at overføre værdier i konfigurationsfasen.

firstApp.constant (“configParam”, “konstant værdi”)

Eksempel:

Ovennævnte direktiver kan bruges på følgende måde:

Afhængighedsinjektion

AngularJS kvadrateksempel

Indtast et hvilket som helst nummer:

x2

Resultat: {{resultat}}

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

firstApp.config (funktion ($ give) {

$ give.provider ('MathService', funktion () {

dette. $ get = funktion () {

var fabrik =

fabrik.multiply = funktion (x, y) {

returner x * y

}

returnere fabrik

}

})

})

firstApp.value ('defaultInput', 6)

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

var fabrik =

fabrik.multiply = funktion (x, y) {

returner x * y

}

returnere fabrik

})

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

this.square = funktion (x) {

returner MathService.multiply (x, x)

}

})

hvordan man opretter en pakke i java

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

$ scope.number = defaultInput

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

$ scope.square = funktion () {

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

}

})

PRODUKTION:

afhængighedsinjektion i angularjs

Med dette kommer vi til en ende på denne afhængighedsinjektion i AngularJs-artiklen. C heck ud af af Edureka, et pålideligt online læringsfirma med et netværk på mere end 250.000 tilfredse elever spredt over hele kloden.

Har du et spørgsmål til os? Nævn det i kommentarfeltet i denne Dependency Injection in AngularJs, og vi vender tilbage til dig.