의존성 주입을 AngularJS와
의존성 주입은 무엇입니까
위키에 대한 설명은 다음과 같습니다 의존성 주입 (의존성 주입이, DI 약칭)는 소프트웨어 디자인 패턴은,이 모드에서, 하나 이상의 종속 (또는 서비스) 독립적으로 주입 (또는 참조로 전달)입니다 다음 개체 (또는 클라이언트)와 클라이언트 상태의 일부가되었다.
이 모델은 클라이언트가 느슨하게 결합된다 프로그램 디자인을 만드는 동작을 만들 수 자체에 의존 분리, 단일 및 책임의 종속성 반전 원리를 따른다. 서비스 로케이터 패턴 형성과 직접 비교는 클라이언트 의존성을 찾기 위해 시스템을 사용하는 방법을 이해하는 클라이언트 수 있다는
단어는 --- 당신이 나에게 오지 않는 것도, 내가 당신에게 뭔가를 찾을 수 있습니다.
AngularJS와 의존성 주입을위한 좋은 메커니즘을 제공합니다. 의존성 주입에 사용되는 다음과 같은 다섯 가지 핵심 구성 요소 :
- 값
- 공장
- 서비스
- 공급자
- 상수
값
값에 대한 간단한 자바 스크립트 객체, 컨트롤러 (구성 상)에 값을 전달할 수 있습니다 :
// 定义一个模块
var mainApp = angular.module("mainApp", []);
// 创建 value 对象 "defaultInput" 并传递数据
mainApp.value("defaultInput", 5);
...
// 将 "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);
}
});
공장
공장은 값을 반환하는 함수입니다. 생성 및 서비스 요구시기 제어기를 포함한다.
일반적으로 우리는 계산하거나 공장 함수 반환 값으로 사용합니다.
// 定义一个模块
var mainApp = angular.module("mainApp", []);
// 创建 factory "MathService" 用于两数的乘积 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;
});
// 在 service 中注入 factory "MathService"
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
...
공급자
공급자의 서비스, 공장 등 (구성 상)에 의해 생성 AngularJS와.
공급자 값 / 서비스 / 공장을 반환하는 팩토리 메소드 GET ()을 제공한다.
// 定义一个模块
var mainApp = angular.module("mainApp", []);
...
// 使用 provider 创建 service 定义一个方法用于计算两数乘积
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");
예
하기 실시 예는 여러 종속 분사기구 데모 이상을 제공한다.
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 依赖注入</title>
</head>
<body>
<h2>AngularJS 简单应用</h2>
<div ng-app = "mainApp" ng-controller = "CalcController">
<p>输入一个数字: <input type = "number" ng-model = "number" /></p>
<button ng-click = "square()">X<sup>2</sup></button>
<p>结果: {{result}}</p>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/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>