Atkarības injekcija AngularJS ar piemēru

Satura rādītājs:

Anonim

Kas ir atkarības injekcija AngularJS?

Dependency Injection ir programmatūras projektēšanas modelis, kas realizē vadības inversiju atkarību atrisināšanai.

Vadības inversija : tas nozīmē, ka objekti nerada citus objektus, uz kuriem viņi paļaujas, lai veiktu savu darbu. Tā vietā viņi iegūst šos objektus no ārēja avota. Tas ir atkarības injekcijas pamats, ja viens objekts ir atkarīgs no cita; primārais objekts neuzņemas atbildību par atkarīgā objekta izveidošanu un pēc tam izmanto tā metodes. Tā vietā ārējs avots (kas AngularJS ir pats AngularJS ietvars) izveido atkarīgo objektu un nodod to avota objektam turpmākai izmantošanai.

Tātad vispirms sapratīsim, kas ir atkarība.

Iepriekš redzamā diagramma parāda vienkāršu ikdienas rituāla piemēru datu bāzes programmēšanā.

  • Lodziņā “Modelis” attēlota “Modeļa klase”, kas parasti tiek izveidota, lai mijiedarbotos ar datu bāzi. Tātad tagad datu bāze ir atkarīga no tā, vai darbojas "Modeļa klase".
  • Veicot atkarības ievadīšanu, mēs izveidojam pakalpojumu, lai paņemtu visu informāciju no datu bāzes un iekļūtu modeļu klasē.

Šīs apmācības atlikušajā daļā mēs vairāk aplūkosim atkarības injicēšanu un to, kā tas tiek paveikts AngularJS.

Šajā apmācībā jūs uzzināsiet

  • Kuru komponentu var injicēt kā atkarību AngularJS
  • Atkarības injicēšanas piemērs
    • Vērtības komponents
    • apkalpošana

Kuru komponentu var injicēt kā atkarību AngularJS

Vietnē Angular.JS atkarības tiek ievadītas, izmantojot "injicējamo rūpnīcas metodi" vai "konstruktora funkciju".

Šajos komponentos kā atkarības var ievadīt "servisa" un "vērtības" komponentus. Mēs to redzējām iepriekšējā tēmā ar pakalpojumu $ http.

Mēs jau redzējām, ka pakalpojumu $ http var izmantot AngularJS, lai iegūtu datus no MySQL vai MS SQL Server datu bāzes, izmantojot PHP tīmekļa lietojumprogrammu.

Pakalpojumu $ http parasti definē kontrolierī šādā veidā.

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

Tagad, kad kontrolierī ir definēts pakalpojums $ http, kā parādīts iepriekš. Tas nozīmē, ka kontrolieris tagad ir atkarīgs no pakalpojuma $ http.

Tātad, kad tiks izpildīts iepriekš minētais kods, AngularJS veiks šādas darbības;

  1. Pārbaudiet, vai "$ http pakalpojums" ir instantiated. Tā kā mūsu "kontrolieris" tagad ir atkarīgs no "$ http pakalpojuma", šī pakalpojuma objekts ir jādara pieejams mūsu kontrolierim.
  2. Ja AngularJS uzzina, ka pakalpojums $ http nav eksemplārs, AngularJS izmanto $ factory objektu, lai izveidotu objektu $ http.
  3. Pēc tam Angular.JS inžektors mūsu kontrolierim nodrošina $ http pakalpojuma eksemplāru tālākai apstrādei.

Tagad, kad atkarība ir ievadīta mūsu kontrolierī, mēs varam izmantot nepieciešamās funkcijas pakalpojumā $ http tālākai apstrādei.

Atkarības injicēšanas piemērs

Atkarības injekciju var īstenot divos veidos

  1. Viens no tiem ir caur "vērtības komponentu"
  2. Cits ir caur "pakalpojumu"

Apskatīsim detalizētāk abu veidu ieviešanu.

1) vērtības komponents

Šīs koncepcijas pamatā ir vienkārša JavaScript objekta izveidošana un nodošana kontrolierim tālākai apstrādei.

To īsteno, izmantojot divas tālāk norādītās darbības

1. darbība. Izmantojot vērtības komponentu, izveidojiet JavaScript objektu un pievienojiet to galvenajam AngularJS.JS modulim.

Vērtības komponents iegūst divus parametrus; viens ir atslēga, bet otrs ir izveidotā javascript objekta vērtība.

2. solis. Piekļūstiet JavaScript objektam no Angular.JS kontroliera

Event Registration


Guru99 Global Event

{{ID}}

Iepriekš minētajā koda piemērā tiek veikti šādi galvenie soļi

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

Angular.JS JS moduļa vērtību funkcija tiek izmantota, lai izveidotu atslēgu un vērtību pāri ar nosaukumu "TutorialID" un vērtību "5".

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

Mainīgais TutorialID tagad kļūst pieejams kontrolierim kā funkcijas parametrs.

  1.  $scope.ID =TutorialID;

TutorialID vērtība, kas ir 5, tagad tiek piešķirta citam mainīgajam ar nosaukumu ID objektā $ scope. Tas tiek darīts, lai vērtību 5 varētu nodot kontrolierim skatam.

  1. {{ID}}

ID parametrs tiek parādīts skatā kā izteiksme. Tātad '5' izeja tiks parādīta lapā.

Kad iepriekšējais kods ir izpildīts, izeja tiks parādīta kā zemāk

2) Apkalpošana

Pakalpojums ir definēts kā vienots JavaScript objekts, kas sastāv no funkciju kopas, kuras vēlaties pakļaut un ievadīt kontrolierī.

Piemēram, "$ http" ir pakalpojums Angular.JS, kas, ievadot jūsu kontrolieros, nodrošina nepieciešamās funkcijas

(get (), vaicājums (), saglabāt (), noņemt (), dzēst ()).

Pēc tam šīs funkcijas var attiecīgi izsaukt no kontroliera.

Apskatīsim vienkāršu piemēru, kā jūs varat izveidot savu pakalpojumu. Mēs gatavojamies izveidot vienkāršu papildināšanas pakalpojumu, kurā tiek pievienoti divi skaitļi.

Event Registration

Guru99 Global Event




Result: {{result}}

Iepriekš minētajā piemērā tiek veiktas šādas darbības

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

Šeit mēs izveidojam jaunu pakalpojumu ar nosaukumu “AdditionService”, izmantojot galvenā AngularJS JS moduļa servisa parametru.

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

Šeit mēs savā pakalpojumā izveidojam jaunu funkciju ar nosaukumu Addition. Tas nozīmē, ka tad, kad AngularJS mūsu kontroliera iekšpusē veic mūsu AdditionService darbību, mēs tad varēsim piekļūt funkcijai “Papildinājums”. Šajā funkcijas definīcijā mēs sakām, ka šī funkcija pieņem divus parametrus - a un b.

  1.  return a+b;

Šeit mēs definējam mūsu papildināšanas funkcijas pamattekstu, kas vienkārši pievieno parametrus un atgriež pievienoto vērtību.

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

Šis ir galvenais solis, kas saistīts ar atkarības injicēšanu. Mūsu kontroliera definīcijā mēs tagad atsaucamies uz mūsu pakalpojumu “AdditionService”. Kad tas ir redzams AngularJS, tas veiks objektu, kura tips ir “AdditionService”.

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

Tagad mēs piekļūstam funkcijai “Papildinājums”, kas ir definēta mūsu pakalpojumā, un piešķiram to kontroliera objektam $ scope.

Šis ir vienkāršs piemērs tam, kā mēs varam definēt savu pakalpojumu un ievadīt šī pakalpojuma funkcionalitāti mūsu kontrolierī.

Kopsavilkums:

  • Atkarības injicēšana, kā norāda nosaukums, ir process, kurā darbības laikā tiek ievadīta atkarīga funkcionalitāte moduļos.
  • Atkarības injekcijas izmantošana palīdz iegūt vairāk izmantojamu kodu. Ja jums bija kopīga funkcionalitāte, kas tiek izmantota vairākos lietojumprogrammu moduļos, labākais veids ir definēt centrālo pakalpojumu ar šo funkcionalitāti un pēc tam ievadīt šo pakalpojumu kā atkarību no lietojumprogrammu moduļiem.
  • AngularJS vērtības objektu var izmantot, lai kontrolierī ievadītu vienkāršus JavaScript objektus.
  • Pakalpojumu moduli var izmantot, lai definētu pielāgotos pakalpojumus, kurus var atkārtoti izmantot vairākos AngularJS moduļos.