TL; DR
1）あなたが使用している工場を、あなたがオブジェクトを作成し、その同じオブジェクトを返し、それにプロパティを追加します。このファクトリーをコントローラーに渡すと、オブジェクトのこれらのプロパティは、ファクトリーを通じてそのコントローラーで使用できるようになります。
app.controller(‘myFactoryCtrl’, function($scope, myFactory){
$scope.artist = myFactory.getArtist();
});
app.factory(‘myFactory’, function(){
var _artist = ‘Shakira’;
var service = {};
service.getArtist = function(){
return _artist;
}
return service;
});
2）Serviceを使用している場合、AngularJSは「new」キーワードを使用して、サービスをバックグラウンドでインスタンス化します。そのため、プロパティを「this」に追加すると、サービスは「this」を返します。サービスをコントローラーに渡すと、「this」のこれらのプロパティは、サービスを通じてそのコントローラーで使用できるようになります。
app.controller(‘myServiceCtrl’, function($scope, myService){
$scope.artist = myService.getArtist();
});
app.service(‘myService’, function(){
var _artist = ‘Nelly’;
this.getArtist = function(){
return _artist;
}
});
3） プロバイダーは、.config（）関数に渡すことができる唯一のサービスです。サービスオブジェクトを使用可能にする前に、サービスオブジェクトのモジュール全体の構成を提供する場合は、プロバイダーを使用します。
app.controller(‘myProvider’, function($scope, myProvider){
$scope.artist = myProvider.getArtist();
$scope.data.thingFromConfig = myProvider.thingOnConfig;
});
app.provider(‘myProvider’, function(){
//Only the next two lines are available in the app.config()
this._artist = ‘’;
this.thingFromConfig = ‘’;
this.$get = function(){
var that = this;
return {
getArtist: function(){
return that._artist;
},
thingOnConfig: that.thingFromConfig
}
}
});
app.config(function(myProviderProvider){
myProviderProvider.thingFromConfig = ‘This was set in config’;
});
非TL; DR
1）ファクトリファクトリ
は、サービスを作成および構成する最も一般的な方法です。TL; DRが言った以上のことは本当にありません。オブジェクトを作成し、それにプロパティを追加して、同じオブジェクトを返すだけです。次に、ファクトリをコントローラーに渡すと、オブジェクトのこれらのプロパティは、ファクトリを介してそのコントローラーで使用できるようになります。より広範な例を以下に示します。
app.factory(‘myFactory’, function(){
var service = {};
return service;
});
これで、「myFactory」をコントローラーに渡すと、「service」にアタッチしたすべてのプロパティを使用できるようになります。
次に、いくつかの「プライベート」変数をコールバック関数に追加しましょう。これらはコントローラーから直接アクセスできませんが、必要に応じてこれらの「プライベート」変数を変更できるように、最終的に「サービス」にいくつかのゲッター/セッターメソッドを設定します。
app.factory(‘myFactory’, function($http, $q){
var service = {};
var baseUrl = ‘https://itunes.apple.com/search?term=’;
var _artist = ‘’;
var _finalUrl = ‘’;
var makeUrl = function(){
_artist = _artist.split(‘ ‘).join(‘+’);
_finalUrl = baseUrl + _artist + ‘&callback=JSON_CALLBACK’;
return _finalUrl
}
return service;
});
ここで、これらの変数/関数を「サービス」にアタッチしていないことに気づくでしょう。後で使用または変更するために、単に作成しています。
- baseUrlは、iTunes APIが必要とするベースURLです
- _artistは、検索するアーティストです
- _finalUrlは、iTunesを呼び出す最終的な完全に構築されたURLです。
- makeUrlは、iTunesと相性の良いURLを作成して返す関数です。
ヘルパー/プライベート変数と関数が用意できたので、「サービス」オブジェクトにいくつかのプロパティを追加しましょう。「サービス」に設定したものは、「myFactory」を渡すどのコントローラー内でも直接使用できます。
アーティストを返すか設定するだけのsetArtistメソッドとgetArtistメソッドを作成します。また、作成したURLでiTunes APIを呼び出すメソッドを作成します。このメソッドは、iTunes APIからデータが返されると満たされるpromiseを返します。AngularJSでpromiseを使用した経験があまりない場合は、promiseについて詳しく説明することを強くお勧めします。
以下のsetArtistはアーティストを受け入れ、アーティストを設定できます。getArtistはアーティストを返します。callItunesは、最初にmakeUrl（）を呼び出して、$ httpリクエストで使用するURLを作成します。次に、promiseオブジェクトを設定し、最終的なURLを使用して$ httpリクエストを作成します。$ httpはpromiseを返すため、リクエストの後に.successまたは.errorを呼び出すことができます。その後、iTunesデータで約束を解決するか、「エラーが発生しました」というメッセージで拒否します。
app.factory('myFactory', function($http, $q){
var service = {};
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
service.setArtist = function(artist){
_artist = artist;
}
service.getArtist = function(){
return _artist;
}
service.callItunes = function(){
makeUrl();
var deferred = $q.defer();
$http({
method: 'JSONP',
url: _finalUrl
}).success(function(data){
deferred.resolve(data);
}).error(function(){
deferred.reject('There was an error')
})
return deferred.promise;
}
return service;
});
これで工場が完成しました。これで 'myFactory'を任意のコントローラーに挿入できるようになり、サービスオブジェクト（setArtist、getArtist、callItunes）にアタッチしたメソッドを呼び出すことができるようになります。
app.controller('myFactoryCtrl', function($scope, myFactory){
$scope.data = {};
$scope.updateArtist = function(){
myFactory.setArtist($scope.data.artist);
};
$scope.submitArtist = function(){
myFactory.callItunes()
.then(function(data){
$scope.data.artistData = data;
}, function(data){
alert(data);
})
}
});
上記のコントローラーでは、「myFactory」サービスに注入しています。次に、「myFactory」からのデータを使用して$ scopeオブジェクトにプロパティを設定します。上記の唯一のトリッキーなコードは、これまでに約束を扱ったことがない場合です。callItunesがpromiseを返すため、.then（）メソッドを使用して、iTunesデータでpromiseが満たされた場合にのみ$ scope.data.artistDataを設定できます。コントローラーが非常に「薄い」ことに気づくでしょう（これは優れたコーディング慣行です）。ロジックと永続データはすべて、コントローラーではなくサービスにあります。
2）サービス
おそらく、サービスの作成を処理する際に知っておくべき最大のことは、「新しい」キーワードでインスタンス化されるということです。JavaScriptの達人にとって、これはコードの性質に大きなヒントを与えるはずです。JavaScriptのバックグラウンドが限られている方や、「新しい」キーワードの実際の動作に慣れていない方のために、最終的にサービスの性質を理解するのに役立つJavaScriptの基礎を復習しましょう。
「new」キーワードを使用して関数を呼び出したときに発生する変更を実際に確認するには、関数を作成して「new」キーワードを使用して呼び出します。次に、「new」キーワードを検出したときにインタープリターが何を行うかを見てみましょう。最終結果はどちらも同じになります。
まず、コンストラクタを作成しましょう。
var Person = function(name, age){
this.name = name;
this.age = age;
}
これは、典型的なJavaScriptコンストラクター関数です。これで、「new」キーワードを使用してPerson関数を呼び出すたびに、「this」が新しく作成されたオブジェクトにバインドされます。
次に、Personのプロトタイプにメソッドを追加して、Personの「クラス」のすべてのインスタンスで使用できるようにします。
Person.prototype.sayName = function(){
alert(‘My name is ‘ + this.name);
}
ここで、sayName関数をプロトタイプに配置したので、PersonのすべてのインスタンスはsayName関数を呼び出して、そのインスタンスの名前を警告することができます。
Personコンストラクター関数とsayName関数がそのプロトタイプにあるので、実際にPersonのインスタンスを作成してから、sayName関数を呼び出します。
var tyler = new Person(‘Tyler’, 23);
tyler.sayName(); //alerts ‘My name is Tyler’
したがって、Personコンストラクターを作成し、そのプロトタイプに関数を追加し、Personインスタンスを作成し、そのプロトタイプで関数を呼び出すためのコードはすべて、次のようになります。
var Person = function(name, age){
this.name = name;
this.age = age;
}
Person.prototype.sayName = function(){
alert(‘My name is ‘ + this.name);
}
var tyler = new Person(‘Tyler’, 23);
tyler.sayName(); //alerts ‘My name is Tyler’
次に、JavaScriptで「new」キーワードを使用したときに実際に何が起こっているかを見てみましょう。最初に気づくべきことは、この例で「new」を使用した後、まるでオブジェクトであるかのように、「tyler」でメソッド（sayName）を呼び出すことができるということです。したがって、最初に、Personコンストラクターがオブジェクトを返していることがわかります。コードでそれを確認できるかどうかは関係ありません。次に、sayName関数は直接Personインスタンスではなくプロトタイプにあるため、Person関数が返すオブジェクトは、ルックアップが失敗したときにそのプロトタイプに委任されている必要があります。より簡単に言えば、tyler.sayName（）を呼び出すと、インタープリターは「OK、先ほど作成した 'tyler'オブジェクトを見て、sayName関数を見つけて呼び出します。ちょっと待ってください、ここには表示されません。表示されるのは名前と年齢だけです。プロトタイプを確認させてください。うん、それはプロトタイプにあるように見えます。私はそれを呼ばせてください。」
以下は、「new」キーワードが実際にJavaScriptで何をしているのかを考える方法のコードです。基本的には、上記の段落のコード例です。「インタープリタービュー」、つまりインタープリターがコードをノート内に表示する方法を示しました。
var Person = function(name, age){
//The below line creates an object(obj) that will delegate to the person’s prototype on failed lookups.
//var obj = Object.create(Person.prototype);
//The line directly below this sets ‘this’ to the newly created object
//this = obj;
this.name = name;
this.age = age;
//return this;
}
これで、JavaScriptで「新しい」キーワードが実際に何を行うかについての知識が得られたので、AngularJSでサービスを作成する方が理解しやすいはずです。
サービスを作成するときに理解する最大のことは、サービスが「新しい」キーワードでインスタンス化されることを知ることです。この知識と上記の例を組み合わせると、プロパティとメソッドを「this」に直接アタッチし、サービス自体から返されることを認識できるはずです。これを実際に見てみましょう。
最初にFactoryの例で行ったのとは異なり、オブジェクトを作成してからそのオブジェクトを返す必要はありません。これまでに何度も言及したように、「new」キーワードを使用してインタープリターがそのオブジェクトを作成し、デリゲートするようにしているためです。これはプロトタイプであり、作業を行わなくても返却できます。
最初に、「プライベート」ヘルパー関数を作成しましょう。私たちの工場でもまったく同じことをしたので、これは非常に見覚えがあるはずです。ここでは各行が何をするかについては説明しません。工場の例でそれを行ったからです。混乱している場合は、工場の例をもう一度読んでください。
app.service('myService', function($http, $q){
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
});
ここで、コントローラーで使用できるすべてのメソッドを「this」にアタッチします。
app.service('myService', function($http, $q){
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
this.setArtist = function(artist){
_artist = artist;
}
this.getArtist = function(){
return _artist;
}
this.callItunes = function(){
makeUrl();
var deferred = $q.defer();
$http({
method: 'JSONP',
url: _finalUrl
}).success(function(data){
deferred.resolve(data);
}).error(function(){
deferred.reject('There was an error')
})
return deferred.promise;
}
});
これで、ファクトリと同様に、setServiceist、getArtist、およびcallItunesは、myServiceを渡すどのコントローラーでも使用できるようになります。これがmyServiceコントローラーです（これは、出荷時のコントローラーとほぼ同じです）。
app.controller('myServiceCtrl', function($scope, myService){
$scope.data = {};
$scope.updateArtist = function(){
myService.setArtist($scope.data.artist);
};
$scope.submitArtist = function(){
myService.callItunes()
.then(function(data){
$scope.data.artistData = data;
}, function(data){
alert(data);
})
}
});
前に述べたように、「新しい」機能が本当に理解できたら、サービスはAngularJSのファクトリーとほとんど同じです。
3）プロバイダー
プロバイダーについて覚えておくべき最大のことは、プロバイダーがアプリケーションのapp.config部分に渡すことができる唯一のサービスであることです。これは、サービスオブジェクトの一部をアプリケーションのほかの場所で使用できるようにする前に変更する必要がある場合に非常に重要です。サービス/工場と非常に似ていますが、これから説明するいくつかの違いがあります。
まず、サービスとファクトリーで行ったのと同じ方法でプロバイダーをセットアップします。以下の変数は、「プライベート」およびヘルパー関数です。
app.provider('myProvider', function(){
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
//Going to set this property on the config function below.
this.thingFromConfig = ‘’;
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
}
*上記のコードのいずれかの部分が混乱を招く場合は、ファクトリーセクションをチェックして、すべての機能について詳しく説明します。
プロバイダーは3つのセクションがあると考えることができます。最初のセクションは、後で変更/設定される「プライベート」変数/関数です（上記を参照）。2番目のセクションは、app.config関数で使用できる変数/関数です。したがって、他の場所で使用できるようになる前に変更することができます（これも上記に示されています）。これらの変数は「this」キーワードに付加する必要があることに注意することが重要です。この例では、app.configで変更できるのは「thingFromConfig」だけです。3番目のセクション（下に表示）は、「myProvider」サービスを特定のコントローラーに渡したときにコントローラーで使用できるすべての変数/関数です。
プロバイダーを使用してサービスを作成する場合、コントローラーで使用できるのは、$ get（）関数から返されるプロパティ/メソッドのみです。以下のコードは$ getを 'this'に配置します（これは最終的にその関数から返されることがわかっています）。これで、$ get関数はコントローラーで使用できるようにするすべてのメソッド/プロパティを返します。これがコード例です。
this.$get = function($http, $q){
return {
callItunes: function(){
makeUrl();
var deferred = $q.defer();
$http({
method: 'JSONP',
url: _finalUrl
}).success(function(data){
deferred.resolve(data);
}).error(function(){
deferred.reject('There was an error')
})
return deferred.promise;
},
setArtist: function(artist){
_artist = artist;
},
getArtist: function(){
return _artist;
},
thingOnConfig: this.thingFromConfig
}
}
完全なプロバイダーコードは次のようになります。
app.provider('myProvider', function(){
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
//Going to set this property on the config function below
this.thingFromConfig = '';
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
this.$get = function($http, $q){
return {
callItunes: function(){
makeUrl();
var deferred = $q.defer();
$http({
method: 'JSONP',
url: _finalUrl
}).success(function(data){
deferred.resolve(data);
}).error(function(){
deferred.reject('There was an error')
})
return deferred.promise;
},
setArtist: function(artist){
_artist = artist;
},
getArtist: function(){
return _artist;
},
thingOnConfig: this.thingFromConfig
}
}
});
これで、ファクトリとServiceの場合と同様に、setArtist、getArtist、callItunesは、myProviderを渡すどのコントローラーでも使用できます。これがmyProviderコントローラーです（これは、ファクトリー/サービスコントローラーとほぼ同じです）。
app.controller('myProviderCtrl', function($scope, myProvider){
$scope.data = {};
$scope.updateArtist = function(){
myProvider.setArtist($scope.data.artist);
};
$scope.submitArtist = function(){
myProvider.callItunes()
.then(function(data){
$scope.data.artistData = data;
}, function(data){
alert(data);
})
}
$scope.data.thingFromConfig = myProvider.thingOnConfig;
});
前述のように、プロバイダーを使用してサービスを作成するポイントは、最終的なオブジェクトがアプリケーションの残りの部分に渡される前に、app.config関数を介していくつかの変数を変更できるようにすることです。その例を見てみましょう。
app.config(function(myProviderProvider){
//Providers are the only service you can pass into app.config
myProviderProvider.thingFromConfig = 'This sentence was set in app.config. Providers are the only service that can be passed into config. Check out the code to see how it works';
});
これで、プロバイダーの「thingFromConfig」が空の文字列としてどのように表示されるかを確認できますが、それがDOMに表示されると、「この文は設定されました...」になります。
