Компоненты внедрения зависимостей AngularJS

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

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

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

⚠️ Примечание к версии: Поддержка AngularJS прекратилась в январе 2022 года.Без обновлений безопасности. Современный Angular внедряет зависимости через провайдеры с аннотацией `@Injectable` и inject()Приведённый ниже код остаётся в силе.

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

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

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

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

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

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

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

AngularJS модуль регистрирует инъекционные объекты с помощью пяти рецептов.

Мы уже видели, что сервис $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. Затем инжектор в AngularJS предоставляет экземпляр сервиса $http нашему контроллеру для дальнейшей обработки.

Формы для аннотаций: Неявная аннотация Он считывает имена параметров, поэтому минификация нарушает его работу. Встроенная нотация массивов и $inject сохраняются; ng-strict-di в ng-app отклоняет неявные аннотации.

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

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

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

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

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

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

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

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

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

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

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

Часто задаваемые вопросы (FAQ)