AngularJS 종속성 주입: 주입된 구성 요소

AngularJS의 종속성 주입이란 무엇입니까?

의존성 주입 AngularJS에서는 종속성을 해결하기 위해 제어 반전을 구현하는 소프트웨어 디자인 패턴입니다. 구성 요소가 종속성을 유지하는 방법을 결정합니다. 구성 요소를 정의하거나 모듈의 실행 및 구성 블록을 제공하는 동안 사용할 수 있습니다. 이를 통해 구성 요소를 재사용, 테스트 및 유지 관리 가능하게 만들 수 있습니다.

제어 반전: 이는 개체가 작업을 수행하기 위해 의존하는 다른 개체를 생성하지 않음을 의미합니다. 대신 외부 소스에서 이러한 개체를 가져옵니다. 이는 한 개체가 다른 개체에 종속되는 경우 AngularJS 종속성 주입의 기초를 형성합니다. 기본 개체는 종속 개체를 생성하고 해당 메서드를 사용하는 책임을 맡지 않습니다. 대신 외부 소스(AngularJS에서는 AngularJS 프레임워크 자체)가 종속 개체를 생성하고 추가 사용을 위해 소스 개체에 제공합니다.

그럼 먼저 의존성이 무엇인지 알아보겠습니다.

위 다이어그램은 데이터베이스 프로그래밍의 일상적인 의식에 대한 간단한 AngularJS 종속성 주입 예를 보여줍니다.

'모델' 상자는 일반적으로 데이터베이스와 상호 작용하기 위해 생성되는 "모델 클래스"를 묘사합니다. 따라서 이제 데이터베이스는 "모델 클래스"가 기능하기 위한 종속성입니다.
종속성 주입을 통해 데이터베이스에서 모든 정보를 가져오고 모델 클래스에 들어가는 서비스를 만듭니다.

이 튜토리얼의 나머지 부분에서는 종속성 주입과 이것이 AngularJS에서 수행되는 방법에 대해 자세히 살펴보겠습니다.

AngularJS에서 어떤 구성요소를 종속성으로 삽입할 수 있나요?

Angular.JS에서는 "주입 가능한 팩토리 메서드" 또는 "생성자 함수"를 사용하여 종속성을 주입합니다.

이러한 구성 요소에는 "서비스" 및 "가치" 구성 요소가 종속성으로 주입될 수 있습니다. 우리는 $http 서비스에 대한 이전 주제에서 이것을 보았습니다.

우리는 $http 서비스를 AngularJS 내에서 사용하여 MySQL 또는 MS SQL 서버 데이터베이스를 통해 PHP 웹 애플리케이션.

$http 서비스는 일반적으로 컨트롤러 내에서 다음과 같은 방식으로 정의됩니다.

sampleApp.controller ('AngularJSController', function ($scope, $http)

이제 위와 같이 컨트롤러에 $http 서비스가 정의되었습니다. 이는 컨트롤러가 이제 $http 서비스에 종속된다는 의미입니다.

따라서 위 코드가 실행되면 AngularJS는 다음 단계를 수행합니다.

"$http 서비스"가 인스턴스화되었는지 확인하세요. 이제 "컨트롤러"가 "$http 서비스"에 의존하므로 이 서비스의 개체를 컨트롤러에서 사용할 수 있도록 해야 합니다.
AngularJS가 $http 서비스가 인스턴스화되지 않았음을 발견하면 AngularJS는 'factory' 함수를 사용하여 $http 객체를 생성합니다.
그런 다음 Angular.JS 내의 인젝터는 추가 처리를 위해 컨트롤러에 $http 서비스 인스턴스를 제공합니다.

이제 컨트롤러에 종속성이 주입되었으므로 추가 처리를 위해 $http 서비스 내에서 필요한 기능을 호출할 수 있습니다.

의존성 주입의 예

이번 예제에서는 AngularJS에서 종속성 주입을 사용하는 방법을 알아봅니다.

의존성 주입은 2가지 방법으로 구현될 수 있습니다.

하나는 "가치 구성 요소"를 통한 것입니다.
또 다른 하나는 "서비스"를 통해서입니다.

두 가지 방법의 구현을 더 자세히 살펴보겠습니다.

1) 가치 구성요소

이 개념은 간단한 생성이라는 사실을 기반으로 합니다. Java스크립트 추가 처리를 위해 개체를 컨트롤러에 전달합니다.

이는 아래 두 단계를 사용하여 구현됩니다.

단계 1) 만들기 Java값 구성 요소를 사용하여 스크립트 객체를 만들고 이를 기본 AngularJS.JS 모듈에 연결합니다.

값 구성 요소는 두 가지 매개 변수를 사용합니다. 하나는 키이고 다른 하나는 생성된 자바스크립트 객체의 값입니다.

단계 2) 액세스 Java스크립트 객체에서 Angular.JS 컨트롤러

<! 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);
```

Angular.JS JS 모듈의 값 함수는 "TutorialID"라는 키-값 쌍과 값 "5"를 생성하는 데 사용됩니다.

sampleApp.controller('AngularJSController', function ($scope,TutorialID)

이제 TutorialID 변수는 함수 매개변수로 컨트롤러에 액세스할 수 있습니다.

```
 $scope.ID =TutorialID;
```

TutorialID 값 5는 이제 $scope 개체의 ID라는 다른 변수에 할당됩니다. 이는 값 5가 컨트롤러에서 뷰로 전달될 수 있도록 수행되는 것입니다.

```
{{ID}}
```

ID 매개변수는 표현식으로 뷰에 표시됩니다. 따라서 '5'의 출력이 페이지에 표시됩니다.

위의 코드가 실행되면 아래와 같이 출력됩니다.

2) 서비스

서비스는 싱글톤으로 정의됩니다. Java컨트롤러에 노출하고 주입하려는 함수 세트로 구성된 스크립트 객체입니다.

예를 들어, "$http"는 Angular.JS의 서비스로, 컨트롤러에 삽입될 때 필요한 기능을 제공합니다.

( 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 JS 모듈의 서비스 매개변수를 사용하여 'AdditionService'라는 새 서비스를 생성합니다.

```
 this.Addition = function(a,b)
```

여기서는 서비스 내에서 Addition이라는 새로운 기능을 만듭니다. 이는 AngularJS가 컨트롤러 내부에서 AdditionService를 인스턴스화하면 'Addition' 기능에 액세스할 수 있음을 의미합니다. 이 함수 정의에서 우리는 이 함수가 두 개의 매개변수 a와 b를 받아들인다는 것을 의미합니다.

```
 return a+b;
```

여기서는 단순히 매개변수를 추가하고 추가된 값을 반환하는 Addition 함수의 본문을 정의합니다.

 mainApp.controller('DemoController', function($scope, AdditionService)

이는 종속성 주입과 관련된 주요 단계입니다. 컨트롤러 정의에서 이제 'AdditionService' 서비스를 참조하고 있습니다. AngularJS가 이것을 보면 'AdditionService' 유형의 객체를 인스턴스화합니다.

 $scope.result = AdditionService.Addition(5,6);

이제 서비스에 정의된 'Addition' 함수에 액세스하고 이를 컨트롤러의 $scope 개체에 할당합니다.

이는 서비스를 정의하고 컨트롤러 내부에 해당 서비스의 기능을 주입하는 방법에 대한 간단한 예입니다.

요약

이름에서 알 수 있듯이 종속성 주입은 런타임에 종속 기능을 모듈에 주입하는 프로세스입니다.
종속성 주입을 사용하면 재사용 가능한 코드를 얻는 데 도움이 됩니다. 여러 애플리케이션 모듈에서 사용되는 공통 기능이 있는 경우 가장 좋은 방법은 해당 기능을 갖춘 중앙 서비스를 정의한 다음 해당 서비스를 애플리케이션 모듈에 종속성으로 주입하는 것입니다.
AngularJS의 값 객체는 간단한 주입에 사용될 수 있습니다. Java$inject를 사용하여 컨트롤러에서 스크립트 객체 만들기 AngularJS와.
서비스 모듈은 여러 AngularJS 모듈에서 재사용할 수 있는 사용자 정의 서비스를 정의하는 데 사용할 수 있습니다.

당신은 좋아할 것입니다 :

AngularJS의 종속성 주입이란 무엇입니까?

AngularJS에서 어떤 구성요소를 종속성으로 삽입할 수 있나요?

의존성 주입의 예

1) 가치 구성요소

관련 기사

2) 서비스

요약