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

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

Инжектиране на зависимост в AngularJS е модел на софтуерен дизайн, който прилага инверсия на контрола за разрешаване на зависимости. Той решава как компонентите поддържат своите зависимости. Може да се използва при дефиниране на компонентите или осигуряване на блокове за изпълнение и конфигуриране на модула. Той ви позволява да направите компонентите многократно използвани, тествани и поддържани.

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

⚠️ Бележка към версията: Поддръжката на AngularJS приключи през януари 2022 г., без корекции за сигурност. Съвременният Angular инжектира чрез @Injectable доставчици и инжектиране()Кодът по-долу остава исторически.

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

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

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

В останалата част от този урок ще разгледаме повече за инжектирането на зависимости и как това се постига в 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.

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

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

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

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

Тази концепция се основава на създаването на просто JavaСценарий обект и предаването му на контролера за по-нататъшна обработка.

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

Стъпка 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 на контролера.

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

Въпроси и Отговори