AngularJS에서 공급자란 무엇입니까?

AngularJS에서 공급자란 무엇입니까?

provider() 함수를 사용하면 provider()를 사용하여 생성된 서비스에 대한 애플리케이션별 입력을 설정할 수 있는 구성 가능한 서비스를 만들 수 있습니다.

5min read

provider() 함수를 사용하면 provider()를 사용하여 생성된 서비스에 대한 애플리케이션별 입력을 설정할 수 있는 구성 가능한 서비스를 만들 수 있습니다.

예를 들어, 애플리케이션 수준에서 서비스에 액세스하기 위해 API 키를 설정해야 하는 경우 모듈 구성에서 이를 설정하고 $provide 서비스를 사용하여 공급자에게 입력을 전달할 수 있습니다. 내부적으로 서비스를 만드는 다른 모든 방법은 $provide 서비스를 사용합니다.

module.config에서 $provide 서비스를 사용하여 서비스 만들기

provider() 함수를 사용하여 매우 간단한 서비스를 만드는 것부터 시작하겠습니다.

app.config(function ($provide) {
    $provide.provider('globalsetting', function () {
        this.$get = function () {
            var appname = "Lawyer App";
            return {
                appName: appname
            };
        }
    })
});

위의 스니펫에서 무슨 일이 일어나고 있는지 살펴보겠습니다. provider를 사용하여 서비스를 만들려면 $provide 서비스를 사용해야 합니다. $provide 서비스의 provider 함수는 서비스 이름과 함수라는 두 개의 매개 변수를 사용합니다. 공급자 함수에는 $get 함수가 있어야 합니다. provider()를 사용하여 간단한 서비스를 만들려면 다음 5단계를 수행해야 합니다.

  1. 앱 구성 메서드에 $provide 서비스 주입
  2. provider() 함수를 사용하여 공급자 만들기
  3. provider() 함수에 두 개의 매개 변수, 즉 서비스 이름과 함수를 전달합니다
  4. provider 함수에는 $get 함수가 포함되어야 합니다
  5. $get 함수에서 객체 리터럴을 반환합니다.

아래 목록과 같이 공급자에 주입하여 공급자를 사용하여 만든 전역 설정 서비스를 사용할 수 있습니다.

app.controller("ProductController", function ($scope, globalsetting) {
    $scope.name = globalsetting.appName;
});

결국 아래 스 니펫과 같이 ng-controller 지시문을 사용하여 globalsetting 설정 서비스의 데이터를 뷰에 표시 할 수 있습니다.

<div ng-controller="ProductController">
        {{name}}
 </div>

Provider()를 Module Object의 함수로 사용하여 서비스 만들기

module 구성 내에서 공급자를 사용하여 서비스를 만들었습니다. provider를 사용하여 서비스를 만드는 또 다른 방법도 있습니다: AngularJS는 또한 module 객체에 provider() 함수를 노출했습니다. 단순화를 위해 module.provider()를 직접 사용하여 서비스를 생성하고 생성된 서비스를 module 구성에 등록할 수 있습니다.

모듈 객체에서 provider() 함수를 사용하여 서비스를 만들려면 다음을 수행해야 합니다.

  1. Create a service using the module.provider()
  2. module.config()에서 서비스를 등록합니다.
  3. 서비스를 등록하는 동안 공급자에 서비스 이름을 추가해야 합니다. 따라서 서비스 이름이 globalsetting인 경우 module.config에 globalsettingProvider로 등록합니다.

module.provider() 함수를 사용하여 globalsetting 서비스를 다시 만들어 보겠습니다.

app.provider('globalsetting', function () {

    this.$get = function () {
        var appname = "Lawyer App";
        return {
            appName: appname
        };
    }
});

2단계에서는 앱 구성에 서비스를 삽입해야 합니다. $routeProvider을 주사한 것을 기억하십니까? 같은 방식으로 아래 스니펫과 같이 앱 구성에 globalsettingProvider를 삽입해야 합니다.

app.config(function (globalsettingProvider) {
   
});

globalsetting 서비스에는 setter가 없으므로 공급자를 사용하여 만든 서비스에 값을 전달하지 않습니다. 구성에서 $provide 서비스를 사용하여 만들 때와 동일한 방식으로 globalservice를 사용할 수 있습니다.

app.controller("ProductController", function ($scope, globalsetting) {
    $scope.name = globalsetting.appName;
});

Creating Setter for the Provider()

globalsetting 서비스를 살펴보겠습니다. 지금은 앱 이름을 하드코딩하고 있지만 실제 시나리오에서는 기본 모듈 앱에서 앱 이름을 전달할 수 있습니다. 이렇게 하려면 공급자에 대한 setter를 만들어야 합니다. Setter는 공급자의 $get와 같은 함수일 뿐입니다.  아래 목록과 같이 globalsetting 서비스 공급자에 대한 setter를 만들 수 있습니다.

app.provider('globalsetting', function () {
    var appname = "LAWYER APP";
    this.setAppName = function (value) {
        appname = value; 
    }
    this.$get = function () {      
        return {
            appName: appname
        };
    }
});

여기서 무슨 일이 일어나고 있는지 봅시다.

  1. setter 함수를 만들었습니다.
  2. setter 함수에서 매개변수를 전달하고 있습니다.
  3. 또한 전달된 매개변수로 appname을 설정하고 있습니다

이제 globalserviceprovider를 앱 구성에 주입하는 동안 앱 이름을 전달할 수 있습니다.

app.config(function (globalsettingProvider) {
    globalsettingProvider.setAppName("Infragistics App");
});

결국 globalservice는 아래 목록과 같이 컨트롤러에서 사용할 수 있습니다.

app.controller("ProductController", function ($scope, globalsetting) {
    $scope.name = globalsetting.appName;
});

$provide 서비스를 사용하도록 팩토리()를 리팩토링합니다.

앞에서 논의한 바와 같이 service() 및 factory() 함수는 $provide 구문상 설탕일 뿐이며 내부적으로 $provide 사용합니다. factory()를 사용하여 만든 서비스를 $provide 사용하도록 리팩토링하는 방법을 살펴보겠습니다. 여기서는 아래 목록과 같이 factory()를 사용하여 greet라는 서비스를 만듭니다.

app.factory('greet', function () {
    return {
        message: "hello to my app"
    }
});

내부적으로 factory() 함수는 $provide 서비스를 사용합니다. 따라서 모듈 객체에서 factory() 메소드를 사용하는 대신 다음을 서비스로 만들 수 있습니다.

app.config(function ($provide) {
    $provide.factory('greet', function () {
        return {
            message: "hello to my app"
        }
    })
})

보시다시피 $provide 서비스는 서비스 이름과 함수라는 두 개의 매개 변수를 사용하는 factory() 메서드를 노출합니다.  따라서 factory() 함수를 사용하여 서비스를 만드는 것이 $provide.factory()의 단순화된 구문이라는 결론을 내릴 수 있습니다.

공급자 사용 위치

전체 애플리케이션에 대한 서비스를 만들 때 공급자를 사용해야 합니다. 예를 들어 API에서 데이터를 검색하는 서비스를 만들 때 애플리케이션당 한 번씩 API 키를 설정해야 합니다. 앱의 구성에서 이를 설정하고 공급자의 setter 함수에 전달할 수 있습니다.

그리고 그것은 AngularJS 공급자에 대해 다룹니다! 이 게시물이 도움이 되었기를 바라며 읽어 주셔서 감사합니다!

Angular
데모 요청