AngularJS 앱에 종속성 주입

AngularJS에서 function 인수, 배열 인수 및 $inject 서비스를 사용하여 종속성을 전달하는 방법에 대한 간략한 개요입니다.

Dhananjay Kumar Last Updated Feb 25, 2025 5min read

AngularJS의 첫 번째 특성을 배우기 시작하면 DI(Dependency Injection)라는 것을 접할 수 있습니다: 이는 AngularJS가 애플리케이션이 의존성을 필요로 할 때마다 의존성을 주입한다는 전제입니다. 개발자로서 우리의 임무는 모듈에 종속성을 전달하는 것뿐이며 나머지는 AngularJS에서 처리합니다. 이제 시장에서 가장 우수한 Angular 구성 요소 라이브러리 중 하나 인 Ignite UI for Angular 사용하여 모든 작업이 쉽게 수행되는 방법을 보여 드릴 수 있습니다.

컨트롤러를 만들려면 $scope 객체와 기타 종속성을 모듈의 controller 함수에 전달합니다. 예를 들어, ProductController를 생성하기 위해 $scope 객체와 계산기 서비스 종속성을 전달합니다. 이것은 개발자로서 우리의 임무는 종속성을 전달하는 것이고 AngularJS는 응용 프로그램이 필요할 때마다 종속성을 주입한다는 지식을 반복합니다.

컨트롤러를 생성하고, $scope 객체와 다른 종속성을 모듈의 controller 함수에 전달합니다.

우리의 관점에서 볼 때, 우리는 AngularJS가 종속성을 주입하는 방법에 대해 신경 쓰지 않습니다 – 응용 프로그램을 개발하기 위해 주입 프로세스가 어떻게 작동하는지 알 필요가 없습니다. 그러나 종속성을 전달하는 다양한 방법을 알고 있으면 더 좋습니다. AngularJS에서는 세 가지 가능한 방법으로 종속성을 전달할 수 있습니다. 그것들은 다음과 같습니다:

종속성을 Function Arguments로 전달하기
종속성을 Array Arguments로 전달
$inject 서비스를 사용하여 종속성 전달

이러한 옵션을 하나씩 살펴보겠습니다.

종속성을 Function Argument로 전달하기

어쩌면 당신은 의존성을 함수 인수로 자주 전달하는 자신을 발견 할 것입니다. 예를 들어, 아래 목록과 같이 컨트롤러를 만들기 위해 $scope 개체를 전달합니다.

app.controller("ProductController", function ($scope) {
    $scope.message = "Hey I am passed as function argument"
});

종속성을 함수 인수로 전달하는 것은 축소된 버전의 응용 프로그램을 사용하여 프로덕션에 응용 프로그램을 배포할 때까지 잘 작동합니다. 일반적으로 성능을 향상시키기 위해 프로덕션에서 애플리케이션을 축소하지만 종속성을 함수 인수로 전달하면 애플리케이션을 축소할 때 중단됩니다.

종속성을 함수 인수로 전달하는 것은 애플리케이션을 배포할 때까지 잘 작동합니다

분명히 프로덕션에서는 성능 향상을 위해 축소된 버전의 응용 프로그램을 배포하고 싶지만 매개 변수 이름이 더 짧은 별칭 이름으로 변경되기 때문에 응용 프로그램이 중단됩니다. 이러한 생산 중단을 방지하려면 다른 옵션을 선택해야 합니다.

종속성을 Array Arguments로 전달

아마도 AngularJS 응용 프로그램에서 종속성을 전달하는 가장 일반적인 방법은 배열 인수로 전달하는 것입니다. 종속성을 Array Argument로 전달하면 응용 프로그램을 축소할 때 응용 프로그램이 프로덕션에서 중단되지 않습니다. 다음 두 가지 방법으로 이 작업을 수행할 수 있습니다.

Named 함수 사용
Inline Anonymous 함수 사용

Named 함수 사용

아래 목록과 같이 명명된 함수를 사용하여 종속성을 Array Arguments로 전달할 수 있습니다.

var app = angular.module('app', []);

function ProductController($scope) {
    $scope.greet = "Infragistics";
};
app.controller('ProductController', ['$scope', ProductController]);

보시다시피, 우리는 controller 함수의 이름과 함께 배열에 종속성 $scope 객체를 전달하고 있습니다. 둘 이상의 종속성은 쉼표로 구분되는 한 전달될 수 있습니다. 예를 들어, 아래 목록과 같이 $http 서비스와 $scope 개체를 모두 종속성으로 전달할 수 있습니다.

var app = angular.module('app', []);

function ProductController($scope,$http) {
    $scope.greet = $http.get("api.com");       
};
app.controller('ProductController', ['$scope','$http', ProductController]);

앞에서 논의한 것처럼 종속성을 Array Arguments로 전달해도 응용 프로그램을 축소할 때 응용 프로그램이 중단되지 않습니다.

Inline Anonymous 함수 사용

개인적으로, 나는 인라인 익명 함수를 사용하는 것보다 명명 된 함수를 사용하는 것이 훨씬 편리하다는 것을 알았다. 저에게는 명명 된 컨트롤러 기능을 쉽게 관리 할 수 있습니다. inline 함수를 선호하는 경우 명명된 컨트롤러 함수에서 전달하는 것과 정확히 동일한 방식으로 종속성을 배열 인수로 전달할 수 있습니다. 아래 목록과 같이 인라인 함수의 종속성을 배열 인수로 전달할 수 있습니다.

var app = angular.module('app', []);

app.controller('ProductController', ['$scope', '$http', function ($scope,$http) {
    $scope.greet = "Foo is Great!"
}]);

Array 인수로 주입된 종속성은 응용 프로그램을 축소하더라도 작동한다는 점을 명심하십시오.

$inject 서비스를 사용하여 종속성 전달

AngularJS에 종속성을 주입하는 또 다른 방법은 $inject 서비스를 사용하는 것입니다. 이 과정에서 종속성을 수동으로 주입합니다. 아래 목록과 같이 $inject 서비스를 사용하여 $scope 개체 종속성을 주입할 수 있습니다.

function ProductController($scope){
    $scope.greet = "Foo is Not Great!5";
}

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

app.controller('ProductController', ProductController);

$inject 서비스를 사용해도 프로덕션을 위해 애플리케이션을 축소할 때 애플리케이션이 중단되지 않습니다. 대부분의 경우 컨트롤러의 단위 테스트에서 종속성을 주입하는 데 사용되는 $inject 서비스를 찾을 수 있습니다.

이 기사를 끝내기 전에 $inject를 사용하여 실시간 애플리케이션에서 컨트롤러에 서비스를 주입하는 방법을 살펴보겠습니다. 아래 목록과 같이 서비스를 만들었습니다.

app.factory("Calculator", function () {
    return {
        add: function (a, b) {
            return a + b;
        }
    }
});

CalController 내에서 Calculator 서비스를 사용해야 합니다. CalController는 아래 목록과 같이 생성할 수 있습니다.

app.controller('CalController', CalController);
function CalController($scope, Calculator) {

    $scope.result = 0;
    $scope.add = function () {
        alert("hi22");
        $scope.result= Calculator.add($scope.num1, $scope.num2);
    }
};

이 시점에서 종속성이 함수 인수로 전달되기 때문에 응용 프로그램이 작동해야 합니다. 그러나 응용 프로그램을 축소하면 응용 프로그램이 중단됩니다. 따라서 아래 목록과 같이 $inject 사용하여 종속성을 주입해 보겠습니다.

CalController.$inject = ['$scope', 'Calculator'];

보기에서 컨트롤러는 아래와 같이 사용할 수 있습니다.

<div ng-controller="CalController">
    <input type="number" ng-model="num1" placeholder="Enter number 1" />
    <input type="number" ng-model="num2" placeholder="Enter number 2" />
    <button ng-click="add()">Add</button>
    {{result}}
</div>

그리고 당신은 그것을 가지고 있습니다 – AngularJS 앱에서 종속성을 삽입하는 가장 쉬운 방법입니다.

Angular