Ињекција зависности у АнгуларЈС са примером

Преглед садржаја:

Anonim

Шта је ињекција зависности у АнгуларЈС?

Ињекција зависности је образац софтверског дизајна који имплементира инверзију контроле за решавање зависности.

Инверзија контроле : То значи да објекти не стварају друге предмете на којима се ослањају да раде свој посао. Уместо тога, те предмете добијају из спољног извора. Ово чини основу убризгавања зависности при чему ако је један објекат зависан од другог; примарни објекат не преузима одговорност за стварање зависног објекта, а затим користи његове методе. Уместо тога, спољни извор (који је у АнгуларЈС-у сам АнгуларЈС оквир) ствара зависни објекат и даје га изворном објекту за даљу употребу.

Па хајде да прво схватимо шта је зависност.

Горњи дијаграм приказује једноставан пример свакодневног ритуала у програмирању база података.

  • Поље „Модел“ приказује „класу модела“ која је обично креирана за интеракцију са базом података. Дакле, сада је база података зависност за функционисање „класе модела“.
  • Убризгавањем зависности креирамо услугу за прикупљање свих података из базе података и улазак у класу модела.

У остатку овог водича више ћемо размотрити убризгавање зависности и како се то постиже у АнгуларЈС.

У овом упутству ћете научити-

  • Која се компонента може убризгати као зависност у АнгуларЈС
  • Пример убризгавања зависности
    • Вредносна компонента
    • Услуга

Која се компонента може убризгати као зависност у АнгуларЈС

У Ангулар.ЈС, зависности се убризгавају коришћењем „ињекционе фабричке методе“ или „функције конструктора“.

Ове компоненте се могу убризгати са компонентама „услуга“ и „вредност“ као зависности. То смо видели у ранијој теми са услугом $ хттп.

Већ смо видели да се услуга $ хттп може користити у оквиру АнгуларЈС за добијање података из МиСКЛ или МС СКЛ Сервер базе података путем ПХП веб апликације.

Услуга $ хттп се обично дефинише у оквиру контролера на следећи начин.

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

Сада када је $ хттп услуга дефинисана у контролеру као што је горе приказано. То значи да контролер сада зависи од $ хттп услуге.

Дакле, када се горњи код изврши, АнгуларЈС ће извршити следеће кораке;

  1. Проверите да ли је инстанца „$ хттп услуге“ покренута. Будући да наш „контролер“ сада зависи од „$ хттп услуге“, објекат ове услуге мора бити доступан нашем контролору.
  2. Ако АнгуларЈС открије да $ хттп услуга није инстанцирана, АнгуларЈС користи функцију 'фацтори' за конструкцију $ хттп објекта.
  3. Убризгач у оквиру Ангулар.ЈС затим пружа инстанцу $ хттп услуге нашем контролеру за даљу обраду.

Сада када се зависност убризгава у наш контролер, сада можемо да позовемо потребне функције унутар $ хттп услуге за даљу обраду.

Пример убризгавања зависности

Ињекција зависности може се применити на 2 начина

  1. Један је кроз „компоненту вредности“
  2. Други је преко „Услуге“

Размотримо детаљније примену оба начина.

1) Вредносна компонента

Овај концепт заснован је на чињеници стварања једноставног ЈаваСцрипт објекта и прослеђивања контролеру на даљу обраду.

Ово се примењује у следећа два корака

Корак 1) Креирајте ЈаваСцрипт објекат помоћу компоненте вредности и прикачите га на свој главни модул АнгуларЈС.ЈС.

Компонента вредности поприма два параметра; један је кључ, а други вредност јавасцрипт објекта који је створен.

Корак 2) Приступите ЈаваСцрипт објекту из контролера Ангулар.ЈС

Event Registration


Guru99 Global Event

{{ID}}

У горњем примеру кода се изводе доњи главни кораци

  1. самплеАпп.валуе ("ТуториалИД", 5);

Функција вредности модула Ангулар.ЈС ЈС користи се за стварање пара кључ / вредност под називом „ТуториалИД“ и вредности „5“.

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

Променљива ТуториалИД сада постаје доступна контролору као параметар функције.

  1.  $scope.ID =TutorialID;

Вредност ТуториалИД-а која је 5, сада се додељује другој променљивој која се зове ИД у објекту $ сцопе. То се ради како би се вредност 5 могла пренети из контролера у приказ.

  1. {{ИД}}

Параметар ИД приказује се у приказу као израз. Тако ће излаз '5' бити приказан на страници.

Када се изврши горњи код, излаз ће бити приказан као испод

2) Услуга

Услуга је дефинисана као једнократни ЈаваСцрипт објекат који се састоји од скупа функција које желите да изложите и убризгате у свој контролер.

На пример, „$ хттп“ је услуга у Ангулар.ЈС која када се убризга у ваше контролере пружа потребне функције

(гет (), куери (), саве (), ремове (), делете ()).

Тада се у складу с тим могу позвати ове функције од вашег контролера.

Погледајмо једноставан пример како можете да креирате сопствену услугу. Направићемо једноставну услугу сабирања која додаје два броја.

Event Registration

Guru99 Global Event




Result: {{result}}

У горњем примеру су изведени следећи кораци

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

Овде креирамо нову услугу која се назива „АддитионСервице“ користећи параметар услуге нашег главног АнгуларЈС ЈС модула.

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

Овде креирамо нову функцију звану Додавање у оквиру наше услуге. То значи да када АнгуларЈС инстанцира нашу АддитионСервице унутар нашег контролера, ми бисмо тада могли да приступимо функцији 'Додавање'. У овој дефиницији функције кажемо да ова функција прихвата два параметра, а и б.

  1.  return a+b;

Овде дефинишемо тело наше функције Аддитион која једноставно додаје параметре и враћа додану вредност.

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

Ово је главни корак који укључује ињекцију зависности. У нашој дефиницији контролера, сада се позивамо на нашу услугу „АддитионСервице“. Када АнгуларЈС види ово, инстанцираће објекат типа 'АддитионСервице.'

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

Сада приступамо функцији „Додавање“ која је дефинисана у нашој услузи и додељујемо је објекту $ сцопе контролера.

Дакле, ово је једноставан пример како можемо да дефинишемо нашу услугу и убризгамо функционалност те услуге унутар нашег контролера.

Резиме:

  • Ињецтион зависности као што назив говори је процес убризгавања зависне функционалности у модуле током извођења.
  • Коришћење убризгавања зависности помаже у добијању вишекратног кода. Ако сте имали заједничку функционалност која се користи у више апликативних модула, најбољи начин је дефинисање централне услуге с том функционалношћу, а затим убризгавање те услуге као зависности у ваше апликационе модуле.
  • Објекат вредности АнгуларЈС може се користити за убризгавање једноставних ЈаваСцрипт објеката у ваш контролер.
  • Сервисни модул се може користити за дефинисање ваших прилагођених услуга које се могу поново користити у више модула АнгуларЈС.