Внедрение зависимостей — это программный дизайн, в котором компонентам присваиваются свои зависимости, а не жесткое кодирование их внутри компонента. Это освобождает компонент от нахождения зависимости и делает зависимости настраиваемыми. Это также помогает сделать компоненты многоразовыми, ремонтопригодными и тестируемыми.
AngularJS обеспечивает превосходный механизм внедрения зависимостей. Это обеспечивает следующие основные компоненты, которые могут быть вставлены друг в друга как зависимости.
- Значение
- завод
- обслуживание
- поставщик
- постоянная
Значение
Значение — это простой объект JavaScript, который необходим для передачи значений в контроллер на этапе настройки (этап настройки — это когда сам AngularJS загружается).
//define a module var mainApp = angular.module("mainApp", []); //create a value object as "defaultInput" and pass it a data. mainApp.value("defaultInput", 5); ... //inject the value in the controller using its name "defaultInput" mainApp.controller('CalcController', function($scope, CalcService, defaultInput) { $scope.number = defaultInput; $scope.result = CalcService.square($scope.number); $scope.square = function() { $scope.result = CalcService.square($scope.number); } });
завод
Фабрика — это функция, которая используется для возврата значения. Он создает значение по требованию, когда этого требует служба или контроллер. Обычно он использует фабричную функцию для вычисления и возврата значения.
//define a module var mainApp = angular.module("mainApp", []); //create a factory "MathService" which provides a method multiply to return multiplication of two numbers mainApp.factory('MathService', function() { var factory = {}; factory.multiply = function(a, b) { return a * b } return factory; }); //inject the factory "MathService" in a service to utilize the multiply method of factory. mainApp.service('CalcService', function(MathService) { this.square = function(a) { return MathService.multiply(a,a); } }); ...
обслуживание
Сервис — это одноэлементный объект JavaScript, содержащий набор функций для выполнения определенных задач. Служба определяется с помощью функции service () и затем вводится в контроллеры.
//define a module var mainApp = angular.module("mainApp", []); ... //create a service which defines a method square to return square of a number. mainApp.service('CalcService', function(MathService) { this.square = function(a) { return MathService.multiply(a,a); } }); //inject the service "CalcService" into the controller mainApp.controller('CalcController', function($scope, CalcService, defaultInput) { $scope.number = defaultInput; $scope.result = CalcService.square($scope.number); $scope.square = function() { $scope.result = CalcService.square($scope.number); } });
поставщик
Поставщик используется AngularJS внутри для создания сервисов, фабрики и т. Д. На этапе настройки. Следующий скрипт может быть использован для создания MathService, который мы создали ранее. Provider — это специальный метод фабрики с методом get (), который используется для возврата значения / service / factory.
//define a module var mainApp = angular.module("mainApp", []); ... //create a service using provider which defines a method square to return square of a number. mainApp.config(function($provide) { $provide.provider('MathService', function() { this.$get = function() { var factory = {}; factory.multiply = function(a, b) { return a * b; } return factory; }; }); });
постоянная
Константы используются для передачи значений на этапе конфигурации, учитывая тот факт, что значение нельзя использовать на этапе настройки.
mainApp.constant("configParam", "constant value");
пример
В следующем примере показано использование всех вышеупомянутых директив —
testAngularJS.htm
<html> <head> <title>AngularJS Dependency Injection</title> </head> <body> <h2>AngularJS Sample Application</h2> <div ng-app = "mainApp" ng-controller = "CalcController"> <p>Enter a number: <input type = "number" ng-model = "number" /></p> <button ng-click = "square()">X<sup>2</sup></button> <p>Result: {{result}}</p> </div> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script> <script> var mainApp = angular.module("mainApp", []); mainApp.config(function($provide) { $provide.provider('MathService', function() { this.$get = function() { var factory = {}; factory.multiply = function(a, b) { return a * b; } return factory; }; }); }); mainApp.value("defaultInput", 5); mainApp.factory('MathService', function() { var factory = {}; factory.multiply = function(a, b) { return a * b; } return factory; }); mainApp.service('CalcService', function(MathService) { this.square = function(a) { return MathService.multiply(a,a); } }); mainApp.controller('CalcController', function($scope, CalcService, defaultInput) { $scope.number = defaultInput; $scope.result = CalcService.square($scope.number); $scope.square = function() { $scope.result = CalcService.square($scope.number); } }); </script> </body> </html>
Выход
Откройте testAngularJS.htm в веб-браузере и посмотрите результат.