Injecție de dependență în AngularJS cu exemplu

Cuprins:

Anonim

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

Injecția dependenței este un model de proiectare software care implementează inversarea controlului pentru rezolvarea dependențelor.

Inversiunea controlului : înseamnă că obiectele nu creează alte obiecte pe care se bazează pentru a-și face munca. În schimb, obțin aceste obiecte dintr-o sursă exterioară. Aceasta formează baza injecției de dependență în care dacă un obiect este dependent de altul; obiectul primar nu își asumă responsabilitatea de a crea obiectul dependent și apoi să-și folosească metodele. Î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 ritual de zi cu zi în programarea bazelor de date.

  • Caseta „Model” descrie „Clasa model” care este creată în mod normal pentru a interacționa cu baza de date. Așadar, acum baza de date este o dependență pentru funcționarea „clasei Model”.
  • Prin injectarea dependenței, 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ță și cum se realizează acest lucru în AngularJS.

În acest tutorial, veți învăța-

  • Ce componentă poate fi injectată ca dependență în AngularJS
  • Exemplu de injecție de dependență
    • Componenta valoare
    • Serviciu

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

În Angular.JS, dependențele sunt injectate folosind o „metodă injectabilă din fabrică” sau „funcție constructor”.

Aceste componente pot fi injectate cu componente „service” ș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 cadrul AngularJS pentru a obține date dintr-o bază de date MySQL sau MS SQL Server printr-o aplicație web PHP.

Serviciul $ http este definit în mod normal din interiorul controlerului în modul 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 „controlorul” nostru depinde acum de „serviciul $ http”, un obiect al acestui serviciu trebuie pus la dispoziția controlerului 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 cadrul Angular.JS oferă apoi o instanță a serviciului $ http către controlerul nostru pentru procesare ulterioară.

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

Exemplu de injecție de dependență

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

  1. Unul este prin „Componenta valoare”
  2. Altul este printr-un „Serviciu”

Să analizăm mai detaliat implementarea ambelor moduri.

1) Componenta valorică

Acest concept se bazează pe faptul de a crea un obiect JavaScript simplu și de a-l transmite controlerului pentru procesare ulterioară.

Aceasta este implementată folosind cei doi pași de mai jos

Pasul 1) Creați un obiect JavaScript utilizând componenta valoare și atașați-l la modulul dvs. principal AngularJS.JS.

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

Pasul 2) Accesați obiectul JavaScript din controlerul Angular.JS

Event Registration


Guru99 Global Event

{{ID}}

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

  1. sampleApp.value ("ID tutorial", 5);

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

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

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

  1.  $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 de 5 să poată fi transmisă de la controler la vizualizare.

  1. {{ID}}

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

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

2) Serviciu

Serviciul este definit ca un obiect JavaScript unic format 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 controlerul dvs. în consecință.

Să ne uităm la un exemplu simplu al modului în care vă puteți crea propriul serviciu. Vom crea un serviciu de adăugare simplu, care adaugă două numere.

Event Registration

Guru99 Global Event




Result: {{result}}

În exemplul de mai sus, se efectuează pașii următori

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

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

  1.  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 creează un serviciu AdditionService în interiorul 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.

  1.  return a+b;

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

  1.  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 acest lucru, va crea un obiect de tipul "AdditionService".

  1.  $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 al modului în care ne putem defini serviciul și să injectăm funcționalitatea serviciului respectiv în interiorul controlerului 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ții, cel mai bun mod este să definiți un serviciu central cu acea funcționalitate și apoi să injectați acel serviciu ca dependență în modulele de aplicație.
  • Obiectul valoare al AngularJS poate fi utilizat pentru a injecta obiecte JavaScript simple în controlerul dvs.
  • Modulul de servicii poate fi utilizat pentru a defini serviciile dvs. personalizate care pot fi refolosite pe mai multe module AngularJS.