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

Синтаксис

• myApp.controller ('MyController', function ($ scope) {...}); // недопустимый код

• myApp.controller ('MyController', ['$ scope', function ($ scope) {...}]); // поддержка минимизации

• функция MyController () {}

  MyController. $ Injection = ['$ scope'];

  myApp.controller ('MyController', MyController); // $ вставка аннотации

• $ Injector.get ( 'инъекционные'); // динамическая / временная инъекция

замечания

вливания

Простейший пример инъекции в угловом приложении - инъекция $scope в угловой Controller :

angular.module('myModule', [])
.controller('myController', ['$scope', function($scope) {
    $scope.members = ['Alice', 'Bob'];
    ...
}])

Вышеупомянутое иллюстрирует инъекцию $scope в controller , но все равно, вводите ли вы какой-либо модуль в любой другой. Процесс тот же.

Система Angular отвечает за разрешение зависимостей для вас. Если вы создаете сервис, например, вы можете перечислить его, как в приведенном выше примере, и он будет доступен вам.

Вы можете использовать DI - Dependency Injection - везде, где вы определяете компонент.

Обратите внимание, что в приведенном выше примере мы используем так называемую «Inline Array Annotation». Смысл, мы явно записываем в качестве строк имена наших зависимостей. Мы делаем это, чтобы предотвратить нарушение приложения при кодировании кода для Production. Мидификация кода изменяет имена переменных (но не строк), что прерывает инъекцию. Используя строки, Angular знает, какие зависимости мы хотим.

Очень важно - порядок имен строк должен быть таким же, как и параметры в функции.

Есть инструменты, которые автоматизируют этот процесс и заботятся об этом для вас.

Динамические инъекции

Существует также возможность динамически запрашивать компоненты. Вы можете сделать это, используя службу $injector :

myModule.controller('myController', ['$injector', function($injector) {
    var myService = $injector.get('myService');
}]);

Примечание. Хотя этот метод можно использовать для предотвращения проблемы с циклической зависимостью, которая может нарушить ваше приложение, не рекомендуется использовать эту проблему, чтобы обойти проблему. Циркулярная зависимость обычно указывает на наличие недостатков в архитектуре вашего приложения, и вам следует обратиться к этому вопросу.

$ inject Объявление свойства

Эквивалентно, мы можем использовать аннотацию свойства $inject для достижения того же, что и выше:

var MyController = function($scope) {
  // ...
}
MyController.$inject = ['$scope'];
myModule.controller('MyController', MyController);

Динамически загружать службу AngularJS в ванильном JavaScript

Вы можете загружать службы AngularJS в ванильном JavaScript с использованием метода AngularJS injector() . Каждый элемент jqLite, полученный из вызывающего angular.element() имеет метод injector() который может использоваться для извлечения инжектора.

var service;
var serviceName = 'myService';

var ngAppElement = angular.element(document.querySelector('[ng-app],[data-ng-app]') || document);
var injector = ngAppElement.injector();

if(injector && injector.has(serviceNameToInject)) {
    service = injector.get(serviceNameToInject);
}

В приведенном выше примере мы пытаемся получить элемент jqLite, содержащий корень приложения AngularJS ( ngAppElement ). Для этого мы используем angular.element() , ищем элемент DOM, содержащий атрибут ng-app или data-ng-app или, если он не существует, мы возвращаемся к элементу document . Мы используем ngAppElement для извлечения экземпляра инжектора (с помощью ngAppElement.injector() ). Экземпляр инжектора используется, чтобы проверить, существует ли служба для инъекции (с injector.has() ), а затем для загрузки службы (с помощью injector.get() ) внутри service переменной.