Внедрение зависимостей AngularJS: какие компоненты внедряются

Автор: Джеймс Хартман Джеймс Хартман
Hours обновленный

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итак, когда приведенный выше код будет выполнен, AngularJS выполнит следующие шаги:

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

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

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

В этом примере мы узнаем, как использовать внедрение зависимостей в AngularJS.

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

  1. Один из них — через «компонент ценности».
  2. Другой через «Сервис»

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

1) Ценностная составляющая

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

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

Шаг 1) Создайте JavaСоздайте скрипт объекта, используя компонент value, и присоедините его к основному модулю 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>

СТАТЬИ ПО ТЕМЕ

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

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

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

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

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

  1.  $scope.ID =TutorialID;

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

  1. {{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>

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

  1.  mainApp.service('AdditionService', function()

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

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

Здесь мы создаем новую функцию под названием «Дополнение» в нашем сервисе. Это означает, что когда AngularJS создает экземпляр AdditionService внутри нашего контроллера, мы сможем получить доступ к функции Addition. В этом определении функции мы говорим, что эта функция принимает два параметра: 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 можно использовать для внедрения простых JavaСкриптуйте объекты в вашем контроллере, используя $inject in AngularJS.
  • Сервисный модуль можно использовать для определения ваших пользовательских сервисов, которые можно повторно использовать в нескольких модулях AngularJS.

Вы могли бы: