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

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

Ін'єкційна залежність в AngularJS — це шаблон проектування програмного забезпечення, який реалізує інверсію керування для вирішення залежностей. Він вирішує, як компоненти зберігають свої залежності. Його можна використовувати під час визначення компонентів або надання блоків запуску та конфігурації модуля. Це дозволяє зробити компоненти придатними для багаторазового використання, тестування та обслуговування.

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

⚠️ Примітка до версії: Підтримка AngularJS припинилася у січні 2022 року, без патчів безпеки. Сучасний Angular здійснює інжекції через провайдерів @Injectable та ввести()Наведений нижче код залишається історичним.

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

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

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

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

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

В AngularJS залежності впроваджуються за допомогою «впровадженого фабричного методу» або «функції-конструктора».

До цих компонентів можна додати компоненти «служба» та «значення» як залежності. Ми бачили це в попередній темі про службу $http.

AngularJS Модулі реєструє ін'єкційні об'єкти за допомогою п'яти рецептів.

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

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

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

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

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

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

Форми анотацій: Неявна анотація зчитує імена параметрів, тому мініфікація порушує її. Нотація вбудованих масивів та $inject обидві переживають це; ng-strict-di на ng-app відхиляє неявну анотацію.

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

Приклад ін’єкції залежності

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

Ін’єкцію залежностей можна реалізувати двома способами

1. Один – через «компонент вартості»
2. Інший через «Сервіс»

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

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

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

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

Крок 1) Створити JavaНапишіть об'єкт скрипта, використовуючи компонент value, та приєднайте його до вашого основного модуля AngularJS.

Компонент значення приймає два параметри; один є ключем, а інший – значенням JavaОб'єкт скрипту, який створюється.

Крок 2) Доступ JavaОб'єкт сценарію з Контролер AngularJS

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>

</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="sampleApp">

<div ng-controller="AngularJSController">
    <h3> Guru99 Global Event</h3>
    {{ID}}
</div>
<script>

    var sampleApp = angular.module('sampleApp',[]);
    sampleApp.value("TutorialID", 5);
    sampleApp.controller('AngularJSController', function($scope,TutorialID) {
        $scope.ID =TutorialID;
    });

</script>
</body>
</html>

Наведений вище код виконує наведені нижче кроки

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

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

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

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

3.  $scope.ID =TutorialID;

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

4. {{ID}}

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

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

2) Сервіс

Сервіс визначається як одиночний JavaОб’єкт сценарію, що складається з набору функцій, які ви хочете надати та впровадити у свій контролер.

Наприклад, «$http» – це сервіс в AngularJS, який при впровадженні в контролери забезпечує необхідні функції

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

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

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

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>

</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<h3> Guru99 Global Event</h3>

<div ng-app = "mainApp" ng-controller = "DemoController">
    <p>Result: {{result}}</p>
</div>
<script>
    var mainApp = angular.module("mainApp", []);

    mainApp.service('AdditionService', function(){
        this.ADDITION = function(a,b) {
            return a+b;
        }
    });

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

            $scope.result = AdditionService.ADDITION(5,6);
    });
</script>

</body>
</html>

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

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

   Тут ми створюємо новий сервіс під назвою «AdditionService», використовуючи параметр service нашого основного модуля AngularJS.

2.  this.ADDITION = function(a,b)

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

3.  return a+b;

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

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

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

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

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

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

Поширені запитання