AngularJS의 의존 주입

종속 주입 | Dependency Injection 링크: Angular Dependency Injection
앵커
년 02월 10일
설명: 번역자는 본문의 모든 명사성의
의존하다
필요한 자원"이라고 말했다.
Dependency Injection(DI, 의존 주입)은 프로그램이 의존(대상의) 인용을 얻는 방법을 처리하는 소프트웨어 디자인 모델이다.
DI에 대한 심도 있는 토론은 위키백과에서 Dependency Injection, Martin Fowler가 작성한 제어 반전(Inversion of Control)을 참고하거나 DI 디자인 모델에 관한 서적/자료를 읽으십시오.
종속 주입 개요 | DI in a nutshell 객체 또는 함수는 종속(의 객체) 참조를 얻기 위한 3가지 방법입니다.

의존은 사용자가 직접 만들 수 있으며 new 조작부호를 통해 만들 수 있다.

의존은 전역 변수(예를 들어 window)를 통해 찾을 수 있고 인용할 수 있다

의존은 필요한 곳에 전달될 수 있다

이전의 두 가지 창설이나 의존을 찾는 방식은 결코 가장 좋은 것이 아니다. 왜냐하면 그들은 의존에 대해 하드코딩을 했기 때문이다.이로 인해 의존이 사용할 수 없을 때 의존과 관련된 코드를 수정하는 것은 매우 어렵고 번거롭다.테스트에서 더욱 문제가 있다. 왜냐하면 보통 시뮬레이션 의존을 통해 격리 테스트를 해야 하기 때문이다.
세 번째 선택은 구성 요소에서 의존 위치를 찾는 책임을 없애기 때문에 가장 실행 가능한 방법이라고 할 수 있다.단순히 의존을 구성 요소에 전달하기만 하면 된다.

function SomeClass(greeter) {
  this.greeter = greeter;
}
 
SomeClass.prototype.doSomething = function(name) {
  this.greeter.greet(name);
}

위의 예에서
SomeClass는 신경 안 써도 돼요.
greeter가 어디에 있는지, 실행할 때 누군가가 greeter를 그에게 전달하기만 하면 됩니다.
이것은 바람직하지만, 의존의 책임을 SomeClass를 구성하는 코드에 맡긴다.
창설에 의존하는 책임을 관리하려면 Angular 애플리케이션마다
injector .이 injector는 서비스 locator (포지셔닝 머신) 로 의존을 만들고 찾는 것을 책임집니다.
다음은 injector 서비스를 사용하는 예입니다.

//             
angular.module('myModule', []).
 
  //    injector         'greeter'
  //   , greeter        '$window'  
  factory('greeter', function($window) {
    //      factory function, 
    //         'greet'   .
    return {
      greet: function(text) {
        $window.alert(text);
      }
    };
  });
 
//    injector    module   . 
// (     angular bootstrap     )
var injector = angular.injector(['myModule', 'ng']);
 
//   injector       
var greeter = injector.get('greeter');

의존 관계의 하드코딩 문제를 해결하려면 injector가 전체 응용 프로그램의 생명 주기를 관통해야 한다는 것을 의미한다.전달 injector가 깨졌어요.
드메테이의 법칙(Law of Demeter, 최소 지식의 원칙).이를 보완하기 위해 다음 예에서 우리는 의존 성명 방식을 통해 의존 직책을 찾는 것을 injector에 맡겼다.
HTML 코드:

<!-- Given this HTML -->
<div ng-controller="MyController">
  <button ng-click="sayHello()">Hello</button>
</div>

Angular 코드

//    controller   
function MyController($scope, greeter) {
  $scope.sayHello = function() {
    greeter.greet('Hello World');
  };
}
 
//   'ng-controller' directive      
injector.instantiate(MyController);

ng-controller를 통해 이런 것들을 실례화하면 controller가 injector가 있는지 모르는 상황에서 My Controller의 모든 의존을 충족시킬 수 있습니다.이것은 가장 좋은 결과다.응용 프로그램 코드는 injector와 접촉할 필요가 없이 필요한 의존항을 간단하게 요구합니다.이 설정은 테메테이의 법칙에 위배되지 않는다.
메모 의존 | Dependency Annotation injector 에서 어떤 서비스를 주입해야 하는지 어떻게 알 수 있습니까?
의존 관계를 해결하기 위해서, 응용 프로그램 개발자는 injector가 필요로 하는 annotation 정보를 제공해야 한다.Angular에서 일부 API 함수는 injector를 사용하여 호출되므로 API 설명서를 따릅니다.jector는 함수에 어떤 서비스를 주입하는지 알아야 합니다.다음은 서비스 name 정보를 통해 코드에 대한 주석을 하는 세 가지 등가 방식입니다.그들은 모두 등가이니 너는 적당한 곳에서 서로 바꾸어 사용할 수 있다.
의존 관계 추정 | Inferring Dependencies에서 가장 간단하게 의존을 얻는 방법은 함수 매개 변수의 이름과 의존의 이름을 일치시키는 것이다.

function MyController($scope, greeter) {
  ...
}

function을 지정하면 injector는 함수 성명과 추출 매개 변수의 이름을 검사하여 서비스의 이름을 추정할 수 있습니다.위의 예에서 $scope와greeter는function을 주입해야 하는 두 서비스입니다.
간단하고 직접적이지만 JavaScript가 압축/혼동할 때 이 방법은 방법의 매개 변수 이름을 바꾸기 때문에 효력을 상실합니다.이것은 이러한 주석 방식을pretotyping이나 데모 프로그램에만 적용합니다.
$inject 메모 | $inject Annotation은 코드를 압축한 후에도 올바른 서비스를 주입할 수 있도록 함수를 통과해야 합니다.
$inject 속성으로 주석을 달습니다. $ject 속성은 주입해야 할 서비스 이름을 포함하는 그룹입니다.

var MyController = function(renamed$scope, renamedGreeter) {
  ...
}
MyController['$inject'] = ['$scope', 'greeter'];

이 경우 $inject 그룹의 값의 순서는 주입할 파라미터의 순서와 일치해야 합니다.위의 코드 세션을 예로 들면 '
$scope'이(가) "
renamed$scope
greeter가 "
renamedGreeter”.$inject 주석은 함수 성명 시 실제 매개 변수와 동기화되어야 합니다. (순서, 개수...)
controller 성명에 있어서, 이러한 주석 방법은 매우 유용하다. 왜냐하면 주석 정보를function에 부여했기 때문이다.
인라인 메모 | Inline Annotation 은 때때로 $inject 메모를 사용하기 어려울 때가 있습니다. 예를 들어 메모directives 때입니다.
예를 들면 다음과 같습니다.

someModule.factory('greeter', function($window) {
  ...
});

임시 변수를 사용해야 하기 때문에 코드가 다음과 같이 팽창했다.

var greeterFactory = function(renamed$window) {
  ...
};
greeterFactory.$inject = ['$window'];
someModule.factory('greeter', greeterFactory);

이것도 세 번째 주해 방식을 제공하는 원인이다.

someModule.factory('greeter', ['$window', function(renamed$window) {
  ...
}]);

모든 annotation 스타일은 등가이며 Angular에서는 주입을 지원하는 곳만 사용할 수 있음을 기억하십시오.
DI | Where can I use DI를 사용해야 하는 곳은 무엇입니까?
DI는 Angular에 없는 곳이 없다.그것은 통상적으로 controllers와 공장 방법에 사용된다.
컨트롤러에서 DI | DI in controllers Controllers 클래스를 사용하여 응용 프로그램의 동작을 담당합니다.Controllers를 선언하는 권장 방법은 배열 표현을 사용하는 것입니다.

someModule.controller('MyController', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) {
  ...
  $scope.aMethod = function() {
    ...
  }
  ...
}]);

이것은 controllers에 전역 함수를 만드는 것을 피하고 코드가 압축될 때 계속 사용할 수 있습니다.
플랜트 메서드 | Factory methods 플랜트 메서드는 Angular에서 대부분의 객체를 작성합니다.예는directives, 서비스, 그리고 Filters입니다.공장 방법이 모듈에 등록되어 공장의 추천 방법은 다음과 같다.

angular.module('myModule', []).
  config(['depProvider', function(depProvider){
    ...
  }]).
  factory('serviceId', ['depService', function(depService) {
    ...
  }]).
  directive('directiveName', ['depService', function(depService) {
    ...
  }]).
  filter('filterName', ['depService', function(depService) {
    ...
  }]).
  run(['depService', function(depService) {
    ...
  }]);