AngularJS Dependency Injection: Hvilke komponenter som injiseres

by: James Hartman James Hartman
Hours oppdatert

Hva er avhengighetsinjeksjon i AngularJS?

Avhengighetsinjeksjon i AngularJS er et programvaredesignmønster som implementerer inversjon av kontroll for å løse avhengigheter. Det bestemmer hvordan komponenter holder avhengighetene sine. Den kan brukes mens du definerer komponentene eller gir kjøre- og konfigurasjonsblokker for modulen. Det lar deg gjøre komponentene gjenbrukbare, testbare og vedlikeholdbare.

Inversjon av kontroll: Det betyr at objekter ikke lager andre objekter som de er avhengige av for å gjøre arbeidet sitt. I stedet får de disse gjenstandene fra en ekstern kilde. Dette danner grunnlaget for AngularJS Dependency Injection hvor hvis ett objekt er avhengig av et annet; det primære objektet tar ikke ansvaret for å lage det avhengige objektet og deretter bruke dets metoder. I stedet oppretter en ekstern kilde (som i AngularJS er selve AngularJS-rammeverket) det avhengige objektet og gir det til kildeobjektet for videre bruk.

Så la oss først forstå hva en avhengighet er.

Dependency Injection i AngularJS

Diagrammet ovenfor viser et enkelt AngularJS-avhengighetsinjeksjonseksempel på et dagligdags ritual i databaseprogrammering.

  • 'Model'-boksen viser "Model-klassen" som vanligvis er opprettet for å samhandle med databasen. Så nå er databasen en avhengighet for at "modellklassen" skal fungere.
  • Ved avhengighetsinjeksjon lager vi en tjeneste for å hente all informasjon fra databasen og komme inn i modellklassen.

I resten av denne opplæringen vil vi se mer på avhengighetsinjeksjon og hvordan dette oppnås i AngularJS.

Hvilken komponent kan injiseres som en avhengighet i AngularJS?

I Angular.JS injiseres avhengigheter ved å bruke en "injiserbar fabrikkmetode" eller "konstruktørfunksjon".

Disse komponentene kan injiseres med "tjeneste" og "verdi" komponenter som avhengigheter. Vi har sett dette i et tidligere emne med $http-tjenesten.

Vi har allerede sett at $http-tjenesten kan brukes i AngularJS for å hente data fra en MySQL eller MS SQL Serverdatabase via en PHP Webapplikasjon.

$http-tjenesten er normalt definert fra kontrolleren på følgende måte.

sampleApp.controller ('AngularJSController', function ($scope, $http)

Nå når $http-tjenesten er definert i kontrolleren som vist ovenfor. Det betyr at kontrolleren nå er avhengig av $http-tjenesten.

Så når koden ovenfor blir utført, vil AngularJS utføre følgende trinn;

  1. Sjekk om "$http-tjenesten" har blitt instansiert. Siden vår «kontroller» nå er avhengig av «$http-tjenesten», må et objekt av denne tjenesten gjøres tilgjengelig for vår kontroller.
  2. Hvis AngularJS finner ut at $http-tjenesten ikke er instansiert, bruker AngularJS 'fabrikk'-funksjonen til å konstruere et $http-objekt.
  3. Injektoren i Angular.JS gir deretter en forekomst av $http-tjenesten til vår kontroller for videre behandling.

Nå som avhengigheten er injisert i kontrolleren vår, kan vi nå påkalle de nødvendige funksjonene i $http-tjenesten for videre behandling.

Eksempel på avhengighetsinjeksjon

I dette eksemplet vil vi lære hvordan du bruker avhengighetsinjeksjon i AngularJS.

Avhengighetsinjeksjon kan implementeres på 2 måter

  1. Den ene er gjennom "Verdikomponenten"
  2. En annen er gjennom en "tjeneste"

La oss se på implementeringen av begge veier mer detaljert.

1) Verdikomponent

Dette konseptet er basert på det faktum å lage en enkel JavaScript objektet og sende det til behandlingsansvarlig for videre behandling.

Dette implementeres ved å bruke de to trinnene nedenfor

Trinn 1) Lag en JavaSkriptobjekt ved å bruke verdi-komponenten og fest det til hovedmodulen AngularJS.JS.

Verdikomponenten antar to parametere; den ene er nøkkelen, og den andre er verdien til javascript-objektet som er opprettet.

Trinn 2) Åpne JavaSkriptobjekt fra Angular.JS kontroller

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>

</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="sampleApp">

<div ng-controller="AngularJSController">
    <h3> Guru99 Global Event</h3>
    {{ID}}
</div>
<script>

    var sampleApp = angular.module('sampleApp',[]);
    sampleApp.value("TutorialID", 5);
    sampleApp.controller('AngularJSController', function($scope,TutorialID) {
        $scope.ID =TutorialID;
    });

</script>
</body>
</html>

RELATERTE ARTIKLER

I kodeeksemplet ovenfor utføres hovedtrinnene nedenfor

  1. sampleApp.value("TutorialID", 5);

Verdifunksjonen til Angular.JS JS-modulen brukes til å lage et nøkkelverdi-par kalt "TutorialID" og verdien til "5".

  1. sampleApp.controller('AngularJSController', function ($scope,TutorialID)

TutorialID-variabelen blir nå tilgjengelig for kontrolleren som en funksjonsparameter.

  1.  $scope.ID =TutorialID;

Verdien til TutorialID som er 5, blir nå tildelt en annen variabel kalt ID i $scope-objektet. Dette gjøres slik at verdien på 5 kan overføres fra kontrolleren til visningen.

  1. {{ID}}

ID-parameteren vises i visningen som et uttrykk. Så resultatet av '5' vil vises på siden.

Når koden ovenfor er utført, vil utdataene vises som nedenfor

Verdikomponent i Dependency Injection

2) Service

Tjenesten er definert som en singleton JavaSkriptobjekt som består av et sett med funksjoner som du ønsker å eksponere og injisere i kontrolleren.

For eksempel er "$http" en tjeneste i Angular.JS som når den injiseres i kontrollerene dine gir de nødvendige funksjonene til

( get() , query() , save() , remove(), delete() ).

Disse funksjonene kan deretter aktiveres fra kontrolleren din.

La oss se på et enkelt eksempel på hvordan du kan lage din egen tjeneste. Vi skal lage en enkel tilleggstjeneste som legger til to tall.

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>

</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<h3> Guru99 Global Event</h3>

<div ng-app = "mainApp" ng-controller = "DemoController">
    <p>Result: {{result}}</p>
</div>
<script>
    var mainApp = angular.module("mainApp", []);

    mainApp.service('AdditionService', function(){
        this.ADDITION = function(a,b) {
            return a+b;
        }
    });

    mainApp.controller('DemoController', function($scope, AdditionService) {

            $scope.result = AdditionService.ADDITION(5,6);
    });
</script>

</body>
</html>

I eksemplet ovenfor utføres følgende trinn

  1.  mainApp.service('AdditionService', function()

Her lager vi en ny tjeneste kalt 'AdditionService' ved å bruke tjenesteparameteren til vår hovedmodul AngularJS JS.

  1.  this.Addition = function(a,b)

Her lager vi en ny funksjon som heter Tillegg i vår tjeneste. Dette betyr at når AngularJS instansierer vår AdditionService inne i kontrolleren vår, vil vi kunne få tilgang til 'Addition'-funksjonen. I denne funksjonsdefinisjonen sier vi at denne funksjonen aksepterer to parametere, a og b.

  1.  return a+b;

Her definerer vi kroppen til tilleggsfunksjonen vår, som ganske enkelt legger til parameterne og returnerer tilleggsverdien.

  1.  mainApp.controller('DemoController', function($scope, AdditionService)

Dette er hovedtrinnet som involverer avhengighetsinjeksjon. I vår kontrollerdefinisjon refererer vi nå til vår 'AdditionService'-tjeneste. Når AngularJS ser dette, vil det instansiere et objekt av typen "AdditionService".

  1.  $scope.result = AdditionService.Addition(5,6);

Vi får nå tilgang til funksjonen 'Addition' som er definert i vår tjeneste og tilordner den til $scope-objektet til kontrolleren.

Så dette er et enkelt eksempel på hvordan vi kan definere tjenesten vår og injisere funksjonaliteten til den tjenesten inne i kontrolleren vår.

Sammendrag

  • Dependency Injection som navnet tilsier er prosessen med å injisere avhengig funksjonalitet i moduler under kjøretid.
  • Å bruke avhengighetsinjeksjon hjelper til med å ha en mer gjenbrukbar kode. Hvis du hadde felles funksjonalitet som brukes på tvers av flere applikasjonsmoduler, er den beste måten å definere en sentral tjeneste med den funksjonaliteten og deretter injisere den tjenesten som en avhengighet i applikasjonsmodulene dine.
  • Verdiobjektet til AngularJS kan brukes til å injisere enkelt JavaSkriptobjekter i kontrolleren din ved å bruke $inject in AngularJS.
  • Tjenestemodulen kan brukes til å definere dine tilpassede tjenester som kan gjenbrukes på tvers av flere AngularJS-moduler.