AngularJS のプロバイダー
AngularJS のプロバイダーと、AngularJS のプロバイダー、ファクトリー、およびサービスの違いを紹介します。
AngularJS のプロバイダー
プロバイダーは一種のサービスです。provider() 関数を使用すると、$get メソッドを含む構成可能なサービスを作成できます。
API を使用する Web アプリケーションを作成することを想像してみましょう。アプリケーションの API からデータにアクセスするために API キーを設定する必要がある場合は、それを module 構成で設定し、$provide サービスを使用してプロバイダーに入力を渡すことができます。
コントローラがプロバイダーを呼び出したときに値を返すプロバイダーを使用してモジュールを作成しましょう。まず、script タグを使用して AngularJS ライブラリと app.js ファイルを追加します。
# AngularJS
<head>
<script src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<script src="app.js"></script>
</head>
AngularJS アプリケーションは ng-app を使用して定義し、コントローラーは ng-controller を使用して定義します。
# AngularJS
<body ng-app="myApp">
<div ng-controller="myController"></div>
</body>
app.js で、モジュールを作成します。
# AngularJS
var module = angular.module("myApp", []);
プロバイダーを使用します。プロバイダーはその名前が示すように、つまり値を提供するので、この場合は文字列値を提供します。プロバイダーには、$get という 1つのメソッドが定義されています。
プロバイダーは複数のメソッドを持つことができますが、Angular 呼び出しは $get です。そのため、文字列値を返す関数を $get メソッドに割り当てます。
# AngularJS
module.provider("myProvider", function(){
this.$get = function(){
return "Value from Provider";
};
});
コントローラにプロバイダーを挿入し、プロバイダーからの値を console.log() に挿入します。
# AngularJS
module.controller("myController", function(myProvider){
console.log(myProvider);
});
出力：
上記の例に示されているように、コンソールのプロバイダーから正確な値を取得しました。これでうまくいきました。プロバイダーを使用して値を返し、それをメソッドに挿入できます。
これは、すべてのプロバイダーがすべて同じであり、サービスとファクトリも同じであることに注意することが重要です。ただし、プロバイダーを何度注入しても、値は 1 回だけ実行されます。
以下に示すように、別のコントローラーを作成してテストできます。
# AngularJS
module.controller("myController", function(myProvider){
console.log("First Controller:" + myProvider);
});
module.controller("myController2", function(myProvider){
console.log("Second Controller:" + myProvider);
});
プロバイダーの $get メソッド内で console.log() を使用して、プロバイダー内の値をログに記録します。したがって、このプロバイダーが実行されるたびに、同じ値がログに記録されます。
このようにして、プロバイダーが 1 回実行されたか 2 回実行されたかを確認できます。
# AngularJS
module.provider("myProvider", function(){
this.$get = function(){
console.log("Provider Executed!")
return "Value from Provider";
};
});
index.html の 2 番目のコントローラーに div を追加しましょう。
# AngularJS
<div ng-controller="myController"></div>
<div ng-controller="myController2"></div>
出力：
上記の例は、プロバイダーが 1 回だけ実行されることを示していますが、プロバイダーの値は両方のコントローラーに注入されます。コントローラから 2つの出力メッセージを受け取りました。
プロバイダーが注入されたときに Angular がそれを実行し、$ get を呼び出して保存し、その値を記憶していることに注意することが重要です。その後、プロバイダーが注入されるたびに、プロバイダーは最初に抽出した値を返します。
AngularJS における Provider と Factory の違い
作成したプロバイダーと同じ機能を持つファクトリを作成しましょう。次に、プロバイダーをコピーして、ファクトリに変更します。
ファクトリにはメソッド $get がないため、ファクトリで関数を直接呼び出して値を返します。プロバイダーと異なるのはそれだけです。
工場を両方のコントローラーに注入します。app.js のコードは次のようになります。
# AngularJS
var module = angular.module("myApp", []);
module.factory("myFactory", function(){
console.log("Factory Executed!")
return "Value from Factory";
});
module.controller("myController", function(myFactory){
console.log("First Controller:" + myFactory);
});
module.controller("myController2", function(myFactory){
console.log("Second Controller:" + myFactory);
});
出力：
上記の例に示すように、同じ結果が得られます。プロバイダーとファクトリはどちらも同じことを行いますが、ファクトリは少し少ないコードでそれを行うことができます。
AngularJS のプロバイダーとサービスの違い
作成したプロバイダーと同じ機能を持つサービスを作成しましょう。次に、プロバイダーをコピーしてサービスに変更します。
サービスにはメソッド $get がないため、ファクトリと同じようにサービス内の関数を直接呼び出し、値を返します。プロバイダーと異なるのはそれだけです。
両方のコントローラーにサービスを注入します。app.js のコードは次のようになります。
# AngularJS
var module = angular.module("myApp", []);
module.service("myService", function(){
console.log("Service Executed!");
this.getValue = function(){
return "Object from Service";
}
});
module.controller("myController", function(myService){
console.log("First Controller:" + myService.getValue());
});
module.controller("myController2", function(myService){
console.log("Second Controller:" + myService.getValue());
});
出力：
上記の例に示すように、同じ結果が得られます。プロバイダーとサービスはどちらも同じことを行いますが、サービスは文字列ではなくオブジェクトを返します。
ポイントは、provider、factory、service をいつ使うかです。オブジェクトの代わりに値を返したい場合は、サービスを使用することはできません。
サービスの代わりにファクトリを使用する必要がありますが、値の代わりにファクトリを使用してオブジェクトを返します。プロバイダーは、構成時間を実行するためのアクセスを提供します。
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn