2016年1月編集：これはまだ注目されているためです。これを尋ねて以来、私はいくつかの AngularJS プロジェクトを完了しました。私が主に使用したものについてはfactory、オブジェクトを構築し、最後にオブジェクトを返しました。ただし、以下の私の声明は依然として真実です。
EDIT : 2つの主な違いを最終的に理解したと思います。デモ用のコード例があります。また、この質問は提案された複製とは異なると思います。複製では、サービスはインスタンス化できないと書かれていますが、以下で説明するように設定すると、実際にはインスタンス化できます。サービスは、ファクトリとまったく同じになるように設定できます。また、ファクトリがサービスをフェイルオーバーする場所を示すコードも提供しますが、これは他の回答ではないようです。
VaderService をそのように (つまり、サービスとして) セットアップした場合:
var module = angular.module('MyApp.services', []);
module.service('VaderService', function() {
this.speak = function (name) {
return 'Join the dark side ' + name;
}
});
次に、コントローラーでこれを行うことができます：
module.controller('StarWarsController', function($scope, VaderService) {
$scope.luke = VaderService.speak('luke');
});
サービスでは、コントローラーに注入された VaderService がインスタンス化されるため、VaderService.speak を呼び出すだけで済みますが、VaderService を module.factory に変更すると、コントローラー内のコードが機能しなくなります。これが主な違いです。 . factory では、コントローラに注入された VaderService はインスタンス化されないため、ファクトリをセットアップするときにオブジェクトを返す必要があります (質問の例を参照してください)。
ただし、ファクトリをセットアップするのとまったく同じ方法でサービスをセットアップでき (つまり、オブジェクトを返すようにします) 、サービスはファクトリとまったく同じように動作します。
この情報を考えると、service よりも factory を使用する理由がわかりません。service は factory ができるすべてのことを行うことができます。
以下の元の質問。
これは何度も聞かれていることは知っていますが、ファクトリとサービスの間に機能的な違いはまったく見られません。このチュートリアルを読みました: http://blogs.clevertech.biz/startupblog/angularjs-factory-service-provider
そして、それはかなり良い説明を与えるようですが、私は次のようにアプリを設定しました:
index.html
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<script src="lib/angular/angular.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
<script type="text/javascript" src="js/VaderService.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body ng-app="MyApp">
<table ng-controller="StarWarsController">
<tbody>
<tr><td>{{luke}}</td></tr>
</tbody>
</table>
</body>
</html>
app.js:
angular.module('MyApp', [
'MyApp.services',
'MyApp.controllers'
]);
controllers.js:
var module = angular.module('MyApp.controllers', []);
module.controller('StarWarsController', function($scope, VaderService) {
var luke = new VaderService('luke');
$scope.luke = luke.speak();
});
VaderService.js
var module = angular.module('MyApp.services', []);
module.factory('VaderService', function() {
var VaderClass = function(padawan) {
this.name = padawan;
this.speak = function () {
return 'Join the dark side ' + this.name;
}
}
return VaderClass;
});
その後、index.html を読み込むと、「Join the dark side luke」と表示されます。まさに予想通り。ただし、VaderService.js をこれに変更すると (module.factory ではなく module.service に注意してください):
var module = angular.module('MyApp.services', []);
module.service('VaderService', function() {
var VaderClass = function(padawan) {
this.name = padawan;
this.speak = function () {
return 'Join the dark side ' + this.name;
}
}
return VaderClass;
});
次に、index.html をリロードします (キャッシュを空にして、ハード リロードを実行したことを確認しました)。これは、module.factory で行ったのとまったく同じように機能します。では、両者の実際の機能上の違いは何ですか??
