AngularJS-beroendeinjektionskomponenter

Vad är Dependency Injection i AngularJS?

Beroende på injektion i AngularJS är ett mjukvarudesignmönster som implementerar inversion av kontroll för att lösa beroenden. Det bestämmer hur komponenter håller sina beroenden. Den kan användas när komponenterna definieras eller modulens körnings- och konfigurationsblock. Det gör att du kan göra komponenterna återanvändbara, testbara och underhållsbara.

Inversion av kontroll: Det betyder att objekt inte skapar andra objekt som de förlitar sig på för att utföra sitt arbete. Istället får de dessa föremål från en extern källa. Detta utgör grunden för AngularJS Dependency Injection där om ett objekt är beroende av ett annat; det primära objektet tar inte ansvaret för att skapa det beroende objektet och sedan använda dess metoder. Istället skapar en extern källa (som i AngularJS är själva ramverket AngularJS) det beroende objektet och ger det till källobjektet för vidare användning.

⚠️ Versionsinformation: Stödet för AngularJS upphörde i januari 2022, utan säkerhetsuppdateringar. Modern Angular injicerar via @Injectable-leverantörer och injicera()Koden nedan förblir historisk.

Så låt oss först förstå vad ett beroende är.

Diagrammet ovan visar ett enkelt AngularJS-beroendeinjektionsexempel på en vardaglig ritual i databasprogrammering.

• Rutan 'Modell' visar "Modelklassen" som normalt skapas för att interagera med databasen. Så nu är databasen ett beroende för att "Model class" ska fungera.
• Genom beroendeinjektion skapar vi en tjänst för att ta all information från databasen och komma in i modellklassen.

I resten av den här handledningen kommer vi att titta mer på beroendeinjektion och hur detta åstadkoms i AngularJS.

Vilken komponent kan injiceras som ett beroende i AngularJS

I AngularJS injiceras beroenden med hjälp av en "injicerbar fabriksmetod" eller "konstruktorfunktion".

Dessa komponenter kan injiceras med "service" och "värde" komponenter som beroenden. Vi har sett detta i ett tidigare ämne med $http-tjänsten.

En AngularJS modul registrerar injicerbara objekt genom fem recept.

Vi har redan sett att $http-tjänsten kan användas inom AngularJS för att hämta data från en MySQL eller MS SQL Serverdatabas via en PHP webbapplikation.

$http-tjänsten definieras normalt inifrån styrenheten på följande sätt.

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

Nu när $http-tjänsten är definierad i styrenheten som visas ovan. Det betyder att styrenheten nu har ett beroende av $http-tjänsten.

Så när ovanstående kod exekveras kommer AngularJS att utföra följande steg;

1. Kontrollera om "$http-tjänsten" har instansierats. Eftersom vår "kontroller" nu är beroende av "$http-tjänsten", måste ett objekt för denna tjänst göras tillgängligt för vår kontrollant.
2. Om AngularJS får reda på att $http-tjänsten inte är instansierad, använder AngularJS funktionen 'factory' för att konstruera ett $http-objekt.
3. Injektorn i AngularJS tillhandahåller sedan en instans av $http-tjänsten till vår kontroller för vidare bearbetning.

Annoteringsformulär: Implicit annotering läser parameternamn, så minifiering bryter det. Både inline array-notation och $inject överlever det; ng-strict-di på ng-app avvisar implicit annotering.

Nu när beroendet injiceras i vår styrenhet kan vi nu anropa de nödvändiga funktionerna inom $http-tjänsten för vidare bearbetning.

Exempel på Dependency Injection

I det här exemplet kommer vi att lära oss hur man använder beroendeinjektion i AngularJS.

Beroendeinjektion kan implementeras på 2 sätt

1. En är genom "Värdekomponenten"
2. En annan är genom en "tjänst"

Låt oss titta på genomförandet av båda sätten mer i detalj.

1) Värdekomponent

Detta koncept bygger på att skapa en enkel JavaScript objektet och skickar det till kontrollanten för vidare bearbetning.

Detta implementeras med hjälp av de två stegen nedan

Steg 1) Skapa en JavaSkriptobjektet med hjälp av value-komponenten och koppla det till din huvudsakliga AngularJS-modul.

Värdekomponenten antar två parametrar; den ena är nyckeln och den andra är värdet på JavaSkriptobjekt som skapas.

Steg 2) Gå till JavaSkriptobjekt från 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 ovan utför stegen nedan

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

   Funktionen värde i AngularJS-modulen används för att skapa ett nyckel-värde-par som heter "TutorialID" och värdet "5".

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

   Variabeln TutorialID blir nu tillgänglig för styrenheten som en funktionsparameter.

3.  $scope.ID =TutorialID;

   Värdet för TutorialID, som är 5, tilldelas nu en annan variabel som heter ID i $omfattning objekt. Detta görs så att värdet 5 kan skickas från kontrollenheten till vyn.

4. {{ID}}

   ID-parametern visas i vyn som ett uttryck. Så resultatet av '5' kommer att visas på sidan.

När ovanstående kod exekveras, kommer utdata att visas enligt nedan

2) Service

Service definieras som en singel JavaSkriptobjekt som består av en uppsättning funktioner som du vill exponera och injicera i din kontroller.

Till exempel är "$http" en tjänst i AngularJS som, när den injiceras i dina controllers, tillhandahåller de nödvändiga funktionerna för

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

Dessa funktioner kan sedan anropas från din styrenhet i enlighet med detta.

Låt oss titta på ett enkelt exempel på hur du kan skapa din egen tjänst. Vi kommer att skapa en enkel tilläggstjänst som lägger till två nummer.

<! 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 exemplet ovan utförs följande steg

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

   Här skapar vi en ny tjänst som heter 'AdditionService' med hjälp av serviceparametern i vår huvudmodul i AngularJS.

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

   Här skapar vi en ny funktion som heter ADDITION i vår tjänst. Det betyder att när AngularJS instansierar vår AdditionService i vår kontroller, kommer vi att kunna komma åt funktionen 'ADDITION'. I denna funktionsdefinition säger vi att den här funktionen accepterar två parametrar, a och b.

3.  return a+b;

   Här definierar vi brödtexten i vår ADDITION-funktion som helt enkelt adderar parametrarna och returnerar det adderade värdet.

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

   Detta är huvudsteget som involverar beroendeinjektion. I vår kontrollerdefinition refererar vi nu till vår tjänst 'AdditionService'. När AngularJS ser detta kommer den att instansiera ett objekt av typen 'AdditionService'.

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

   Vi använder nu funktionen 'ADDITION' som är definierad i vår tjänst och tilldelar den till kontrollenhetens $scope-objekt.

Så det här är ett enkelt exempel på hur vi kan definiera vår tjänst och injicera funktionaliteten för den tjänsten inuti vår styrenhet.

Vanliga frågor