AngularJS
의존성 주입

통사론

• myApp.controller ( 'MyController', function ($ scope) {...}); // 비공식 코드

• myApp.controller ( 'MyController', [ '$ scope', function ($ scope) {...}]); // minification 지원

• function MyController () {}

  MyController. $ inject = [ '$ scope'];

  myApp.controller ( 'MyController', MyController); // $ inject 주석

• $ injector.get ( 'injectable'); // 동적 / 런타임 주입

비고

주사

Angular app에 주입의 가장 단순한 예 - Angular Controller $scope 를 주입하는 것 :

angular.module('myModule', [])
.controller('myController', ['$scope', function($scope) {
    $scope.members = ['Alice', 'Bob'];
    ...
}])

위의 그림은 controller $scope 를 주입하는 것을 보여줍니다.하지만 다른 모듈에 다른 모듈을 삽입했는지 여부는 동일합니다. 과정은 동일합니다.

Angular의 시스템은 당신을위한 의존성을 해결하는 역할을합니다. 예를 들어 서비스를 만든 경우 위의 예와 같이 서비스를 나열하면 사용할 수 있습니다.

구성 요소를 정의 할 때마다 DI - Dependency Injection을 사용할 수 있습니다.

위의 예제에서 우리는 "인라인 배열 주석"을 사용합니다. 의미, 우리는 명시 적으로 우리의 의존성의 이름을 문자열로 작성합니다. 프로덕션 용으로 코드가 축소 될 때 응용 프로그램이 손상되지 않도록하기 위해이 작업을 수행합니다. 코드 축소는 변수 이름 (문자열은 아님)을 변경하여 주입을 중단시킵니다. 문자열을 사용하여 Angular는 우리가 원하는 종속성을 알고 있습니다.

매우 중요 - 문자열 이름의 순서는 함수의 매개 변수와 동일해야합니다.

이 프로세스를 자동화하고이를 처리하는 도구가 있습니다.

다이나믹 인젝션

구성 요소를 동적으로 요청하는 옵션도 있습니다. $injector 서비스를 사용하면됩니다.

myModule.controller('myController', ['$injector', function($injector) {
    var myService = $injector.get('myService');
}]);

참고 :이 방법은 앱을 손상시킬 수있는 순환 종속성 문제를 방지하는 데 사용할 수 있지만이를 사용하여 문제를 우회하는 것이 가장 좋습니다. 순환 의존성은 대개 응용 프로그램의 구조에 결함이 있음을 나타내므로이를 대신 처리해야합니다.

$ inject 속성 주석

마찬가지로 $inject 속성 주석을 사용하여 위와 같은 결과를 얻을 수 있습니다.

var MyController = function($scope) {
  // ...
}
MyController.$inject = ['$scope'];
myModule.controller('MyController', MyController);

바닐라에서 AngularJS 서비스 동적로드 JavaScript

AngularJS injector() 메소드를 사용하여 바닐라 자바 ​​스크립트에서 AngularJS 서비스를로드 할 수 있습니다. angular.element() 호출 angular.element() 검색된 모든 jqLite 요소에는 인젝터를 검색하는 데 사용할 수있는 injector() 메서드가 있습니다.

var service;
var serviceName = 'myService';

var ngAppElement = angular.element(document.querySelector('[ng-app],[data-ng-app]') || document);
var injector = ngAppElement.injector();

if(injector && injector.has(serviceNameToInject)) {
    service = injector.get(serviceNameToInject);
}

위의 예제에서 우리는 AngularJS 애플리케이션 ( ngAppElement )의 루트를 포함하는 jqLite 요소를 검색하려고합니다. 이를 위해 angular.element() 메서드를 사용하여 ng-app 또는 data-ng-app 특성을 포함하는 DOM 요소를 검색하거나, 존재하지 않으면 document 요소로 되돌아갑니다. ngAppElement 를 사용하여 injector 인스턴스를 검색합니다 ( ngAppElement.injector() ). 인젝터 인스턴스는 인젝션 서비스가 존재하는지 ( injector.has() ) 있는지 확인한 다음 service 변수 injector.get() )를 service 변수에로드하는지 확인하는 데 사용됩니다.