Componente de injectare a dependențelor AngularJS

Ce este injecția de dependență în AngularJS?

Injecție de dependență în AngularJS este un model de proiectare software care implementează inversarea controlului pentru rezolvarea dependențelor. Acesta decide modul în care componentele își păstrează dependențele. Poate fi folosit în timp ce definiți componentele sau furnizați blocuri de rulare și configurare ale modulului. Vă permite să faceți componentele reutilizabile, testabile și întreținute.

Inversarea controlului: Înseamnă că obiectele nu creează alte obiecte pe care se bazează pentru a-și face munca. În schimb, ei primesc aceste obiecte dintr-o sursă externă. Aceasta formează baza AngularJS Dependency Injection în care dacă un obiect este dependent de altul; obiectul primar nu își asumă responsabilitatea creării obiectului dependent și apoi folosește metodele acestuia. În schimb, o sursă externă (care în AngularJS este cadrul AngularJS în sine) creează obiectul dependent și îl dă obiectului sursă pentru utilizare ulterioară.

⚠️ Notă privind versiunea: Suportul AngularJS s-a încheiat în ianuarie 2022, fără patch-uri de securitate. Angular modern injectează prin intermediul furnizorilor @Injectable și injecta()Codul de mai jos rămâne istoric.

Deci, să înțelegem mai întâi ce este o dependență.

Diagrama de mai sus arată un exemplu simplu de injectare a dependenței AngularJS a unui ritual de zi cu zi în programarea bazelor de date.

• Caseta „Model” ilustrează „clasa de model” care este creată în mod normal pentru a interacționa cu baza de date. Deci acum baza de date este o dependență pentru ca „clasa de model” să funcționeze.
• Prin injecția de dependență, creăm un serviciu pentru a prelua toate informațiile din baza de date și a intra în clasa modelului.

În restul acestui tutorial, vom analiza mai mult injecția de dependențe și cum se realizează aceasta în AngularJS.

Ce componentă poate fi injectată ca dependență în AngularJS

În AngularJS, dependențele sunt injectate folosind o „metodă factory injectabilă” sau o „funcție constructor”.

Aceste componente pot fi injectate cu componente „serviciu” și „valoare” ca dependențe. Am văzut acest lucru într-un subiect anterior cu serviciul $http.

Un AngularJS modul înregistrează obiecte injectabile prin cinci rețete.

Am văzut deja că serviciul $http poate fi utilizat în AngularJS pentru a obține date de la a MySQL sau MS SQL Baza de date server prin a PHP aplicatie web.

Serviciul $http este definit în mod normal din interiorul controlerului în felul următor.

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

Acum, când serviciul $http este definit în controler, așa cum se arată mai sus. Înseamnă că controlerul are acum o dependență de serviciul $http.

Deci, atunci când codul de mai sus este executat, AngularJS va efectua următorii pași;

1. Verificați dacă „serviciul $http” a fost instanțiat. Deoarece „controllerul” nostru depinde acum de serviciul „$http”, un obiect al acestui serviciu trebuie să fie pus la dispoziția controlorului nostru.
2. Dacă AngularJS află că serviciul $http nu este instanțiat, AngularJS folosește funcția „fabrică” pentru a construi un obiect $http.
3. Injectorul din AngularJS furnizează apoi o instanță a serviciului $http controlerului nostru pentru procesare ulterioară.

Forme de adnotare: Adnotare implicită citește numele parametrilor, deci minificarea o întrerupe. Atât notația inline a array-ului, cât și $inject îi supraviețuiesc; ng-strict-di pe ng-app respinge adnotarea implicită.

Acum că dependența este injectată în controlerul nostru, acum putem invoca funcțiile necesare în cadrul serviciului $http pentru procesare ulterioară.

Exemplu de injectare a dependenței

În acest exemplu, vom învăța cum să folosim injecția de dependență în AngularJS.

Injecția de dependență poate fi implementată în 2 moduri

1. Unul este prin „Componenta de valoare”
2. Un altul este printr-un „Serviciu”

Să ne uităm la implementarea ambelor moduri mai detaliat.

1) Componenta valorii

Acest concept se bazează pe crearea unui concept simplu JavaScenariu obiect și transmiterea acestuia către controler pentru procesare ulterioară.

Acest lucru este implementat folosind cei doi pași de mai jos

Pas 1) Crearea unei JavaObiectul Script utilizând componenta value și atașați-l la modulul principal AngularJS.

Componenta valorii preia doi parametri; unul este cheia, iar celălalt este valoarea JavaObiect script care este creat.

Pas 2) Accesati JavaObiect script din Controler AngularJS

<! 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>

Codul de mai sus execută pașii de mai jos

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

   Funcția value a modulului AngularJS este utilizată pentru a crea o pereche cheie-valoare numită „TutorialID” și valoarea „5”.

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

   Variabila TutorialID devine acum accesibilă controlerului ca parametru de funcție.

3.  $scope.ID =TutorialID;

   Valoarea lui TutorialID, care este 5, este acum atribuită unei alte variabile numite ID în $scop obiect. Acest lucru se face astfel încât valoarea 5 să poată fi transmisă de la controler la vizualizare.

4. {{ID}}

   Parametrul ID este afișat în vizualizare ca expresie. Deci rezultatul lui „5” va fi afișat pe pagină.

Când codul de mai sus este executat, rezultatul va fi afișat ca mai jos

2) Serviciu

Serviciul este definit ca un singleton JavaObiect script constând dintr-un set de funcții pe care doriți să le expuneți și să le injectați în controler.

De exemplu, „$http” este un serviciu în AngularJS care, atunci când este injectat în controlerele dvs., oferă funcțiile necesare pentru

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

Aceste funcții pot fi apoi invocate de la controler în consecință.

Să ne uităm la un exemplu simplu despre cum vă puteți crea propriul serviciu. Vom crea un serviciu simplu de adăugare care adaugă două numere.

<! 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>

În exemplul de mai sus, se efectuează următorii pași

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

   Aici creăm un nou serviciu numit „AdditionService” folosind parametrul service al modulului nostru principal AngularJS.

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

   Aici creăm o nouă funcție numită ADDITION în cadrul serviciului nostru. Aceasta înseamnă că atunci când AngularJS instanțiază AdditionService-ul nostru în cadrul controlerului nostru, vom putea accesa funcția „ADDITION”. În această definiție a funcției, spunem că această funcție acceptă doi parametri, a și b.

3.  return a+b;

   Aici definim corpul funcției noastre ADDITION, care adună pur și simplu parametrii și returnează valoarea adăugată.

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

   Acesta este pasul principal care implică injectarea de dependențe. În definiția controlerului nostru, facem acum referire la serviciul nostru „AdditionService”. Când AngularJS vede acest lucru, va instanția un obiect de tip „AdditionService”.

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

   Acum accesăm funcția „ADDITION”, care este definită în serviciul nostru, și o atribuim obiectului $scope al controlerului.

Deci acesta este un exemplu simplu despre cum ne putem defini serviciul și injecta funcționalitatea acelui serviciu în controlerul nostru.

Întrebări frecvente