AngularJS_AngularJS의 종속성 주입 메커니즘에 대한 자세한 설명
- WBOY원래의
- 2016-05-16 15:54:301098검색
종속성 주입은 구성 요소 내에서 종속성을 하드 코딩하여 구성 요소에 제공하는 방식으로 대체하는 소프트웨어 설계 패턴입니다. 이를 통해 하나의 구성 요소가 종속성을 찾는 것부터 종속성 구성까지 완화됩니다. 이는 구성 요소를 재사용, 유지 관리 및 테스트 가능하게 만드는 데 도움이 됩니다.
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을 엽니다. 아래 결과를 참조하세요.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.