Komponente za ubrizgavanje ovisnosti u AngularJS-u

Što je ubrizgavanje ovisnosti u AngularJS?

Injekcija ovisnosti u AngularJS je obrazac dizajna softvera koji implementira inverziju kontrole za rješavanje ovisnosti. Odlučuje kako komponente drže svoje ovisnosti. Može se koristiti tijekom definiranja komponenti ili pružanja run i config blokova modula. Omogućuje vam da komponente učinite ponovno upotrebljivim, testiranim i održavanim.

Inverzija kontrole: To znači da objekti ne stvaraju druge objekte na koje se oslanjaju da obave svoj posao. Umjesto toga, oni dobivaju te predmete iz vanjskog izvora. Ovo čini osnovu AngularJS Dependency Injection pri čemu ako jedan objekt ovisi o drugom; primarni objekt ne preuzima odgovornost za kreiranje ovisnog objekta i zatim koristi njegove metode. Umjesto toga, vanjski izvor (koji je u AngularJS-u sam okvir AngularJS) stvara zavisni objekt i daje ga izvornom objektu na daljnju upotrebu.

⚠️ Napomena o verziji: Podrška za AngularJS završila je u siječnju 2022., bez sigurnosnih zakrpa. Moderni Angular ubrizgava putem @Injectable pružatelja usluga i ubrizgati()Donji kod ostaje povijesni.

Dakle, prvo shvatimo što je ovisnost.

Gornji dijagram prikazuje jednostavan primjer AngularJS ubrizgavanja zavisnosti svakodnevnog rituala u programiranju baze podataka.

• Okvir 'Model' prikazuje "klasu modela" koja se inače stvara za interakciju s bazom podataka. Sada je baza podataka ovisnost o funkcioniranju "klase modela".
• Injektiranjem ovisnosti stvaramo uslugu za preuzimanje svih informacija iz baze podataka i ulazak u klasu modela.

U ostatku ovog tutorijala, detaljnije ćemo se pozabaviti ubrizgavanjem ovisnosti i kako se to postiže u AngularJS.

Koja se komponenta može ubrizgati kao ovisnost u AngularJS-u

U AngularJS-u, ovisnosti se ubrizgavaju pomoću "injectabilne tvorničke metode" ili "konstruktorske funkcije".

Ove komponente mogu se ubaciti s komponentama "usluga" i "vrijednost" kao ovisnosti. To smo vidjeli u prethodnoj temi s uslugom $http.

AngularJS modul registrira injektirane objekte putem pet recepata.

Već smo vidjeli da se $http usluga može koristiti unutar AngularJS-a za dobivanje podataka iz a MySQL ili MS SQL Baza podataka poslužitelja putem a PHP web aplikacija.

Usluga $http obično se definira unutar kontrolera na sljedeći način.

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

Sada kada je usluga $http definirana u kontroleru kao što je prikazano gore. To znači da kontroler sada ovisi o $http usluzi.

Dakle, kada se gornji kod izvrši, AngularJS će izvesti sljedeće korake;

1. Provjerite je li "$http usluga" instancirana. Budući da naš “kontrolor” sada ovisi o “$http servisu”, objekt ove usluge mora biti dostupan našem kontroleru.
2. Ako AngularJS otkrije da $http usluga nije instancirana, AngularJS koristi 'tvorničku' funkciju za konstruiranje $http objekta.
3. Injektor unutar AngularJS-a zatim pruža instancu $http servisa našem kontroleru za daljnju obradu.

Obrasci za bilješke: Implicitna anotacija čita imena parametara, pa ga minifikacija prekida. Inline array notacija i $inject ga preživljavaju; ng-strict-di na ng-app odbacuje implicitnu anotaciju.

Sada kada je ovisnost umetnuta u naš kontroler, sada možemo pozvati potrebne funkcije unutar $http usluge za daljnju obradu.

Primjer ubrizgavanja ovisnosti

U ovom primjeru naučit ćemo kako koristiti ubrizgavanje ovisnosti u AngularJS.

Injekcija ovisnosti može se implementirati na 2 načina

1. Jedan je kroz "komponentu vrijednosti"
2. Drugi je putem "Usluge"

Pogledajmo detaljnije provedbu oba načina.

1) Vrijednosna komponenta

Ovaj koncept se temelji na stvaranju jednostavnog JavaScript objekt i njegovo prosljeđivanje kontroleru na daljnju obradu.

Ovo se provodi pomoću sljedeća dva koraka

Korak 1) Napravite JavaSkriptirajte objekt koristeći komponentu value i priložite ga svom glavnom AngularJS modulu.

Vrijednosna komponenta poprima dva parametra; jedan je ključ, a drugi je vrijednost JavaObjekt skripte koji se kreira.

Korak 2) Pristupite JavaObjekt skripte iz AngularJS kontroler

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

Gornji kod izvršava sljedeće korake

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

   Funkcija value AngularJS modula koristi se za stvaranje para ključ-vrijednost pod nazivom „TutorialID“ i vrijednosti „5“.

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

   Varijabla TutorialID sada postaje dostupna kontroleru kao funkcijski parametar.

3.  $scope.ID =TutorialID;

   Vrijednost TutorialID-a, koja je 5, sada se dodjeljuje drugoj varijabli pod nazivom ID u $scope objekt. To se radi kako bi se vrijednost 5 mogla prenijeti s kontrolera na pogled.

4. {{ID}}

   ID parametar se prikazuje u prikazu kao izraz. Dakle, rezultat '5' bit će prikazan na stranici.

Kada se gornji kod izvrši, izlaz će biti prikazan kao ispod

2) Usluga

Usluga je definirana kao singleton JavaObjekt skripte koji se sastoji od skupa funkcija koje želite izložiti i ubaciti u svoj kontroler.

Na primjer, „$http“ je usluga u AngularJS-u koja, kada se ubrizga u vaše kontrolere, pruža potrebne funkcije za

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

Te se funkcije tada mogu pozvati s vašeg upravljača u skladu s tim.

Pogledajmo jednostavan primjer kako možete stvoriti vlastitu uslugu. Napravit ćemo jednostavnu uslugu zbrajanja koja zbraja dva broja.

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

U gornjem primjeru provode se sljedeći koraci

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

   Ovdje stvaramo novu uslugu pod nazivom 'AdditionService' koristeći parametar service našeg glavnog AngularJS modula.

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

   Ovdje stvaramo novu funkciju pod nazivom ADDITION unutar našeg servisa. To znači da kada AngularJS instancira naš AdditionService unutar našeg kontrolera, moći ćemo pristupiti funkciji 'ADDITION'. U ovoj definiciji funkcije kažemo da ova funkcija prihvaća dva parametra, a i b.

3.  return a+b;

   Ovdje definiramo tijelo naše funkcije ADDITION koja jednostavno zbraja parametre i vraća zbrajanu vrijednost.

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

   Ovo je glavni korak koji uključuje ubrizgavanje ovisnosti. U našoj definiciji kontrolera sada referenciramo našu uslugu 'AdditionService'. Kada AngularJS to vidi, instancirat će objekt tipa 'AdditionService'.

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

   Sada pristupamo funkciji 'ADDITION' koja je definirana u našem servisu i dodjeljujemo je objektu $scope kontrolera.

Dakle, ovo je jednostavan primjer kako možemo definirati našu uslugu i ubaciti funkcionalnost te usluge u naš kontroler.

Pitanja i odgovori