AngularJS_AngularJS의 종속성 주입 메커니즘에 대한 자세한 설명
종속성 주입은 구성 요소 내에서 종속성을 하드 코딩하여 구성 요소에 제공하는 방식으로 대체하는 소프트웨어 설계 패턴입니다. 이를 통해 하나의 구성 요소가 종속성을 찾는 것부터 종속성 구성까지 완화됩니다. 이는 구성 요소를 재사용, 유지 관리 및 테스트 가능하게 만드는 데 도움이 됩니다.
AngularJS는 최고의 종속성 주입 메커니즘을 제공합니다. 서로 종속성을 주입할 수 있는 다음과 같은 핵심 구성 요소를 제공합니다.
- 가치
- 공장
- 서비스
- 제공자
- 상수값
가치
값은 구성 단계 컨트롤러 중에 값을 전달하는 데 사용되는 간단한 JavaScript 개체입니다.
//define a module
var mainApp = angular.module("mainApp", []);
//create a value object as "defaultInput" and pass it a data.
mainApp.value("defaultInput", 5);
...
//inject the value in the controller using its name "defaultInput"
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
$scope.number = defaultInput;
$scope.result = CalcService.square($scope.number);
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
});
공장
팩토리는 함수의 값을 반환하는 데 사용됩니다. 서비스나 컨트롤러가 필요할 때마다 수요에 따라 가치를 창출합니다. 일반적으로 팩토리 함수를 사용하여 해당 값을 계산하고 반환합니다
//define a module
var mainApp = angular.module("mainApp", []);
//create a factory "MathService" which provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b
}
return factory;
});
//inject the factory "MathService" in a service to utilize the multiply method of factory.
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
...
서비스
서비스는 특정 작업을 수행하는 기능 집합이 포함된 단일 JavaScript 개체입니다. 서비스는 service() 함수를 사용하여 정의된 다음 컨트롤러에 주입됩니다.
//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service which defines a method square to return square of a number.
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
//inject the service "CalcService" into the controller
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
$scope.number = defaultInput;
$scope.result = CalcService.square($scope.number);
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
});
공급자
AngularJS 내부 생성 프로세스의 구성 단계에서 사용되는 공급자 서비스, 팩토리 등(AngularJS가 자체적으로 부트스트랩하는 경우에 해당) 아래에 언급된 스크립트를 사용하여 이전에 이미 만든 MathService를 만들 수 있습니다. 공급자는 값/서비스/공장을 반환하는 특수 팩토리 메서드 및 get() 메서드입니다.
//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service using provider which defines a method square to return square of a number.
mainApp.config(function($provide) {
$provide.provider('MathService', function() {
this.$get = function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
};
});
});
상시
상수는 구성 단계에서 값을 전달할 수 없고, 구성 단계에서 값을 전달할 수 없다는 사실을 설명하기 위해 사용됩니다.
mainApp.constant("configParam", "constant value");
예
다음 예에서는 위의 모든 명령을 보여줍니다.
testAngularJS.html
<html>
<head>
<title>AngularJS Dependency Injection</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="CalcController">
<p>Enter a number: <input type="number" ng-model="number" />
<button ng-click="square()">X<sup>2</sup></button>
<p>Result: {{result}}</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.config(function($provide) {
$provide.provider('MathService', function() {
this.$get = function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
};
});
});
mainApp.value("defaultInput", 5);
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
});
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.square($scope.number);
}
});
</script>
</body>
</html>
결과
웹 브라우저에서 textAngularJS.html을 엽니다. 아래 결과를 참조하세요.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7625
15
1389
52
89
11
70
19
31
138
Angular의 종속성 주입을 이해하기 위한 단계별 가이드
Dec 02, 2022 pm 09:14 PM
이 글은 여러분에게 의존성 주입을 소개하고, 의존성 주입이 해결하는 문제와 그 기본 작성 방법을 소개하고, Angular의 의존성 주입 프레임워크에 대해 이야기할 것입니다. 여러분에게 도움이 되기를 바랍니다.
Phalcon 프레임워크에서 종속성 주입(Dependency Injection)을 사용하는 방법
Jul 30, 2023 pm 09:03 PM
Phalcon 프레임워크에서 종속성 주입(DependencyInjection)을 사용하는 방법 소개: 현대 소프트웨어 개발에서 종속성 주입(DependencyInjection)은 코드의 유지 관리성과 테스트 가능성을 향상시키는 것을 목표로 하는 일반적인 디자인 패턴입니다. 빠르고 저렴한 PHP 프레임워크인 Phalcon 프레임워크는 종속성 주입을 사용하여 애플리케이션 종속성을 관리하고 구성하는 기능도 지원합니다. 이 글에서는 Phalcon 프레임워크를 사용하는 방법을 소개합니다.
입문부터 숙달까지, 2022년 최신 5개 Anglejs 튜토리얼
Jun 15, 2017 pm 05:50 PM
자바스크립트는 코드의 구성, 코드의 프로그래밍 패러다임, 객체지향 이론 측면에서 매우 독특한 언어입니다. 하지만 20년 동안 Javascript가 지배했음에도 불구하고 jQuery, Angularjs, 심지어 React와 같은 인기 프레임워크를 이해하려면 "Black Horse Cloud Classroom JavaScript Advanced Framework"를 시청하세요. 디자인 비디오 튜토리얼'을 참조하세요.
Golang 함수 매개변수 전달 시 종속성 주입 패턴
Apr 14, 2024 am 10:15 AM
Go에서 DI(종속성 주입) 모드는 값 전달 및 포인터 전달을 포함한 함수 매개변수 전달을 통해 구현됩니다. DI 패턴에서 종속성은 일반적으로 디커플링을 개선하고 잠금 경합을 줄이며 테스트 가능성을 지원하기 위해 포인터로 전달됩니다. 포인터를 사용하면 함수는 인터페이스 유형에만 의존하기 때문에 구체적인 구현에서 분리됩니다. 또한 포인터 전달은 큰 개체 전달에 따른 오버헤드를 줄여 잠금 경합을 줄입니다. 또한 DI 패턴을 사용하면 종속성을 쉽게 모의할 수 있으므로 DI 패턴을 사용하는 함수에 대한 단위 테스트를 쉽게 작성할 수 있습니다.
PHP와 AngularJS를 사용하여 반응형 웹사이트를 구축하여 고품질 사용자 경험 제공
Jun 27, 2023 pm 07:37 PM
오늘날의 정보화 시대에 웹사이트는 사람들이 정보를 얻고 소통하는 중요한 도구가 되었습니다. 반응형 웹사이트는 다양한 기기에 적응하고 사용자에게 고품질 경험을 제공할 수 있으며, 이는 현대 웹사이트 개발에서 핫스팟이 되었습니다. 이 기사에서는 PHP와 AngularJS를 사용하여 고품질 사용자 경험을 제공하는 반응형 웹사이트를 구축하는 방법을 소개합니다. PHP 소개 PHP는 웹 개발에 이상적인 오픈 소스 서버측 프로그래밍 언어입니다. PHP는 배우기 쉬움, 크로스 플랫폼, 풍부한 도구 라이브러리, 개발 효율성 등 많은 장점을 가지고 있습니다.
JUnit 단위 테스트 프레임워크를 사용한 종속성 주입
Apr 19, 2024 am 08:42 AM
JUnit을 사용하여 종속성 주입을 테스트하는 경우 요약은 다음과 같습니다. 모의 개체를 사용하여 종속성 생성: @Mock 주석은 종속성의 모의 개체를 생성할 수 있습니다. 테스트 데이터 설정: @Before 메서드는 각 테스트 메서드 이전에 실행되며 테스트 데이터를 설정하는 데 사용됩니다. 모의 동작 구성: Mockito.when() 메서드는 모의 객체의 예상 동작을 구성합니다. 결과 확인: AssertEquals()는 실제 결과가 예상 값과 일치하는지 확인하기 위해 어설션합니다. 실제 적용: 종속성 주입 프레임워크(예: Spring Framework)를 사용하여 종속성을 주입하고 JUnit 단위 테스트를 통해 주입의 정확성과 코드의 정상적인 작동을 확인할 수 있습니다.
Go 언어: 의존성 주입 가이드
Apr 07, 2024 pm 12:33 PM
답변: Go 언어에서는 인터페이스와 구조를 통해 종속성 주입을 구현할 수 있습니다. 종속성 동작을 설명하는 인터페이스를 정의합니다. 이 인터페이스를 구현하는 구조를 만듭니다. 인터페이스를 통해 함수의 매개변수로 종속성을 주입합니다. 테스트 또는 다양한 시나리오에서 종속성을 쉽게 교체할 수 있습니다.
PHP에서 의존성 주입 (DI)의 개념을 설명하십시오.
Apr 05, 2025 am 12:07 AM
PHP에서 의존성 주입 (DI)을 사용하는 핵심 값은 느슨하게 결합 된 시스템 아키텍처의 구현에 있습니다. DI는 외부 적으로 종속성을 제공하여 코드 테스트 성과 유연성을 향상시켜 클래스 간의 직접 종속성을 줄입니다. DI를 사용하는 경우 생성자, 설정 포인트 메소드 또는 인터페이스를 통해 종속성을 주입하고 IOC 컨테이너와 함께 객체 라이프 사이클 및 종속성을 관리 할 수 있습니다.
