AngularJS 의존성 주입 구성 요소
제임스 하트만
⚡ 스마트 요약
AngularJS의 의존성 주입은 컴포넌트가 직접 객체를 구축하는 대신, 컴포넌트가 의존하는 객체를 프레임워크 주입기로부터 런타임에 제공받도록 합니다. 따라서 컨트롤러는 실행 시간에 프레임워크 주입기로부터 `$http`와 같은 서비스를 받게 됩니다.
AngularJS의 종속성 주입이란 무엇입니까?
의존성 주입 AngularJS에서는 종속성을 해결하기 위해 제어 반전을 구현하는 소프트웨어 디자인 패턴입니다. 구성 요소가 종속성을 유지하는 방법을 결정합니다. 구성 요소를 정의하거나 모듈의 실행 및 구성 블록을 제공하는 동안 사용할 수 있습니다. 이를 통해 구성 요소를 재사용, 테스트 및 유지 관리 가능하게 만들 수 있습니다.
제어 반전: 이는 개체가 작업을 수행하기 위해 의존하는 다른 개체를 생성하지 않음을 의미합니다. 대신 외부 소스에서 이러한 개체를 가져옵니다. 이는 한 개체가 다른 개체에 종속되는 경우 AngularJS 종속성 주입의 기초를 형성합니다. 기본 개체는 종속 개체를 생성하고 해당 메서드를 사용하는 책임을 맡지 않습니다. 대신 외부 소스(AngularJS에서는 AngularJS 프레임워크 자체)가 종속 개체를 생성하고 추가 사용을 위해 소스 개체에 제공합니다.
⚠️ 버전 참고: AngularJS 지원은 2022년 1월에 종료되었습니다.보안 패치가 적용되지 않은 상태입니다. 최신 Angular는 @Injectable 프로바이더를 통해 주입합니다. 주입()아래 코드는 기록 보존용으로 남겨둡니다.
그럼 먼저 의존성이 무엇인지 알아보겠습니다.
위 다이어그램은 데이터베이스 프로그래밍의 일상적인 의식에 대한 간단한 AngularJS 종속성 주입 예를 보여줍니다.
- '모델' 상자는 일반적으로 데이터베이스와 상호 작용하기 위해 생성되는 "모델 클래스"를 묘사합니다. 따라서 이제 데이터베이스는 "모델 클래스"가 기능하기 위한 종속성입니다.
- 종속성 주입을 통해 데이터베이스에서 모든 정보를 가져오고 모델 클래스에 들어가는 서비스를 만듭니다.
이 튜토리얼의 나머지 부분에서는 의존성 주입과 그것이 어떻게 구현되는지에 대해 더 자세히 살펴보겠습니다. AngularJS와.
AngularJS에서 어떤 컴포넌트를 의존성으로 주입할 수 있나요?
AngularJS에서는 "주입 가능한 팩토리 메서드" 또는 "생성자 함수"를 사용하여 의존성을 주입합니다.
이러한 구성 요소에는 "서비스" 및 "가치" 구성 요소가 종속성으로 주입될 수 있습니다. 우리는 $http 서비스에 대한 이전 주제에서 이것을 보았습니다.
AngularJS 모듈 다섯 가지 레시피를 통해 주입 가능한 물체를 등록합니다.
| 조리법 | 기록되는 내용 |
|---|---|
| 가치 | 설정 블록에 보이지 않는 준비된 객체 |
| 공장 | 반환값이 주입되는 함수 |
| 서비스 | 새로운 객체를 생성하여 한 번 인스턴스화합니다. |
| 공급자 | $get을 노출하는 구성 가능한 레시피 |
| 상수 | 설정 블록에서 읽을 수 있는 고정 값 |
우리는 $http 서비스를 AngularJS 내에서 사용하여 MySQL 또는 MS SQL 서버 데이터베이스를 통해 PHP 웹 애플리케이션.
$http 서비스는 일반적으로 컨트롤러 내에서 다음과 같은 방식으로 정의됩니다.
sampleApp.controller ('AngularJSController', function ($scope, $http)
이제 위와 같이 컨트롤러에 $http 서비스가 정의되었습니다. 이는 컨트롤러가 이제 $http 서비스에 종속된다는 의미입니다.
따라서 위 코드가 실행되면 AngularJS는 다음 단계를 수행합니다.
- "$http 서비스"가 인스턴스화되었는지 확인하세요. 이제 "컨트롤러"가 "$http 서비스"에 의존하므로 이 서비스의 개체를 컨트롤러에서 사용할 수 있도록 해야 합니다.
- AngularJS가 $http 서비스가 인스턴스화되지 않았음을 발견하면 AngularJS는 'factory' 함수를 사용하여 $http 객체를 생성합니다.
- AngularJS 내의 인젝터는 추가 처리를 위해 컨트롤러에 $http 서비스 인스턴스를 제공합니다.
주석 형식: 암묵적 주석 매개변수 이름을 읽기 때문에 축소 과정에서 오류가 발생합니다. 인라인 배열 표기법과 $inject는 모두 유지되지만, ng-app의 ng-strict-di는 암시적 주석을 거부합니다.
이제 컨트롤러에 종속성이 주입되었으므로 추가 처리를 위해 $http 서비스 내에서 필요한 기능을 호출할 수 있습니다.
의존성 주입의 예
이번 예제에서는 AngularJS에서 종속성 주입을 사용하는 방법을 알아봅니다.
의존성 주입은 2가지 방법으로 구현될 수 있습니다.
- 하나는 "가치 구성 요소"를 통한 것입니다.
- 또 다른 하나는 "서비스"를 통해서입니다.
두 가지 방법의 구현을 더 자세히 살펴보겠습니다.
1) 가치 구성요소
이 개념은 간단한 것을 만드는 데 기반을 두고 있습니다. JavaScript 객체를 생성하고 추가 처리를 위해 컨트롤러로 전달합니다.
이는 아래 두 단계를 사용하여 구현됩니다.
단계 1) 만들기 Java값 구성 요소를 사용하여 스크립트 객체를 생성하고 이를 메인 AngularJS 모듈에 연결합니다.
값 구성 요소는 두 개의 매개변수를 갖습니다. 하나는 키이고, 다른 하나는 값입니다. Java생성된 스크립트 객체입니다.
단계 2) 액세스 Java스크립트 객체에서 AngularJS 컨트롤러
<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="sampleApp">
<div ng-controller="AngularJSController">
<h3> Guru99 Global Event</h3>
{{ID}}
</div>
<script>
var sampleApp = angular.module('sampleApp',[]);
sampleApp.value("TutorialID", 5);
sampleApp.controller('AngularJSController', function($scope,TutorialID) {
$scope.ID =TutorialID;
});
</script>
</body>
</html>
위 코드는 아래 단계를 수행합니다.
-
sampleApp.value("TutorialID", 5);AngularJS 모듈의 value 함수를 사용하여 "TutorialID"라는 키-값 쌍과 "5"라는 값을 생성합니다.
-
sampleApp.controller('AngularJSController', function ($scope,TutorialID)
이제 TutorialID 변수는 함수 매개변수로 컨트롤러에 액세스할 수 있습니다.
-
$scope.ID =TutorialID;
TutorialID 변수의 값인 5가 이제 ID라는 다른 변수에 할당됩니다. $스코프 객체입니다. 이렇게 하는 이유는 컨트롤러에서 뷰로 5라는 값을 전달하기 위해서입니다.
-
{{ID}}ID 매개변수는 표현식으로 뷰에 표시됩니다. 따라서 '5'의 출력이 페이지에 표시됩니다.
위의 코드가 실행되면 아래와 같이 출력됩니다.
2) 서비스
서비스는 싱글톤으로 정의됩니다. Java컨트롤러에 노출하고 주입하려는 함수 세트로 구성된 스크립트 객체입니다.
예를 들어, "$http"는 AngularJS의 서비스로, 컨트롤러에 주입되면 필요한 기능을 제공합니다.
( get() , query() , save() , 제거(), delete() ).
그런 다음 컨트롤러에서 해당 함수를 적절하게 호출할 수 있습니다.
간단한 예를 들어, 자신의 서비스를 만드는 방법을 살펴보겠습니다. 두 개의 숫자를 더하는 간단한 추가 서비스를 만들 것입니다.
<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<h3> Guru99 Global Event</h3>
<div ng-app = "mainApp" ng-controller = "DemoController">
<p>Result: {{result}}</p>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.service('AdditionService', function(){
this.ADDITION = function(a,b) {
return a+b;
}
});
mainApp.controller('DemoController', function($scope, AdditionService) {
$scope.result = AdditionService.ADDITION(5,6);
});
</script>
</body>
</html>
위의 예에서 다음 단계가 수행됩니다.
-
mainApp.service('AdditionService', function()
여기서는 메인 AngularJS 모듈의 서비스 매개변수를 사용하여 'AdditionService'라는 새로운 서비스를 생성합니다.
-
this.ADDITION = function(a,b)
여기서는 서비스 내에 'ADDITION'이라는 새로운 함수를 생성합니다. 즉, AngularJS가 컨트롤러 내에서 AdditionService를 인스턴스화하면 'ADDITION' 함수에 접근할 수 있게 됩니다. 이 함수 정의에서는 이 함수가 'a'와 'b'라는 두 개의 매개변수를 받는다고 명시하고 있습니다.
-
return a+b;여기서는 매개변수들을 더하고 더해진 값을 반환하는 단순한 덧셈 함수의 본문을 정의합니다.
-
mainApp.controller('DemoController', function($scope, AdditionService)
이것이 바로 의존성 주입과 관련된 핵심 단계입니다. 컨트롤러 정의에서 이제 'AdditionService' 서비스를 참조하고 있습니다. AngularJS는 이를 만나면 'AdditionService' 타입의 객체를 인스턴스화합니다.
-
$scope.result = AdditionService.ADDITION(5,6);
이제 우리는 서비스에 정의된 'ADDITION' 함수에 접근하여 컨트롤러의 $scope 객체에 할당하고 있습니다.
이는 서비스를 정의하고 컨트롤러 내부에 해당 서비스의 기능을 주입하는 방법에 대한 간단한 예입니다.
