종속성 주입은 구성 요소가 종속성을 유지하는 방식을 지정하는 소프트웨어 디자인 패턴입니다. 구성 요소에는 하드 코딩하는 대신 종속성이 제공됩니다. 의존성 주입을 사용하여 재사용 성과 유지 보수성을 달성 할 수 있습니다. 최고의 의존성 주입 다음 구성 요소로 수행 할 수 있습니다.
가치 의존성 주입
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', function ($ scope, numberValue) {
console.log (numberValue)
})
공장 주입
값을 생성하는 함수를 공장이라고합니다. 서비스 또는 컨트롤러가 공장에서 주입 된 값을 필요로 할 때마다 공장에서 주문형 값을 생성합니다. 값이 생성되면 모든 서비스 및 컨트롤러에 재사용됩니다.
공장 함수를 사용하여 값을 계산하고 반환합니다.
예:
var firstModule = angular.module ( 'firstModule', [])
firstModule.factory ( 'firstFactory', function () {
'값'반환
})
firstModule.controller ( 'FirstController', function ($ scope, firstFactory) {
console.log (firstFactory)
})
공장에 가치 주입
다음 방법으로 값을 공장에 주입 할 수 있습니다.
var firstModule = angular.module ( 'firstModule', [])
firstModule.value ( 'numberValue', 29)
자바에서 charat을 사용하는 방법
firstModule.controller ( 'FirstController', function ($ scope, numberValue) {
console.log (numberValue)
})
값은공장 기능 자체가 아닌 공장 기능에 의해 생성 된 것이 주입됩니다. AngularJs의 종속성 주입에 대한이 기사를 계속 진행하겠습니다.
AngularJs의 서비스 주입
일련의 함수를 포함하는 단일 JavaScript 객체는 AngularJs에서 서비스로 알려져 있습니다. 서비스를 수행하는 데 필요한 로직이 함수에 포함되어 있습니다. 모듈에서 service () 함수를 사용하여 서비스를 생성 할 수 있습니다.
예:
// 모듈 정의
var firstApp = angular.module ( 'firstApp', [])
...
// 메서드를 정의하는 서비스 생성 제곱은 숫자의 제곱을 반환합니다.
firstApp.service ( 'CalciService', function (MathService) {
this.square = function (x) {
return MathService.multiply (x, x)
}
})
// 컨트롤러에 서비스 'CalciService'삽입
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)
}
})
공급자
구성 단계에서 내부적으로 서비스 또는 팩토리를 생성하기 위해 Provider를 사용합니다. Provider는 값 / 서비스 / 팩토리를 반환하는 데 사용되는 get () 함수가있는 특수 팩토리 메서드입니다.
예:
// 모듈 정의
var firstApp = angular.module ( 'firstApp', [])
...
// 메서드 스퀘어를 정의하는 공급자를 사용하여 서비스를 생성하여
숫자의 제곱.
firstApp.config (function ($ provide) {
$ provide.provider ( 'MathService', function () {
this. $ get = function () {
var 공장 =
factory.multiply = function (x, y) {
반환 x * y
}
반품 공장
}
})
})
일정한
사용자가 module.config () 함수에 값을 주입 할 수 없으므로 상수를 사용합니다. 상수는 구성 단계에서 값을 전달하는 데 사용됩니다.
firstApp.constant ( 'configParam', '상수 값')
예:
위에서 언급 한 지시문은 다음과 같은 방식으로 사용할 수 있습니다.
의존성 주입
AngularJS 제곱 예제
숫자 입력 :
엑스2
결과 : {{result}}
var firstApp = angular.module ( 'firstApp', [])
firstApp.config (function ($ provide) {
$ provide.provider ( 'MathService', function () {
this. $ get = function () {
var 공장 =
factory.multiply = function (x, y) {
반환 x * y
}
반품 공장
}
})
})
firstApp.value ( 'defaultInput', 6)
firstApp.factory ( 'MathService', function () {
var 공장 =
factory.multiply = function (x, y) {
반환 x * y
}
반품 공장
})
firstApp.service ( 'CalciService', function (MathService) {
this.square = function (x) {
return MathService.multiply (x, x)
}
})
goto 함수 C ++
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 기사의 종속성 주입을 마칩니다. 씨 도대체 전 세계에 걸쳐 250,000 명 이상의 만족 한 학습자 네트워크를 보유한 신뢰할 수있는 온라인 학습 회사 인 Edureka에서 작성했습니다.
질문이 있으십니까? AngularJs의이 종속성 주입의 주석 섹션에 언급 해 주시면 다시 연락 드리겠습니다.