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



Този артикул ще ви предостави подробни и изчерпателни знания за това как да приложите инжектиране на зависимост в AngularJs.

Dependency Injection е модел на софтуерно проектиране, който определя начина, по който компонентите се хващат за своите зависимости. Компонентите получават своите зависимости, вместо да ги кодират трудно. Повторната използваемост и поддръжката могат да бъдат постигнати чрез използване на инжекция на зависимост. Впръскване на Върховна зависимост в може да бъде направено от следните компоненти:





Инжектиране на зависимостта от стойността

Един прост обект в AngularJs е известен като стойност. Това може да бъде низ, число или дори JavaScript обект. Може да се използва за предаване на стойности във фабрики, услуги или контролери по време на фазата на изпълнение и конфигуриране.

Пример:



// дефиниране на модул

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

// създаване на обект на стойност и предаване на данни към него



firstModule.value ('numberValue', 50)

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

firstModule.value ('objectValue', {val1: 456, val2: 'xyz'})

В този пример стойностите се дефинират с помощта на функцията value (). Името на стойността се указва от първия параметър, а вторият параметър указва стойността. Това позволява на фабриките, услугите и контролерите да се позовават на тези стойности със самото си име.

Инжектиране на стойност

Можем да инжектираме стойност във функцията на контролера AngularJs, като добавим параметър със същото име като стойността.

Пример:

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

firstModule.value ('numberValue', 18)

firstModule.controller ('FirstController', функция ($ scope, numberValue) {

console.log (numberValue)

})

Фабрично инжектиране

Функция, която създава стойности, е известна като фабрика. Стойност при поискване се създава от фабриката, когато услуга или контролер се нуждае от стойност, инжектирана от фабриката. След като стойността е създадена, тя се използва повторно за всички услуги и контролери.

Той използва фабричната функция за изчисляване и връщане на стойността.

Пример:

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

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

връща 'стойност'

})

firstModule.controller ('FirstController', функция ($ scope, firstFactory) {

console.log (firstFactory)

})

Инжектиране на стойности във фабрика

Стойност може да се инжектира фабрично по следния метод:

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

firstModule.value ('numberValue', 29)

firstModule.controller ('FirstController', функция ($ scope, numberValue) {

console.log (numberValue)

})

Трябва да се отбележи, че стойносттапроизведена от фабричната функция се инжектира, а не самата фабрична функция. Нека да продължим с тази статия за инжектиране на зависимост в AngularJs.

Инжектиране на услуга в AngularJs

Единичен JavaScript обект, който съдържа набор от функции, е известен като услуга в AngularJs. Логиката, необходима за извършване на услугата, се съдържа във функцията. Услугата може да бъде създадена с помощта на функцията service () на модул.

Пример:

// дефиниране на модул

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

...

// създаване на услуга, която дефинира метод квадрат, за да върне квадрата на число

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

this.square = функция (x) {

връщане MathService.multiply (x, x)

}

})

// инжектираме услугата 'CalciService' в контролера

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

defaultInput) {

плитко копие и дълбоко копие в java

$ scope.number = defaultInput

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

$ scope.square = функция () {

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

}

})

Доставчик

За да създадем вътрешно услуги или фабрика по време на фазата на конфигуриране, ние използваме доставчика. Доставчикът е специален фабричен метод с функция get (), който се използва за връщане на стойността / услугата / фабриката.

Пример:

// дефиниране на модул

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

...

// създаваме услуга, използваща доставчик, която дефинира квадрат на метод за връщане на

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

firstApp.config (функция ($ предоставяне) {

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

това. $ get = function () {

var фабрика =

factory.multiply = функция (x, y) {

връщане x * y

}

връщане фабрика

}

})

})

Постоянно

Тъй като потребителят не може да инжектира стойности във функцията module.config (), ние използваме константи. Константите се използват за предаване на стойности във фазата на конфигуриране.

firstApp.constant („configParam“, „постоянна стойност“)

Пример:

Посочените по-горе директиви могат да се използват по следния начин:

Инжектиране на зависимост

конвертирате от double в int java

Пример за AngularJS квадратура

Въведете произволен номер:

х2

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

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

firstApp.config (функция ($ предоставяне) {

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

това. $ get = function () {

var фабрика =

factory.multiply = функция (x, y) {

връщане x * y

}

връщане фабрика

}

})

})

firstApp.value ('defaultInput', 6)

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

var фабрика =

factory.multiply = функция (x, y) {

връщане x * y

}

връщане фабрика

})

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

this.square = функция (x) {

връщане MathService.multiply (x, x)

}

})

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

$ scope.number = defaultInput

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

$ scope.square = функция () {

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

}

})

ИЗХОД:

инжектиране на зависимост в angularjs

С това стигнахме до края на тази инжекция на зависимостите в статията на AngularJs. ° С по дяволите от Edureka, доверена компания за онлайн обучение с мрежа от над 250 000 доволни учащи, разпространени по целия свят.

Имате въпрос към нас? Моля, споменете го в раздела за коментари на това впръскване на зависимости в AngularJs и ние ще се свържем с вас.