Внедрение зависимостей в AngularJS с примером

Что такое внедрение зависимостей в AngularJS?

Внедрение зависимостей - это шаблон проектирования программного обеспечения, который реализует инверсию управления для разрешения зависимостей.

Инверсия управления : это означает, что объекты не создают других объектов, на которые они полагаются для выполнения своей работы. Вместо этого они получают эти объекты из внешнего источника. Это формирует основу внедрения зависимости, в которой, если один объект зависит от другого; первичный объект не берет на себя ответственность за создание зависимого объекта и последующее использование его методов. Вместо этого внешний источник (который в AngularJS представляет собой сам фреймворк AngularJS) создает зависимый объект и передает его исходному объекту для дальнейшего использования.

Итак, давайте сначала разберемся, что такое зависимость.

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

Поле «Модель» отображает «Класс модели», который обычно создается для взаимодействия с базой данных. Итак, теперь база данных является зависимостью для функционирования «класса модели».
Путем внедрения зависимостей мы создаем службу, которая получает всю информацию из базы данных и попадает в класс модели.

В оставшейся части этого руководства мы подробнее рассмотрим внедрение зависимостей и то, как это выполняется в AngularJS.

В этом руководстве вы узнаете:

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

Компонент стоимости
Служба

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

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

В эти компоненты можно добавить компоненты «службы» и «значения» в качестве зависимостей. Мы видели это в предыдущем разделе о службе $ 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);
```

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

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

Теперь переменная TutorialID становится доступной для контроллера как параметр функции.

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

Значение TutorialID, равное 5, теперь присваивается другой переменной с именем ID в объекте $ scope. Это делается для того, чтобы значение 5 могло быть передано из контроллера в представление.

```
{{Я БЫ}}
```

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

Когда приведенный выше код будет выполнен, результат будет показан ниже.

2) Сервис

Служба определяется как одноэлементный объект JavaScript, состоящий из набора функций, которые вы хотите предоставить и внедрить в свой контроллер.

Например, «$ http» - это служба в Angular.JS, которая при введении в ваши контроллеры предоставляет необходимые функции

(получить (), запрос (), сохранить (), удалить (), удалить ()).

Затем эти функции могут быть соответственно вызваны из вашего контроллера.

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

Event Registration
Guru99 Global Event

Result: {{result}}

В приведенном выше примере выполняются следующие шаги.

 mainApp.service('AdditionService', function()

Здесь мы создаем новую службу под названием AdditionService, используя служебный параметр нашего основного модуля AngularJS JS.

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

Здесь мы создаем новую функцию под названием Addition в нашем сервисе. Это означает, что когда AngularJS создает экземпляр нашей AdditionService внутри нашего контроллера, мы сможем получить доступ к функции «Добавление». В этом определении функции мы говорим, что эта функция принимает два параметра, a и b.

```
 return a+b; 
```

Здесь мы определяем тело нашей функции Addition, которая просто добавляет параметры и возвращает добавленное значение.

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

Это основной шаг, который включает внедрение зависимостей. В нашем определении контроллера мы теперь ссылаемся на нашу службу AdditionService. Когда AngularJS увидит это, он создаст экземпляр объекта типа AdditionService.

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

Теперь мы получаем доступ к функции «Добавление», которая определена в нашей службе, и назначаем ее объекту $ scope контроллера.

Итак, это простой пример того, как мы можем определить нашу службу и внедрить функциональность этой службы в наш контроллер.

Резюме:

Внедрение зависимостей, как следует из названия, представляет собой процесс внедрения зависимых функций в модули во время выполнения.
Использование внедрения зависимостей помогает получить более пригодный для повторного использования код. Если у вас есть общие функции, которые используются в нескольких модулях приложения, лучший способ - определить центральную службу с этой функцией, а затем внедрить эту службу в качестве зависимости в модули вашего приложения.
Объект значения AngularJS можно использовать для внедрения простых объектов JavaScript в ваш контроллер.
Сервисный модуль можно использовать для определения ваших пользовательских сервисов, которые можно повторно использовать в нескольких модулях AngularJS.