AngularJS Dependency Injection: Vilka komponenter som injiceras

By: James Hartman James Hartman
Hours Uppdaterad

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.

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

Dependency Injection i AngularJS

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 denna handledning kommer vi att titta mer på beroendeinjektion och hur detta åstadkoms i AngularJS.

Vilken komponent kan injiceras som ett beroende i AngularJS?

I Angular.JS injiceras beroenden genom att använda 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.

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 inom Angular.JS tillhandahåller sedan en instans av $http-tjänsten till vår styrenhet för vidare bearbetning.

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 är baserat på det faktum att skapa en enkel JavaScript objektet och skicka det till den registeransvarige för vidare behandling.

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

Steg 1) Skapa en JavaSkriptobjekt genom att använda värdekomponenten och bifoga det till din huvudmodul AngularJS.JS.

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

Steg 2) Gå till JavaSkriptobjekt från 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>

RELATERADE ARTIKLAR

I ovanstående kodexempel utförs huvudstegen nedan

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

Värdefunktionen för Angular.JS JS-modulen används för att skapa ett nyckel-värdepar som heter "TutorialID" och värdet "5".

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

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

  1.  $scope.ID =TutorialID;

Värdet på TutorialID som är 5, tilldelas nu en annan variabel som heter ID i $scope-objektet. Detta görs så att värdet 5 kan överföras från styrenheten till vyn.

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

Värdekomponent i Dependency Injection

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 Angular.JS som när den injiceras i dina kontroller 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 för vår huvudmodul AngularJS JS.

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

Här skapar vi en ny funktion som heter Tillägg inom vår tjänst. Detta innebär att när AngularJS instansierar vår AdditionService inuti vår styrenhet, skulle vi då kunna komma åt funktionen 'Addition'. I denna funktionsdefinition säger vi att den här funktionen accepterar två parametrar, a och b.

  1.  return a+b;

Här definierar vi kroppen för vår tilläggsfunktion som helt enkelt lägger till parametrarna och returnerar mervärdet.

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

Detta är huvudsteget som involverar beroendeinjektion. I vår controllerdefinition hänvisar vi nu till vår 'AdditionService'-tjänst. När AngularJS ser detta, kommer det att instansiera ett objekt av typen 'AdditionService'.

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

Vi kommer nu åt funktionen 'Addition' som är definierad i vår tjänst och tilldelar den till $scope-objektet för kontrollern.

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.

Sammanfattning

  • Dependency Injection som namnet antyder är processen att injicera beroende funktionalitet i moduler under körning.
  • Att använda beroendeinjektion hjälper till att få en mer återanvändbar kod. Om du hade gemensam funktionalitet som används över flera applikationsmoduler, är det bästa sättet att definiera en central tjänst med den funktionen och sedan injicera den tjänsten som ett beroende i dina applikationsmoduler.
  • Värdeobjektet för AngularJS kan användas för att injicera enkelt JavaSkriptobjekt i din kontroller med $inject in AngularJS.
  • Servicemodulen kan användas för att definiera dina anpassade tjänster som kan återanvändas över flera AngularJS-moduler.

Sammanfatta detta inlägg med: