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

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

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

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

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

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

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

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

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

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

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

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

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

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

Стъпка 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)
```

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

```
 return a+b;
```

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

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

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

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

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

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

Oбобщение

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

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

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

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

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

СВЪРЗАНИ СТАТИИ

2) Услуга

Oбобщение

Регистрирайте се за бюлетина