Ін’єкція залежності в AngularJS з прикладом

Що таке ін’єкція залежності в AngularJS?

Dependency Injection - це шаблон дизайну програмного забезпечення, який реалізує інверсію управління для розв’язання залежностей.

Інверсія контролю : Це означає, що об’єкти не створюють інших об’єктів, на яких вони покладаються, щоб виконувати свою роботу. Натомість вони отримують ці об’єкти із зовнішнього джерела. Це складає основу введення залежності, коли, якщо один об'єкт залежить від іншого; первинний об'єкт не бере на себе відповідальність за створення залежного об'єкта, а потім використовує його методи. Натомість зовнішнє джерело (яке в AngularJS - це сам фреймворк AngularJS) створює залежний об’єкт і передає його об’єкту-джерелу для подальшого використання.

Тож давайте спочатку зрозуміємо, що таке залежність.

Наведена схема показує простий приклад повсякденного ритуалу в програмуванні баз даних.

У полі "Модель" зображено "Клас моделі", який зазвичай створюється для взаємодії з базою даних. Отже, база даних - це залежність для функціонування «Класу моделі».
За допомогою ін’єкції залежностей ми створюємо службу, щоб отримати всю інформацію з бази даних і потрапити до класу моделі.

У решті цього підручника ми докладніше розглянемо введення залежностей та те, як це робиться в AngularJS.

У цьому підручнику ви дізнаєтесь-

Який компонент можна ввести як залежність у AngularJS
Приклад введення залежності

Ціннісна складова
Обслуговування

Який компонент можна ввести як залежність у AngularJS

У Angular.JS залежності вводяться за допомогою "ін'єкційного фабричного методу" або "функції конструктора".

Ці компоненти можна вводити з компонентами "service" та "value" як залежності. Ми бачили це в попередній темі служби $ http.

Ми вже бачили, що службу $ http можна використовувати в AngularJS для отримання даних із бази даних MySQL або MS SQL Server через веб-додаток PHP.

Служба $ http зазвичай визначається зсередини контролера наступним чином.

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

Тепер, коли служба $ http визначена в контролері, як показано вище. Це означає, що контролер тепер має залежність від служби $ http.

Отже, коли вищезазначений код виконується, AngularJS виконає наступні кроки;

Перевірте, чи не було інстанційовано службу "$ http". Оскільки наш "контролер" тепер залежить від "служби $ http", об'єкт цієї служби повинен бути доступним для нашого контролера.
Якщо AngularJS виявляє, що служба $ http не створена, AngularJS використовує функцію 'factory' для побудови об'єкта $ http.
Потім інжектор в Angular.JS надає екземпляр служби $ http нашому контролеру для подальшої обробки.

Тепер, коли залежність введена в наш контролер, тепер ми можемо викликати необхідні функції служби $ http для подальшої обробки.

Приклад введення залежності

Введення залежності можна здійснити двома способами

Один - через "Значущий компонент"
Інший - через "Сервіс"

Давайте розглянемо реалізацію обох способів більш докладно.

1) Ціннісна складова

Ця концепція базується на створенні простого об'єкта JavaScript і передачі його контролеру для подальшої обробки.

Це реалізується, використовуючи наступні два кроки

Крок 1) Створіть об’єкт JavaScript за допомогою компонента значення та приєднайте його до свого основного модуля AngularJS.JS.

Складова значення приймає два параметри; один - це ключ, а інший - значення створеного об’єкта javascript.

Крок 2) Доступ до об’єкта JavaScript із контролера Angular.JS

Event Registration
Guru99 Global Event
{{ID}}

У наведеному вище прикладі коду виконуються наведені нижче основні кроки

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

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

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

Змінна TutorialID тепер стає доступною для контролера як функціональний параметр.

```
 $scope.ID =TutorialID;
```

Значення TutorialID, яке дорівнює 5, тепер присвоюється іншій змінній, яка називається ID в об'єкті $ scope. Це робиться для того, щоб значення 5 можна було передати від контролера у подання.

```
{{ID}}
```

Параметр ID відображається у поданні як вираз. Тож результат "5" буде відображатися на сторінці.

Коли виконується наведений вище код, результат буде показаний, як показано нижче

2) Обслуговування

Послуга визначається як односторонній об'єкт JavaScript, що складається з набору функцій, які ви хочете відкрити та ввести у ваш контролер.

Наприклад, "$ http" - це послуга в Angular.JS, яка при введенні у ваші контролери забезпечує необхідні функції

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

Потім ці функції можна відповідно викликати з вашого контролера.

Давайте розглянемо простий приклад того, як ви можете створити власну послугу. Ми збираємося створити просту службу додавання, яка додає два числа.

Event Registration
Guru99 Global Event

Result: {{result}}

У наведеному вище прикладі виконуються наступні кроки

 mainApp.service('AdditionService', function()

Тут ми створюємо нову службу під назвою 'AdditionService', використовуючи параметр служби нашого головного модуля AngularJS JS.

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

Тут ми створюємо нову функцію під назвою Додавання в рамках нашого сервісу. Це означає, що коли AngularJS створює екземпляр нашої AdditionService всередині нашого контролера, ми зможемо отримати доступ до функції 'Addition'. У цьому визначенні функції ми говоримо, що ця функція приймає два параметри, a і b.

```
 return a+b; 
```

Тут ми визначаємо тіло нашої функції Додавання, яке просто додає параметри і повертає додане значення.

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

Це основний крок, який передбачає введення залежності. У нашому визначенні контролера ми зараз посилаємось на нашу службу "AdditionService". Коли AngularJS побачить це, він створить екземпляр об'єкта типу "AdditionService."

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

Зараз ми отримуємо доступ до функції "Додавання", яка визначена в нашому сервісі, і призначаємо її об'єкту $ scope контролера.

Отже, це простий приклад того, як ми можемо визначити нашу послугу та внести функціональність цієї послуги всередину нашого контролера.

Короткий зміст:

Інжекція залежностей, як випливає з назви, - це процес введення залежною функціональності в модулі під час виконання.
Використання ін’єкції залежностей допомагає отримати код, який можна використовувати повторно. Якщо у вас була загальна функціональність, яка використовується в декількох модулях програми, найкращий спосіб - визначити центральну службу з цією функціональністю, а потім ввести цю послугу як залежність у ваші модулі програми.
Об'єкт значення AngularJS можна використовувати для введення простих об'єктів JavaScript у ваш контролер.
Сервісний модуль можна використовувати для визначення ваших користувацьких служб, які можна використовувати повторно в декількох модулях AngularJS.