AngularJS Dependency Injection: koje su komponente ubačene

By: James Hartman James Hartman
Hours Ažurirano

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

Dakle, prvo shvatimo što je ovisnost.

Injekcija ovisnosti u AngularJS

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 vodiča, više ćemo pogledati ubrizgavanje ovisnosti i kako se to postiže u AngularJS-u.

Koja se komponenta može ubaciti kao ovisnost u AngularJS?

U Angular.JS, ovisnosti se ubacuju korištenjem "injectable factory method" ili "constructor function".

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

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 Angular.JS zatim daje instancu $http usluge našem kontroleru za daljnju obradu.

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 temelji se na činjenici stvaranja jednostavnog JavaScript objekt i proslijediti ga kontroleru na daljnju obradu.

Ovo se provodi pomoću sljedeća dva koraka

Korak 1) Napravite JavaObjekt skripte pomoću komponente vrijednosti i pridružite ga svom glavnom modulu AngularJS.JS.

Vrijednosna komponenta ima dva parametra; jedan je ključ, a drugi je vrijednost javascript objekta koji se kreira.

Korak 2) Pristupite JavaObjekt skripte iz Angular.JS 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>

POVEZANI ČLANCI

U gornjem primjeru koda provode se sljedeći glavni koraci

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

Funkcija vrijednosti Angular.JS JS modula koristi se za stvaranje para ključ-vrijednost pod nazivom "TutorialID" i vrijednost "5".

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

Varijabla TutorialID sada postaje dostupna kontroleru kao funkcijski parametar.

  1.  $scope.ID =TutorialID;

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

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

Komponenta vrijednosti u ubrizgavanju ovisnosti

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 Angular.JS koja kada se ubaci u vaše kontrolere pruža potrebne funkcije

( 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 usluge našeg glavnog AngularJS JS modula.

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

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

  1.  return a+b;

Ovdje definiramo tijelo naše funkcije zbrajanja koja jednostavno dodaje parametre i vraća dodanu vrijednost.

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

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

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

Sada pristupamo funkciji 'Addition' koja je definirana u našoj usluzi i dodjeljujemo je $scope objektu kontrolera.

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

Rezime

  • Dependency Injection kao što naziv implicira je proces ubrizgavanja ovisne funkcionalnosti u module tijekom izvođenja.
  • Korištenje ubrizgavanja ovisnosti pomaže u dobivanju koda koji se više može ponovno koristiti. Ako ste imali zajedničku funkcionalnost koja se koristi u više aplikacijskih modula, najbolji način je definirati središnju uslugu s tom funkcionalnošću i zatim tu uslugu umetnuti kao ovisnost u svoje aplikacijske module.
  • Objekt vrijednosti AngularJS-a može se koristiti za jednostavno ubacivanje JavaSkriptirajte objekte u svom kontroleru koristeći $inject in AngularJS.
  • Servisni modul može se koristiti za definiranje vaših prilagođenih usluga koje se mogu ponovno koristiti u više AngularJS modula.