AngularJS-avhengighetsinjeksjonskomponenter

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.

⚠️ Versjonsmerknad: Støtten for AngularJS ble avsluttet i januar 2022, uten sikkerhetsoppdateringer. Moderne Angular injiserer gjennom @Injectable-leverandører og injisere()Koden nedenfor forblir historisk.

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

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 veiledningen skal vi se mer på avhengighetsinjeksjon og hvordan dette oppnås i AngularJS.

Hvilken komponent kan injiseres som en avhengighet i AngularJS

I AngularJS 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.

En AngularJS moduler registrerer injiserbare objekter gjennom fem oppskrifter.

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 AngularJS gir deretter en instans av $http-tjenesten til kontrolleren vår for videre behandling.

Annotasjonsskjemaer: Implisitt annotering leser parameternavn, så minifisering ødelegger den. Både innebygd array-notasjon og $inject overlever den; ng-strict-di på ng-app avviser implisitt annotasjon.

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å å lage en enkel JavaScript objektet og sender det til kontrolleren for videre behandling.

Dette implementeres ved å bruke de to trinnene nedenfor

Trinn 1) Lag en JavaSkriptobjektet ved å bruke verdi-komponenten og koble det til din hoved AngularJS-modul.

Verdikomponenten tar på seg to parametere; den ene er nøkkelen, og den andre er verdien av JavaSkriptobjektet som opprettes.

Trinn 2) Åpne JavaSkriptobjekt fra AngularJS-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>

Koden ovenfor utfører trinnene nedenfor

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

   Verdifunksjonen til AngularJS-modulen brukes til å opprette et nøkkel-verdi-par kalt «TutorialID» og verdien «5».

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

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

3.  $scope.ID =TutorialID;

   Verdien av TutorialID, som er 5, blir nå tilordnet en annen variabel kalt ID i $omfang objekt. Dette gjøres slik at verdien 5 kan sendes fra kontrolleren til visningen.

4. {{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

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 AngularJS som, når den injiseres i kontrollerne 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 oppretter vi en ny tjeneste kalt «AdditionService» ved å bruke serviceparameteren til vår hovedmodul i AngularJS.

2.  this.ADDITION = function(a,b)

   Her oppretter vi en ny funksjon kalt ADDITION i tjenesten vår. Dette betyr at når AngularJS instansierer AdditionService i kontrolleren vår, vil vi kunne få tilgang til «ADDITION»-funksjonen. I denne funksjonsdefinisjonen sier vi at denne funksjonen godtar to parametere, a og b.

3.  return a+b;

   Her definerer vi hoveddelen av ADDITION-funksjonen vår, som ganske enkelt legger sammen parametrene og returnerer den additive verdien.

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

   Dette er hovedtrinnet som involverer avhengighetsinjeksjon. I kontrollerdefinisjonen vår refererer vi nå til tjenesten vår «AdditionService». Når AngularJS ser dette, vil den instansiere et objekt av typen «AdditionService».

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

   Vi får nå tilgang til funksjonen «ADDITION» som er definert i tjenesten vår, 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.

Spørsmål og svar