AngularJSのプロバイダーとは何ですか?

AngularJSのプロバイダーとは何ですか?

provider()関数を使用すると、プロバイダー()を使用して作成されたサービスのアプリケーションごとに入力を設定できる構成可能なサービスを作成できます。

5min read

provider()関数を使用すると、プロバイダー()を使用して作成されたサービスのアプリケーションごとに入力を設定できる構成可能なサービスを作成できます。

たとえば、アプリケーションレベルでサービスにアクセスするためにAPIキーを設定する必要がある場合は、モジュールconfigで設定し、$provideサービスを使用してプロバイダーに入力を渡すことができます。内部でサービスを作成する他のすべての方法では、$provide サービスを使用します。

module.config の $provide Service を使用したサービスの作成

provider() 関数を使用して非常に単純なサービスを作成することから始めましょう。

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

上記のスニペットで何が起こっているのかを探ってみましょう。providerを使用してサービスを作成するには、$provideサービスを使用する必要があります。$provide サービスのプロバイダ関数は、サービスの名前と関数の 2 つのパラメータを取ります。プロバイダー関数には $get 関数が必要です。provider() を使用して簡単なサービスを作成するには、次の 5 つの手順を実行する必要があります。

  1. アプリの config メソッドに $provide サービスを挿入する
  2. provider() 関数を使用してプロバイダーを作成する
  3. provider() 関数に 2 つのパラメーター (サービスの名前と関数) を渡します
  4. プロバイダー関数には、$get関数が含まれている必要があります
  5. $get 関数からオブジェクトリテラルを返す

プロバイダーを使用して作成されたglobalsettingサービスは、以下のリストに示すようにコントローラーに注入することで使用できます。

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

最終的には、以下のスニペットに示すように、ng-controller ディレクティブを使用して、globalsetting 設定サービスからのデータをビューに表示できます。

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

プロバイダ()をモジュールオブジェクトの関数として使用したサービスの作成

モジュールの設定内にプロバイダーを使用してサービスを作成しました。プロバイダーを使用してサービスを作成する別の方法もあります: AngularJS は、モジュール オブジェクトで provider() 関数も公開しています。簡単にするために、module.provider() を直接使用してサービスを作成し、作成したサービスをモジュールの設定に登録できます。

モジュールオブジェクトで 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 サービスにはセッターがないため、プロバイダーを使用して作成されたサービスに値を渡していません。globalserviceは、configの$provideサービスを使用して作成されたときと同じ方法で使用できます。

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

Creating Setter for the Provider()

globalsettingサービスを見てみましょう。現在、アプリの名前をハードコーディングしていますが、実際のシナリオでは、メイン モジュール アプリからアプリの名前を渡す必要がある場合があります。これを行うには、プロバイダーのセッターを作成する必要があります。セッターは、プロバイダーの$getのような関数に他なりません。 以下のリストに示すように、globalsetting サービスプロバイダのセッターを作成できます。

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

ここで何が起こっているのか見てみましょう。

  1. セッター関数を作成しました。
  2. セッター関数にパラメーターを渡しています。
  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() メソッドを公開しており、このメソッドはサービスの名前と関数の 2 つのパラメーターを取ります。 したがって、factory() 関数を使用してサービスを作成することは、$provide.factory() の簡略化された構文であると結論付けることができます。

プロバイダーを使用する場所

アプリケーション全体のサービスを作成する場合は、プロバイダーを使用する必要があります。たとえば、API からデータを取得するサービスを作成する場合、アプリケーションごとに API キーを設定する必要があります。アプリの設定で設定し、それをプロバイダーのセッター関数に渡すことができます。

そして、それはAngularJSプロバイダーのためにそれをカバーしています!この投稿がお役に立てば幸いです、そして読んでくれてありがとう!

Angular
デモを予約