web-dev-qa-db-ja.com

AngularJS：工場とサービス？

編集2016年1月： これはまだ注目されているので。これを求めて以来、私はいくつかのAngularJSプロジェクトを完成させました、そして私がfactoryをほとんど使用したそれらのために、オブジェクトを構築し、そして最後にオブジェクトを返しました。しかし、以下の私の声明はまだ真実です。

編集： 私はついに両者の主な違いを理解したと思います、そして私はデモンストレーションするためのコード例を持っています。また、この質問は提案された複製とは異なると思います。重複はサービスはインスタンス化できないと言っています、しかしあなたが私が以下に説明するようにそれを設定したならば、それは実際にそうです。サービスは、工場とまったく同じになるように設定できます。私はまたファクトリがどこでサービスをフェイルオーバーするかを示すコードを提供するでしょう。

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');   
});

Serviceを使うと、コントローラにインジェクトされたVaderServiceがインスタンス化されるので、VaderService.speakを呼び出すことができますが、VaderServiceをmodule.factoryに変更すればコントローラ内のコードは機能しなくなります、これが主な違いです。 factoryでは、コントローラに注入されたVaderServiceはnotインスタンス化されているので、factoryを設定するときにオブジェクトを返す必要があります（質問の私の例を参照）。

ただし、ファクトリをセットアップするのとまったく同じ方法でサービスをセットアップすることができます（IEがオブジェクトを返すようにします）。そして サービスはファクトリとまったく同じように動作します

この情報を与えられて、私はnoファクトリーオーバーサービスを使う理由を見ます、サービスはファクトリー可能なことすべてをすることができます。

下記の元の質問。

私はこれが何度も頼まれてきたことを知っています、しかし私は本当に工場とサービスの間に機能的な違いを見ることができません。私はこのチュートリアルを読んでいました： 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と同じように正確に動作します。それで、2つの間の本当の機能上の違いは何ですか？

javascriptangularjsangularjs-serviceangularjs-factory
209
Cameron Ball

サービス vs 工場

enter image description hereenter image description here

ファクトリとサービスの違いは、機能とオブジェクトの違いとまったく同じです。

ファクトリープロバイダー

  • 関数の戻り値を返します。オブジェクトを作成し、それにプロパティを追加してから、その同じオブジェクトを返します。このサービスをコントローラに渡すと、オブジェクトのこれらのプロパティは、ファクトリを通じてそのコントローラで使用できるようになります。 （仮説シナリオ）

  • シングルトンと一度だけ作成されます

  • 再利用可能なコンポーネント

  • ファクトリは、データ共有のようにコントローラ間で通信するための優れた方法です。

  • 他の依存関係を使用することができます

  • 通常、サービスインスタンスに複雑な作成ロジックが必要な場合に使用されます。

  • .config()関数に注入することはできません。

  • 構成不可能なサービスに使用

  • オブジェクトを使用している場合は、ファクトリプロバイダを使用できます。

  • 構文：module.factory('factoryName', function);

サービスプロバイダ

  • 関数（オブジェクト）のインスタンスを取得します - 'new'キーワードでインスタンス化したばかりで、 'this'にプロパティを追加するとサービスは 'this'を返します。コントローラにサービスを渡すと、それらのプロパティ'this'にあなたのサービスを通してそのコントローラーで利用可能になります。 （仮説シナリオ）

  • シングルトンと一度だけ作成されます

  • 再利用可能なコンポーネント

  • サービスはデータを共有するためにコントローラ間の通信に使用されます

  • thisキーワードを使用して、サービスオブジェクトにプロパティと関数を追加できます。

  • 依存関係はコンストラクタ引数として注入されます

  • 簡単な作成ロジックに使用

  • .config()関数に注入することはできません。

  • あなたがクラスを使っているなら、あなたはサービスプロバイダーを使うことができます

  • 構文：module.service(‘serviceName’, function);

サンプルデモ

以下の例ではMyServiceとMyFactoryを定義しました。 .serviceでthis.methodname.を使ってサービスメソッドを作成したことに注意してください。.factoryでファクトリオブジェクトを作成し、それにメソッドを割り当てました。

AngularJS。サービス 

module.service('MyService', function() {

    this.method1 = function() {
            //..method1 logic
        }

    this.method2 = function() {
            //..method2 logic
        }
});

AngularJS .factory 

module.factory('MyFactory', function() {

    var factory = {}; 

    factory.method1 = function() {
            //..method1 logic
        }

    factory.method2 = function() {
            //..method2 logic
        }

    return factory;
});

また、この美しいものを見てみましょう

サービスと工場について混乱しています

AngularJSファクトリー、サービス、およびプロバイダー

Angular.js：サービス対プロバイダ対工場？

282
Nidhish Krishnan

FactoryとServiceはproviderのラッパーです。

工場

Factoryは、class(constructor function)、instance of class、string、number、またはbooleanになり得るものなら何でも返すことができます。 constructor関数を返す場合は、コントローラ内でインスタンス化することができます。

 myApp.factory('myFactory', function () {

  // any logic here..

  // Return any thing. Here it is object
  return {
    name: 'Joe'
  }
}

サービス

サービスは何も返す必要はありません。しかし、あなたはすべてをthis変数に代入しなければなりません。サービスはデフォルトでインスタンスを作成し、それをベースオブジェクトとして使用するためです。

myApp.service('myService', function () {

  // any logic here..

  this.name = 'Joe';
}

サービスの背後にある実際のangularsコード

function service(name, constructor) {
    return factory(name, ['$injector', function($injector) {
        return $injector.instantiate(constructor);
    }]);
}

それはfactoryのまわりのラッパーです。 serviceから何かを返す場合、それはFactoryのように振る舞います。

IMPORTANT：FactoryとServiceからの戻り結果はキャッシュになり、すべてのコントローラーに同じ結果が返されます。

いつ使うの？

すべての場合において、Factoryが最も望ましいです。別のコントローラでインスタンス化する必要があるconstructor関数がある場合に使用できます。

Serviceは一種のSingletonオブジェクトです。 ServiceからのObjectの戻りは、すべてのコントローラに対して同じです。アプリケーション全体に対して単一のオブジェクトを持ちたい場合に使用できます。例：認証されたユーザーの詳細.

さらに理解するために、読んでください

http://iffycan.blogspot.in/2013/05/angular-service-or-factory.html

http://viralpatel.net/blogs/angularjs-service-factory-tutorial/ /

41
Fizer Khan
  • もしあなたがサービスを利用するなら、あなたは関数のインスタンス（ "this"キーワード）を得るでしょう。
  • ファクトリを使用している場合は、関数参照（ファクトリ内のreturn文）を呼び出すことによって返される値を取得します。

工場とサービスは最も一般的に使用されるレシピです。それらの唯一の違いは、Serviceレシピはカスタム型のオブジェクトに対してうまく機能するのに対し、FactoryはJavaScriptのプリミティブと関数を生成できるということです。

参照

7
Jayram Singh

$サービスを提供

これらは技術的には同じもので、実際には $provide service のprovider関数を使用する表記法が異なります。

  • クラスを使用している場合：youcouldservice表記を使用します。
  • オブジェクトを使用している場合：あなたcouldはfactory表記を使用します。

serviceとfactoryのonlyの違い表記は、サービスがnew-edであり、工場はそうではないことです。しかし、他のすべてについては、彼らは両方look、smellおよびbehave同じ。繰り返しますが、これは$ provide.provider関数の単なる省略形です。

// Factory

angular.module('myApp').factory('myFactory', function() {

  var _myPrivateValue = 123;

  return {
    privateValue: function() { return _myPrivateValue; }
  };

});

// Service

function MyService() {
  this._myPrivateValue = 123;
}

MyService.prototype.privateValue = function() {
  return this._myPrivateValue;
};

angular.module('myApp').service('MyService', MyService);
4
null