Впровадження залежностей AngularJS: які компоненти впроваджено
Що таке ін’єкція залежностей в AngularJS?
Ін'єкційна залежність в AngularJS — це шаблон проектування програмного забезпечення, який реалізує інверсію керування для вирішення залежностей. Він вирішує, як компоненти зберігають свої залежності. Його можна використовувати під час визначення компонентів або надання блоків запуску та конфігурації модуля. Це дозволяє зробити компоненти придатними для багаторазового використання, тестування та обслуговування.
Інверсія контролю: Це означає, що об’єкти не створюють інших об’єктів, на які вони покладаються для виконання своєї роботи. Натомість вони отримують ці об’єкти із зовнішнього джерела. Це формує основу AngularJS Dependency Injection, де якщо один об’єкт залежить від іншого; основний об'єкт не бере на себе відповідальність за створення залежного об'єкта і подальше використання його методів. Натомість зовнішнє джерело (яким в AngularJS є сама структура AngularJS) створює залежний об’єкт і передає його вихідному об’єкту для подальшого використання.
Отже, давайте спочатку розберемося, що таке залежність.
На наведеній вище діаграмі показано простий приклад ін’єкції залежностей AngularJS для щоденного ритуалу програмування бази даних.
- У полі «Модель» зображено «клас моделі», який зазвичай створюється для взаємодії з базою даних. Отже, тепер база даних є залежністю для функціонування «класу моделі».
- За допомогою ін’єкції залежностей ми створюємо службу для отримання всієї інформації з бази даних і потрапляння в клас моделі.
У решті цього підручника ми докладніше розглянемо впровадження залежностей і те, як це досягається в AngularJS.
Який компонент можна вставити як залежність в AngularJS?
В Angular.JS залежності впроваджуються за допомогою «ін’єкційного фабричного методу» або «функції-конструктора».
До цих компонентів можна додати компоненти «служба» та «значення» як залежності. Ми бачили це в попередній темі про службу $http.
Ми вже бачили, що сервіс $http можна використовувати в AngularJS для отримання даних з a MySQL або MS SQL База даних сервера через a PHP веб-додаток.
Служба $http зазвичай визначається всередині контролера таким чином.
sampleApp.controller ('AngularJSController', function ($scope, $http)
Тепер, коли служба $http визначена в контролері, як показано вище. Це означає, що контролер тепер залежить від служби $http.
Отже, коли наведений вище код буде виконано, AngularJS виконає наступні кроки;
- Перевірте, чи було створено екземпляр служби «$http». Оскільки наш «контролер» тепер залежить від «служби $http», об’єкт цієї служби має бути доступним для нашого контролера.
- Якщо AngularJS виявляє, що служба $http не створена, AngularJS використовує функцію 'factory' для створення об'єкта $http.
- Потім інжектор в Angular.JS надає примірник служби $http нашому контролеру для подальшої обробки.
Тепер, коли залежність введено в наш контролер, тепер ми можемо викликати необхідні функції в службі $http для подальшої обробки.
Приклад ін’єкції залежності
У цьому прикладі ми навчимося використовувати впровадження залежностей в AngularJS.
Ін’єкцію залежностей можна реалізувати двома способами
- Один – через «компонент вартості»
- Інший через «Сервіс»
Розглянемо реалізацію обох способів докладніше.
1) Ціннісна складова
Ця концепція заснована на факті створення простого JavaScript об'єкт і передати його контролеру для подальшої обробки.
Це реалізується за допомогою двох наведених нижче кроків
Крок 1) Створити JavaСтворіть об’єкт сценарію за допомогою компонента значення та приєднайте його до основного модуля AngularJS.JS.
Компонент значення приймає два параметри; один — це ключ, а інший — значення об’єкта javascript, який створюється.
Крок 2) Доступ JavaОб'єкт сценарію з Контролер Angular.JS
<! 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>
У наведеному вище прикладі коду виконуються наведені нижче основні кроки
-
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) Сервіс
Сервіс визначається як одиночний JavaОб’єкт сценарію, що складається з набору функцій, які ви хочете надати та впровадити у свій контролер.
Наприклад, «$http» — це служба в Angular.JS, яка після введення в ваші контролери забезпечує необхідні функції
( 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>
У наведеному вище прикладі виконуються наступні кроки
-
mainApp.service('AdditionService', function()
Тут ми створюємо нову службу під назвою "AdditionService", використовуючи параметр служби нашого основного модуля AngularJS JS.
-
this.Addition = function(a,b)
Тут ми створюємо нову функцію під назвою Addition у нашому сервісі. Це означає, що коли AngularJS створює екземпляр нашого AdditionService всередині нашого контролера, ми зможемо отримати доступ до функції «Addition». У цьому визначенні функції ми говоримо, що ця функція приймає два параметри, a і b.
-
return a+b;
Тут ми визначаємо тіло нашої функції додавання, яка просто додає параметри та повертає додане значення.
-
mainApp.controller('DemoController', function($scope, AdditionService)
Це основний крок, який передбачає впровадження залежностей. У нашому визначенні контролера ми зараз посилаємося на службу AdditionService. Коли AngularJS побачить це, він створить екземпляр об’єкта типу AdditionService.
-
$scope.result = AdditionService.Addition(5,6);
Тепер ми отримуємо доступ до функції «Addition», яка визначена в нашому сервісі, і призначаємо її об’єкту $scope контролера.
Отже, це простий приклад того, як ми можемо визначити нашу службу та впровадити функціональність цієї служби в наш контролер.
Підсумки
- Впровадження залежностей, як випливає з назви, — це процес впровадження залежних функцій у модулі під час виконання.
- Використання ін’єкції залежностей допомагає отримати код, придатний для повторного використання. Якщо у вас є загальна функція, яка використовується в кількох модулях програми, найкращим способом буде визначити центральну службу з такою функціональністю, а потім додати цю службу як залежність у модулі програми.
- Об’єкт значення AngularJS можна використовувати для введення простих JavaОб’єкти сценаріїв у вашому контролері за допомогою $inject in AngularJS.
- Сервісний модуль можна використовувати для визначення ваших власних служб, які можна повторно використовувати в кількох модулях AngularJS.