AngularJs Инъекция зависимости
Что такое инъекция зависимости
Объяснение на вики: инъекция зависимости (DI) - это шаблон проектирования программного обеспечения, в котором одна или несколько зависимостей (или услуг) вводится (или передается ссылкой) в отдельный объект (или клиент), а затем становятся частью состояния клиента.
Этот шаблон разделяет создание поведения клиента, что делает программирование слабо связанным и следует принципам изменения зависимости и единой ответственности. В отличие от шаблона локатора услуг, он позволяет клиенту понять, как клиент использует систему для поиска зависимостей
Одним словом-если вам нечего делать, не приходите ко мне, я пойду к вам, если вам будет чем заняться.
AngularJS обеспечивает хороший механизм впрыска зависимостей. Следующие 5 основных компонентов используются в качестве инъекции зависимостей:
ценить
фабрика
услуга
Поставщик
постоянный
ценить
Значение - это простой объект JavaScript, который передает значения контроллеру (фаза конфигурации):
var mainApp = angular.module ("maneApp", []); // Создать объект значения "defaultInput" и передавать данные mainApp.value ("defaultInput", 5); ... // Inject "defaultInput" в контроллер mainApp.controller ('calcController', функция ($ scope, calcservice, defservice, defservice, defservice) {$ rackpuppuppuppuppuppuppuppuppuppuppuppuppuppuppup $ scope.result = calcservice.square ($ scope.number);фабрика
Фабрика - это функция, которая возвращает значение. Создан, когда требуется сервис и контроллер.
Обычно мы используем заводские функции для расчета или возврата значений.
// Определите модуль var mainApp = angular.module ("maneapp", []); // Создать фабрику "MathService", используемый для умножения продукта двух чисел mAnapp.factory ('mathservice', function () {var factory = {}; factory.multyply = function (a, b) {return a * b} возвращать факту; // инъекционная фабрика "MathService" в сервис mainApp.service ('calcservice', function (mathservice) {this.square = function (a) {return mathservice.multiply (a, a);}}); ... ...Поставщик
В AngularJs сервис, завод и т. Д. Создаются через поставщика (этап конфигурации).
Заводский метод get () представлен в поставщике, который используется для возврата значения/обслуживания/завода.
// Определите модуль var mainApp = angular.module ("mainApp", []); ... // Создание службы с использованием провайдера определить метод для вычисления продукта двух чисел mainApp.config (function ($ предоставление) {$ предоставление.provider ('MathService', function () {this. $ Get = function () {var factory = {}; b;постоянный
Constant (Constant) используется для прохождения числовых значений на этапе конфигурации. Обратите внимание, что эта константа не доступна на этапе конфигурации.
mainapp.constant ("configparam", "постоянное значение");
Пример
Следующие примеры дают демонстрацию нескольких вышеупомянутых механизмов инъекции зависимостей.
<html> <head> <meta charset="utf-8"> <title>AngularJS Dependency Injection</title> </head> <body> <h2>AngularJS Simple 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="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script> var mainApp = Angular.Module ("maneApp", []); mainapp.config (function ($ предоставление) {$ предоставление.provider ('mathservice', function () {this. $ get = function () {var factory = {}; factory.multiply = function (a, b) {return a * b;} вернуть завод;};});}); }); mainapp.value ("defaultInput", 5); mainApp.factory ('mathservice', function () {var factory = {}; factory.multiply = function (a, b) {return a * b;} возвращать завод;}); 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.); </script> </body> </html>Результаты работы:
Выше приведено сортировка данных для зависимостей AngularJS. Мы продолжим добавлять его позже. Я надеюсь, что это может помочь друзьям, которые развивают Angularjs.