Injecție de dependență AngularJS: ce componente au fost injectate

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ă.

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, ne vom uita mai mult la injecția de dependență și la modul în care aceasta se realizează în AngularJS.

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

În Angular.JS, dependențele sunt injectate folosind o „metodă de fabrică injectabilă” sau „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.

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;

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.
Dacă AngularJS află că serviciul $http nu este instanțiat, AngularJS folosește funcția „fabrică” pentru a construi un obiect $http.
Injectorul din Angular.JS oferă apoi o instanță a serviciului $http controlerului nostru pentru procesare ulterioară.

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

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

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

1) Componenta valorii

Acest concept se bazează pe faptul de a crea un simplu JavaScenariu obiect și transmiteți-l operatorului pentru prelucrare ulterioară.

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

Pas 1) Crearea unei JavaScript obiect utilizând componenta valoare și atașați-o la modulul dvs. principal AngularJS.JS.

Componenta valorii preia doi parametri; una este cheia, iar cealaltă este valoarea obiectului javascript care este creat.

Pas 2) Accesati JavaObiect script din Controler Angular.JS

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

În exemplul de cod de mai sus, se efectuează pașii principali de mai jos

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

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

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

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

```
 $scope.ID =TutorialID;
```

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

```
{{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 Angular.JS care, atunci când este injectat în controlerele dvs., oferă funcțiile necesare de

(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

 mainApp.service('AdditionService', function()

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

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

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

```
 return a+b;
```

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

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

Acesta este pasul principal care implică injectarea dependenței. În definiția controlerului nostru, ne referim acum la serviciul nostru „AdditionService”. Când AngularJS vede asta, va instanția un obiect de tip „AdditionService”.

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

Acum accesăm funcția „Adăugare” 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.

Rezumat

Dependency Injection, așa cum sugerează și numele, este procesul de injectare a funcționalității dependente în module în timpul rulării.
Utilizarea injecției de dependență ajută la obținerea unui cod mai reutilizabil. Dacă ați avut o funcționalitate comună care este utilizată în mai multe module de aplicație, cel mai bun mod este să definiți un serviciu central cu această funcționalitate și apoi să injectați acel serviciu ca dependență în modulele aplicației.
Obiectul valoare al lui AngularJS poate fi folosit pentru a injecta simplu JavaScript obiecte în controlerul dvs. folosind $inject in AngularJS.
Modulul de servicii poate fi folosit pentru a defini serviciile dvs. personalizate care pot fi reutilizate în mai multe module AngularJS.

S-ar putea sa-ti placa: