Priklausomybės įpurškimas kampiniu JS su pavyzdžiu

Kas yra priklausomybės injekcija „AngularJS“?

„Dependency Injection“ yra programinės įrangos projektavimo modelis, įgyvendinantis valdymo inversiją, siekiant išspręsti priklausomybes.

Valdymo inversija : tai reiškia, kad objektai nesukuria kitų objektų, kuriais remiasi atlikdami savo darbą. Vietoj to, jie gauna šiuos objektus iš išorinio šaltinio. Tai sudaro priklausomybės injekcijos pagrindą, kur vienas objektas priklauso nuo kito; pagrindinis objektas neprisiima atsakomybės už priklausomo objekto sukūrimą ir tada naudoja jo metodus. Vietoj to, išorinis šaltinis (kuris „AngularJS“ yra pats „AngularJS“ pagrindas) sukuria priklausomą objektą ir atiduoda jį šaltinio objektui toliau naudoti.

Taigi pirmiausia supraskime, kas yra priklausomybė.

Aukščiau pateiktoje diagramoje parodytas paprastas kasdienio ritualo pavyzdys programuojant duomenų bazę.

  • Langelyje „Modelis“ pavaizduota „Modelio klasė“, kuri paprastai sukurta sąveikai su duomenų baze. Taigi dabar duomenų bazė priklauso nuo „Model class“ veikimo.
  • Atliekant priklausomybės injekciją, mes sukuriame paslaugą, skirtą paimti visą informaciją iš duomenų bazės ir patekti į modelių klasę.

Likusioje šios pamokos dalyje mes daugiau nagrinėsime priklausomybės injekciją ir tai, kaip tai pasiekiama naudojant „AngularJS“.

Šioje pamokoje sužinosite

  • Kuris komponentas gali būti švirkščiamas kaip kampinio JS priklausomybė
  • Priklausomybės injekcijos pavyzdys
    • Vertės komponentas
    • Aptarnavimas

Kuris komponentas gali būti švirkščiamas kaip kampinio JS priklausomybė

„Angular.JS“ priklausomybės įvedamos naudojant „injekcinį gamyklos metodą“ arba „konstruktoriaus funkciją“.

Šiems komponentams gali būti įpurškiami „aptarnavimo“ ir „vertės“ komponentai kaip priklausomybės. Tai matėme ankstesnėje temoje, kur naudojama „$ http“ paslauga.

Mes jau matėme, kad „$ http“ paslauga gali būti naudojama „AngularJS“ sistemoje norint gauti duomenis iš „MySQL“ arba „MS SQL Server“ duomenų bazės per PHP žiniatinklio programą.

$ Http paslauga paprastai apibrėžiama valdiklyje tokiu būdu.

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

Dabar, kai valdiklyje $ http paslauga yra apibrėžta, kaip parodyta aukščiau. Tai reiškia, kad valdiklis dabar priklauso nuo paslaugos $ http.

Taigi, kai bus įvykdytas minėtas kodas, „AngularJS“ atliks šiuos veiksmus;

  1. Patikrinkite, ar „$ http paslauga“ buvo supaprastinta. Kadangi mūsų „valdiklis“ dabar priklauso nuo „$ http paslaugos“, šios tarnybos objektas turi būti prieinamas mūsų valdytojui.
  2. Jei „AngularJS“ sužino, kad „$ http“ paslauga nėra momentinė, „AngularJS“ naudoja „fabriko“ funkciją, kad sukurtumėte „$ http“ objektą.
  3. Tada „Angular.JS“ purkštukas mūsų valdikliui pateikia $ http paslaugos egzempliorių tolesniam apdorojimui.

Dabar, kai priklausomybė įvedama į mūsų valdiklį, dabar galime pasinaudoti būtinomis paslaugomis $ http tolesniam apdorojimui.

Priklausomybės injekcijos pavyzdys

Priklausomybės injekciją galima įgyvendinti dviem būdais

  1. Vienas yra per „vertės komponentą“
  2. Kitas yra per „tarnybą“

Pažvelkime į abiejų būdų įgyvendinimą išsamiau.

1) vertės komponentas

Ši koncepcija pagrįsta paprasto „JavaScript“ objekto sukūrimo faktu ir perduoti jį valdikliui tolesniam apdorojimui.

Tai įgyvendinama atlikus du toliau nurodytus veiksmus

1 žingsnis) Naudodami vertės komponentą, sukurkite „JavaScript“ objektą ir pridėkite jį prie pagrindinio „AngularJS.JS“ modulio.

Vertės komponentas įgauna du parametrus; vienas yra raktas, o kitas - sukurto „javascript“ objekto vertė.

2 žingsnis. Prieiga prie „JavaScript“ objekto iš „Angular.JS“ valdiklio

Event Registration


Guru99 Global Event

{{ID}}

Pirmiau pateiktame kodo pavyzdyje atliekami toliau nurodyti pagrindiniai veiksmai

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

„Angular.JS JS“ modulio vertės funkcija naudojama kuriant raktų ir verčių porą, vadinamą „TutorialID“, ir reikšmę „5“.

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

Dabar „TutorialID“ kintamasis valdikliui tampa prieinamas kaip funkcijos parametras.

  1.  $scope.ID =TutorialID;

„TutorialID“ vertė, kuri yra 5, dabar priskiriama kitam kintamajam, vadinamam ID, objekte $ scope. Tai daroma tam, kad 5 reikšmę būtų galima perduoti iš valdiklio į rodinį.

  1. {{ID}}

ID parametras rodinyje rodomas kaip išraiška. Taigi „5“ išvestis bus rodoma puslapyje.

Kai bus įvykdytas aukščiau pateiktas kodas, išvestis bus rodoma taip, kaip nurodyta toliau

2) aptarnavimas

Paslauga apibrėžiama kaip pavienis „JavaScript“ objektas, susidedantis iš funkcijų rinkinio, kurį norite atidaryti ir įvesti į valdiklį.

Pvz., „$ Http“ yra „Angular.JS“ paslauga, kuri, įvedus į jūsų valdiklius, teikia būtinas funkcijas

(gauti (), užklausą (), išsaugoti (), pašalinti (), ištrinti ()).

Tada šias funkcijas galite atitinkamai iškviesti iš savo valdiklio.

Pažvelkime į paprastą pavyzdį, kaip galite sukurti savo paslaugą. Mes sukursime paprastą papildymo paslaugą, kuri pridės du skaičius.

Event Registration

Guru99 Global Event




Result: {{result}}

Ankstesniame pavyzdyje atliekami šie veiksmai

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

Čia mes kuriame naują paslaugą pavadinimu „AdditionService“, naudodami pagrindinio „AngularJS JS“ modulio paslaugų parametrą.

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

Čia mes kuriame naują funkciją, pavadintą „Addition“. Tai reiškia, kad kai „AngularJS“ valdiklyje užfiksuos mūsų „AdditionService“, tada galėsime pasiekti funkciją „Papildymas“. Šiame funkcijos apibrėžime sakome, kad ši funkcija priima du parametrus - a ir b.

  1.  return a+b;

Čia mes apibrėžiame mūsų papildymo funkcijos kūną, kuris paprasčiausiai prideda parametrus ir grąžina pridėtinę vertę.

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

Tai yra pagrindinis žingsnis, susijęs su priklausomybės injekcija. Pagal savo valdiklio apibrėžimą mes dabar nurodome savo paslaugą „AdditionService“. Kai „AngularJS see“ tai mato, jis sužadins „AdditionService“ tipo objektą.

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

Dabar mes pasiekiame funkciją „Papildymas“, kuri yra apibrėžta mūsų paslaugoje, ir priskiriame ją valdiklio objektui $ sritis.

Taigi tai yra paprastas pavyzdys, kaip mes galime apibrėžti savo paslaugą ir įterpti šios paslaugos funkcionalumą į savo valdiklį.

Santrauka:

  • Priklausomybės įpurškimas, kaip rodo pavadinimas, yra procesas, kai veikimo metu į modulius įpurškiama priklausoma funkcija.
  • Priklausomybės injekcijos naudojimas padeda gauti daugiau pakartotinai naudojamo kodo. Jei turėjote bendrą funkciją, kuri naudojama keliuose programų moduliuose, geriausias būdas yra apibrėžti centrinę paslaugą su ta funkcija ir tada įterpti tą paslaugą kaip priklausomybę į programos modulius.
  • „AngularJS“ vertės objektas gali būti naudojamas paprastiems „JavaScript“ objektams įvesti į jūsų valdiklį.
  • Aptarnavimo modulis gali būti naudojamas apibrėžti jūsų pasirinktines paslaugas, kurias galima pakartotinai naudoti keliuose „AngularJS“ moduliuose.

Įdomios straipsniai...