Dependency Injection to wzorzec projektowy oprogramowania, który określa sposób, w jaki komponenty przechwytują swoje zależności. Komponentom nadaje się ich zależności zamiast na sztywno je zakodować. Możliwość ponownego użycia i konserwacji można osiągnąć za pomocą iniekcji zależności. Supreme Dependency Injection w można wykonać za pomocą następujących elementów:
Wstrzyknięcie zależności od wartości
Prosty obiekt w AngularJs jest nazywany wartością. Może to być ciąg znaków, liczba lub nawet obiekt JavaScript. Może być używany do przekazywania wartości w fabrykach, usługach lub kontrolerach podczas fazy uruchamiania i konfiguracji.
Przykład:
// zdefiniuj moduł
var firstModule = angular.module ('firstModule', [])
// utwórz obiekt wartości i przekaż do niego dane
firstModule.value ('numberValue', 50)
firstModule.value ('stringValue', 'xyz')
firstModule.value ('objectValue', {wart1: 456, wart2: 'xyz'})
W tym przykładzie wartości są definiowane za pomocą funkcji value (). Nazwa wartości jest określana przez pierwszy parametr, a drugi parametr określa wartość. Umożliwia to fabrykom, usługom i kontrolerom odwoływanie się do tych wartości za pomocą samej nazwy.
Wstrzykiwanie wartości
public string tostring ()
Możemy wstrzyknąć wartość do funkcji kontrolera AngularJs, dodając parametr o tej samej nazwie, co wartość.
Przykład:
var firstModule = angular.module ('firstModule', [])
firstModule.value ('numberValue', 18)
firstModule.controller ('FirstController', function ($ scope, numberValue) {
console.log (numberValue)
})
Wtrysk fabryczny
Funkcja, która tworzy wartości, nazywana jest fabryką. Wartość na żądanie jest tworzona przez fabrykę za każdym razem, gdy serwis lub kontroler potrzebuje wartości wstrzykniętej z fabryki. Utworzona wartość jest ponownie używana dla wszystkich usług i kontrolerów.
Wykorzystuje funkcję fabryki do obliczenia i zwrócenia wartości.
Przykład:
var firstModule = angular.module ('firstModule', [])
firstModule.factory ('firstFactory', function () {
zwróć „wartość”
})
firstModule.controller ('FirstController', function ($ scope, firstFactory) {
console.log (firstFactory)
})
Wstrzykiwanie wartości do fabryki
Wartość można wprowadzić do fabryki w następujący sposób:
var firstModule = angular.module ('firstModule', [])
firstModule.value ('numberValue', 29)
firstModule.controller ('FirstController', function ($ scope, numberValue) {
console.log (numberValue)
})
Należy zauważyć, że wartośćwytwarzana przez funkcję fabryczną, a nie przez samą funkcję fabryczną. Przejdźmy dalej z tym artykułem Dependency Injection w AngularJs.
Service Injection w AngularJs
Pojedynczy obiekt JavaScript zawierający zestaw funkcji jest znany jako usługa w AngularJs. Logika niezbędna do wykonania usługi zawarta jest w funkcji. Usługę można utworzyć za pomocą funkcji service () w module.
Przykład:
// zdefiniuj moduł
var firstApp = angular.module ('firstApp', [])
...
// stwórz usługę, która definiuje metodę kwadrat, aby zwrócić kwadrat liczby
firstApp.service ('CalciService', function (MathService) {
this.square = function (x) {
return MathService.multiply (x, x)
}
})
// wstrzyknij usługę „CalciService” do kontrolera
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)
}
})
Dostawca
Aby wewnętrznie tworzyć usługi lub fabrykę w fazie konfiguracji, korzystamy z Providera. Provider to specjalna metoda fabryczna z funkcją get (), która służy do zwracania wartości / usługi / fabryki.
Przykład:
// zdefiniuj moduł
var firstApp = angular.module ('firstApp', [])
...
// utwórz usługę za pomocą dostawcy, który definiuje kwadrat metody zwracania
kwadrat liczby.
firstApp.config (function ($ provider) {
$ provider.provider ('MathService', function () {
this. $ get = function () {
var factory =
factory.multiply = function (x, y) {
powrót x * y
}
powrót do fabryki
}
})
})
Stały
Ponieważ użytkownik nie może wstrzyknąć wartości do funkcji module.config (), używamy stałych. Stałe służą do przekazywania wartości w fazie konfiguracji.
firstApp.constant („configParam”, „stała wartość”)
Przykład:
Dyrektywy wymienione powyżej można wykorzystać w następujący sposób:
Dependency Injection
Przykład kwadratu AngularJS
Wpisz dowolną liczbę:
X2
Wynik: {{result}}
var firstApp = angular.module ('firstApp', [])
firstApp.config (function ($ provider) {
$ provider.provider ('MathService', function () {
this. $ get = function () {
var factory =
factory.multiply = function (x, y) {
powrót x * y
}
powrót do fabryki
}
})
})
firstApp.value ('defaultInput', 6)
firstApp.factory ('MathService', function () {
var factory =
factory.multiply = function (x, y) {
powrót x * y
}
powrót do fabryki
})
firstApp.service ('CalciService', function (MathService) {
this.square = function (x) {
return 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)
}
})
WYNIK:
jaka jest różnica między xml a html
Na tym kończymy artykuł Dependency Injection w AngularJs. do heck out the autorstwa Edureka, zaufanej firmy zajmującej się edukacją online, z siecią ponad 250 000 zadowolonych uczniów rozsianych po całym świecie.
Masz do nas pytanie? Wspomnij o tym w sekcji komentarzy tego zastrzyku zależności w AngularJs, a my skontaktujemy się z Tobą.