Инжектиране на зависимост в AngularJS с пример

Съдържание:

Anonim

Какво представлява инжектирането на зависимост в AngularJS?

Dependency Injection е модел на софтуерен дизайн, който реализира инверсия на контрол за разрешаване на зависимости.

Обръщане на контрола : Това означава, че обектите не създават други обекти, върху които разчитат да си вършат работата. Вместо това те получават тези обекти от външен източник. Това формира основата на инжектиране на зависимост, при което ако един обект зависи от друг; първичният обект не поема отговорността за създаването на зависимия обект и след това използва неговите методи. Вместо това външен източник (който в AngularJS е самата рамка AngularJS) създава зависимия обект и го дава на обекта източник за по-нататъшно използване.

Така че нека първо разберем какво е зависимост.

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

  • В полето „Модел“ е изобразен „Модел клас“, който обикновено е създаден за взаимодействие с базата данни. Така че сега базата данни е зависимост, за да функционира "Модел клас".
  • Чрез инжектиране на зависимости създаваме услуга, която да вземе цялата информация от базата данни и да влезе в класа на модела.

В останалата част от този урок ще разгледаме повече инжектирането на зависимости и как това се постига в AngularJS.

В този урок ще научите -

  • Кой компонент може да бъде инжектиран като зависимост в AngularJS
  • Пример за инжектиране на зависимост
    • Стойностен компонент
    • Обслужване

Кой компонент може да бъде инжектиран като зависимост в AngularJS

В Angular.JS зависимостите се инжектират чрез "инжекционен фабричен метод" или "конструкторска функция".

Тези компоненти могат да бъдат инжектирани с компоненти "услуга" и "стойност" като зависимости. Видяхме това в по-ранна тема с услугата $ http.

Вече видяхме, че услугата $ http може да се използва в AngularJS за получаване на данни от база данни на MySQL или MS SQL Server чрез уеб приложение PHP.

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

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

Сега, когато услугата $ http е дефинирана в контролера, както е показано по-горе. Това означава, че контролерът вече има зависимост от услугата $ http.

Така че, когато горният код бъде изпълнен, AngularJS ще изпълни следните стъпки;

  1. Проверете дали "$ http услугата" е била създадена. Тъй като нашият "контролер" сега зависи от "$ http услугата", обект на тази услуга трябва да бъде предоставен на нашия контролер.
  2. Ако AngularJS установи, че услугата $ http не е създадена, AngularJS използва функцията "фабрика", за да изгради $ http обект.
  3. След това инжекторът в Angular.JS предоставя екземпляр на услугата $ http на нашия контролер за по-нататъшна обработка.

Сега, когато зависимостта се инжектира в нашия контролер, вече можем да извикаме необходимите функции в услугата $ http за по-нататъшна обработка.

Пример за инжектиране на зависимост

Инжектирането на зависимост може да се осъществи по 2 начина

  1. Единият е чрез "Компонент на стойността"
  2. Друг е чрез "Услуга"

Нека разгледаме изпълнението на двата начина по-подробно.

1) Стойност компонент

Тази концепция се основава на факта, че създавате прост JavaScript обект и го предавате на контролера за по-нататъшна обработка.

Това се изпълнява, като се използват следните две стъпки

Стъпка 1) Създайте JavaScript обект с помощта на компонента стойност и го прикачете към основния си модул AngularJS.JS.

Стойният компонент приема два параметъра; единият е ключът, а другият е стойността на създадения javascript обект.

Стъпка 2) Достъп до JavaScript обекта от контролера Angular.JS

Event Registration


Guru99 Global Event

{{ID}}

В горния пример за код се изпълняват основните стъпки по-долу

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

Функцията стойност на модула Angular.JS JS се използва за създаване на двойка ключ-стойност, наречена "TutorialID" и стойността на "5".

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

Променливата TutorialID вече става достъпна за контролера като функционален параметър.

  1.  $scope.ID =TutorialID;

Стойността на TutorialID, която е 5, сега се присвоява на друга променлива, наречена ID в обекта $ scope. Това се прави, за да може стойността 5 да се предаде от контролера към изгледа.

  1. {{ДОКУМЕНТ ЗА САМОЛИЧНОСТ}}

Параметърът ID се показва в изгледа като израз. Така изходът на '5' ще се покаже на страницата.

Когато горният код бъде изпълнен, изходът ще бъде показан, както е показано по-долу

2) Обслужване

Услугата се дефинира като единичен JavaScript обект, състоящ се от набор от функции, които искате да изложите и инжектирате във вашия контролер.

Например "$ http" е услуга в Angular.JS, която при инжектиране във вашите контролери предоставя необходимите функции на

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

След това тези функции могат да бъдат извикани от вашия контролер съответно.

Нека разгледаме един прост пример за това как можете да създадете своя собствена услуга. Ще създадем проста услуга за добавяне, която добавя две числа.

Event Registration

Guru99 Global Event




Result: {{result}}

В горния пример се изпълняват следните стъпки

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

Тук създаваме нова услуга, наречена „AdditionService“, използвайки параметъра на услугата на нашия основен модул AngularJS JS.

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

Тук създаваме нова функция, наречена Addition в рамките на нашата услуга. Това означава, че когато AngularJS инстанцира нашата AdditionService вътре в нашия контролер, ние ще имаме достъп до функцията 'Addition'. В тази дефиниция на функцията казваме, че тази функция приема два параметъра, a и b.

  1.  return a+b;

Тук дефинираме тялото на нашата функция Addition, което просто добавя параметрите и връща добавената стойност.

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

Това е основната стъпка, която включва инжектиране на зависимост. В нашата дефиниция на контролер, сега се позоваваме на нашата услуга „AdditionService“. Когато AngularJS види това, той ще създаде екземпляр на обект от типа „AdditionService“.

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

Сега имаме достъп до функцията „Добавяне“, която е дефинирана в нашата услуга, и я присвояваме на обекта $ scope на контролера.

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

Резюме:

  • Инжектирането на зависимост, както подсказва името, е процесът на инжектиране на зависима функционалност в модули по време на изпълнение.
  • Използването на инжектиране на зависимости помага при получаването на по-многократно използваем код. Ако сте имали обща функционалност, която се използва в множество модули за приложения, най-добрият начин е да дефинирате централна услуга с тази функционалност и след това да инжектирате тази услуга като зависимост във вашите модули за приложения.
  • Обектът стойност на AngularJS може да се използва за инжектиране на прости обекти на JavaScript във вашия контролер.
  • Сервизният модул може да се използва за дефиниране на вашите потребителски услуги, които могат да се използват повторно в множество модули AngularJS.