Учебники

21) Внедрение зависимостей

Январь 29, 2020

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

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

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

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

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

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

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

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

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

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

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

Эти компоненты могут быть добавлены с компонентами «service» и «value» в качестве зависимостей. Мы видели это в более ранней теме со службой $ http.

Мы уже видели, что служба $ http может использоваться в AngularJS для получения данных из базы данных MySQL или MS SQL Server через веб-приложение PHP .

Служба $ http обычно определяется внутри контроллера следующим образом. 

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

Теперь, когда служба $ http определена в контроллере, как показано выше. Это означает, что контроллер теперь зависит от службы $ http.

Поэтому, когда приведенный выше код будет выполнен, AngularJS выполнит следующие шаги;

  1. Проверьте, был ли создан экземпляр службы $ http. Поскольку наш «контроллер» теперь зависит от «службы $ http», объект этой службы должен быть доступен нашему контроллеру.
  2. Если AngularJS обнаруживает, что служба $ http не создана, AngularJS использует функцию factory для создания объекта $ http.
  3. Затем инжектор в Angular.JS предоставляет экземпляр контроллера $ http нашему контроллеру для дальнейшей обработки.

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

Пример внедрения зависимости

Внедрение зависимости может быть реализовано двумя способами

  1. Один через «Компонент стоимости»
  2. Еще через «Сервис»

Давайте посмотрим на реализацию обоих способов более подробно.

1) Значение компонента

Эта концепция основана на факте создания простого объекта JavaScript и передачи его контроллеру для дальнейшей обработки.

Это реализовано с использованием следующих двух шагов

Шаг 1) Создайте объект JavaScript с помощью компонента value и присоедините его к основному модулю AngularJS.JS.

Компонент значения принимает два параметра; один — это ключ, а другой — значение создаваемого объекта javascript.

Шаг 2) Доступ к объекту JavaScript из контроллера 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>

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

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

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

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

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

  1.  $scope.ID =TutorialID;

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

  1. {{ID}}

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

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

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

2) Сервис

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

Например, $ http — это служба в 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>
<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», используя параметр сервиса нашего основного модуля AngularJS JS. 

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

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

  1.  return a+b;

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

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

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

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

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

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

Резюме:

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

 

41
Share: