Как реализовать внедрение зависимостей в AngularJs

Эта статья предоставит вам подробные и исчерпывающие знания о том, как реализовать внедрение зависимостей в AngularJs.

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





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

Простой объект в AngularJs известен как значение. Это может быть строка, число или даже объект JavaScript. Его можно использовать для передачи значений в фабрики, службы или контроллеры на этапах выполнения и настройки.

Пример:



// определяем модуль

var firstModule = angular.module ('firstModule', [])

// создаем объект значения и передаем ему данные



firstModule.value ('numberValue', 50)

firstModule.value ('stringValue', 'xyz')

firstModule.value ('objectValue', {значение1: 456, значение2: 'xyz'})

В этом примере значения определяются с помощью функции value (). Имя значения указывается первым параметром, а второй параметр указывает значение. Это позволяет фабрикам, службам и контроллерам ссылаться на эти значения по своему имени.

Внедрение ценности

управляемая данными структура в селене

Мы можем вставить значение в функцию контроллера AngularJs, добавив параметр с тем же именем, что и значение.

Пример:

var firstModule = angular.module ('firstModule', [])

firstModule.value ('numberValue', 18)

firstModule.controller ('FirstController', function ($ scope, numberValue) {

console.log (numberValue)

})

Заводской впрыск

Функция, создающая значения, называется фабрикой. Значение по запросу создается фабрикой всякий раз, когда службе или контроллеру требуется значение, введенное с завода. Как только значение создано, оно повторно используется для всех служб и контроллеров.

Он использует фабричную функцию для вычисления и возврата значения.

Пример:

var firstModule = angular.module ('firstModule', [])

firstModule.factory ('firstFactory', function () {

вернуть 'значение'

})

firstModule.controller ('FirstController', function ($ scope, firstFactory) {

console.log (firstFactory)

})

Внедрение ценностей в фабрику

Значение может быть введено в factory следующим способом:

var firstModule = angular.module ('firstModule', [])

firstModule.value ('numberValue', 29)

firstModule.controller ('FirstController', function ($ scope, numberValue) {

console.log (numberValue)

})

Следует отметить, что значение вводится функция фабрики, а не сама фабричная функция. Давайте продолжим эту статью о внедрении зависимостей в AngularJs.

Внедрение сервисов в AngularJs

Одноэлементный объект JavaScript, содержащий набор функций, в AngularJs известен как служба. Логика, необходимая для выполнения службы, содержится в функции. Сервис может быть создан с помощью функции service () в модуле.

Пример:

// определяем модуль

var firstApp = angular.module ('firstApp', [])

...

// создаем сервис, который определяет метод квадрат, чтобы вернуть квадрат числа

firstApp.service ('CalciService', функция (MathService) {

this.square = function (x) {

вернуть MathService.multiply (x, x)

}

})

// вставляем службу CalciService в контроллер

firstApp.controller ('CalciController', функция ($ scope, CalciService,

defaultInput) {

$ scope.number = defaultInput

$ scope.result = CalciService.square ($ scope.number)

$ scope.square = function () {

$ scope.result = CalciService.square ($ scope.number)

}

})

Провайдер

Для внутреннего создания служб или фабрики на этапе настройки мы используем Provider. Provider - это специальный заводской метод с функцией get (), которая используется для возврата значения / service / factory.

Пример:

// определяем модуль

var firstApp = angular.module ('firstApp', [])

...

// создаем сервис с помощью провайдера, который определяет квадрат метода для возврата

квадрат числа.

firstApp.config (function ($ provide) {

$ provide.provider ('MathService', function () {

как остановить программу на Java

это. $ get = function () {

var factory =

factory.multiply = function (x, y) {

вернуть x * y

}

возврат фабрики

}

})

})

Постоянный

Поскольку пользователь не может вводить значения в функцию module.config (), мы используем константы. Константы используются для передачи значений на этапе настройки.

firstApp.constant («configParam», «постоянное значение»)

Пример:

Указанные выше директивы можно использовать следующим образом:

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

Пример возведения в квадрат AngularJS

Введите любой номер:

Икс2

Результат: {{результат}}

var firstApp = angular.module ('firstApp', [])

firstApp.config (function ($ provide) {

$ provide.provider ('MathService', function () {

это. $ get = function () {

var factory =

factory.multiply = function (x, y) {

вернуть x * y

}

возврат фабрики

}

})

})

firstApp.value ('defaultInput', 6)

firstApp.factory ('MathService', function () {

var factory =

factory.multiply = function (x, y) {

вернуть x * y

}

возврат фабрики

})

firstApp.service ('CalciService', функция (MathService) {

this.square = function (x) {

вернуть MathService.multiply (x, x)

}

})

повар против марионетки против соли

firstApp.controller ('CalciController', function ($ scope, CalciService, defaultInput) {

$ scope.number = defaultInput

$ scope.result = CalciService.square ($ scope.number)

$ scope.square = function () {

$ scope.result = CalciService.square ($ scope.number)

}

})

ВЫВОД:

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

На этом мы подошли к концу статьи о внедрении зависимостей в AngularJs. C черт возьми от Edureka, надежной компании по онлайн-обучению с сетью из более чем 250 000 довольных учащихся по всему миру.

Есть вопрос к нам? Пожалуйста, упомяните это в разделе комментариев этого внедрения зависимостей в AngularJs, и мы свяжемся с вами.