627

私が理解しているように、工場内では、コントローラーに注入されたオブジェクトを返します。thisサービス内では、何も返さずにオブジェクトを使用して処理しています。

私は、サービスは常にシングルトンであり、新しいファクトリオブジェクトがすべてのコントローラーに注入されると想定していました。しかし、結局のところ、ファクトリオブジェクトもシングルトンですか？

デモンストレーションするサンプルコード：

var factories = angular.module('app.factories', []);
var app = angular.module('app',  ['ngResource', 'app.factories']);

factories.factory('User', function () {
  return {
    first: 'John',
    last: 'Doe'
  };
});

app.controller('ACtrl', function($scope, User) {
  $scope.user = User;
});

app.controller('BCtrl', function($scope, User) {
  $scope.user = User;
});

user.firstinを変更すると、 inも変更さACtrlれることがわかります。たとえば、シングルトンですか？user.firstBCtrlUser

私の仮定は、新しいインスタンスがファクトリを備えたコントローラに注入されたということでしたか？

4

20 に答える 20

607

すべてのAngularサービスはシングルトンです：

ドキュメント（シングルトンとしてのサービスを参照）：https ：//docs.angularjs.org/guide/services

最後に、すべてのAngularサービスがアプリケーションシングルトンであることを理解することが重要です。これは、インジェクターごとに特定のサービスのインスタンスが1つしかないことを意味します。

基本的に、サービスとファクトリの違いは次のとおりです。

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

  // service is just a constructor function
  // that will be called with 'new'

  this.sayHello = function(name) {
     return "Hi " + name + "!";
  };
});

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

  // factory returns an object
  // you can run some code before

  return {
    sayHello : function(name) {
      return "Hi " + name + "!";
    }
  }
});

$ Provideについてのこのプレゼンテーションをチェックしてください：http ：//slides.wesalvaro.com/20121113/#/

これらのスライドは、AngularJsのミートアップの1つで使用されました：http：//blog.angularjs.org/2012/11/more-angularjs-meetup-videos.html

于 2012-12-07T13:17:36.387 に答える
385

私にとっては、それらがすべて同じように機能することに気付いたときに啓示がありました。何かを一度実行し、取得した値を保存し、依存性注入を介して参照したときに同じ保存値を咳き込みます。

私たちが持っていると言う：

app.factory('a', fn);
app.service('b', fn);
app.provider('c', fn);

3つの違いは次のとおりです。

  1. aの保存された値は、実行から取得されますfn。つまり、次のようになります。fn()
  2. bの保存された値は、newingから取得されますfn。つまり、次のようになります。new fn()
  3. cの保存された値は、最初にnewingによってインスタンスを取得し、次にインスタンスのメソッドをfn実行することで得られます。$get

つまり、angular内にキャッシュオブジェクトのようなものがあり、各インジェクションの値は、最初にインジェクションされたときに1回だけ割り当てられ、次のようになります。

cache.a = fn()
cache.b = new fn()
cache.c = (new fn()).$get()

これが、サービスで使用し、プロバイダーthisで定義する理由です。this.$get

お役に立てれば。

于 2014-11-14T06:32:17.777 に答える
95

実例

「helloworld」の例

とfactory// ：service_provider

var myApp = angular.module('myApp', []);
 
//service style, probably the simplest one
myApp.service('helloWorldFromService', function() {
    this.sayHello = function() {
        return "Hello, World!"
    };
});
 
//factory style, more involved but more sophisticated
myApp.factory('helloWorldFromFactory', function() {
    return {
        sayHello: function() {
            return "Hello, World!"
        }
    };
});
    
//provider style, full blown, configurable version     
myApp.provider('helloWorld', function() {
    // In the provider function, you cannot inject any
    // service or factory. This can only be done at the
    // "$get" method.
 
    this.name = 'Default';
 
    this.$get = function() {
        var name = this.name;
        return {
            sayHello: function() {
                return "Hello, " + name + "!"
            }
        }
    };
 
    this.setName = function(name) {
        this.name = name;
    };
});
 
//hey, we can configure a provider!            
myApp.config(function(helloWorldProvider){
    helloWorldProvider.setName('World');
});
        
 
function MyCtrl($scope, helloWorld, helloWorldFromFactory, helloWorldFromService) {
    
    $scope.hellos = [
        helloWorld.sayHello(),
        helloWorldFromFactory.sayHello(),
        helloWorldFromService.sayHello()];
}​
于 2013-10-28T13:50:19.593 に答える
57

次のように、ファクトリで新しいクラスを返すことができるように、コンストラクタ関数を返す方法もあります。

function MyObjectWithParam($rootScope, name) {
  this.$rootScope = $rootScope;
  this.name = name;
}
MyObjectWithParam.prototype.getText = function () {
  return this.name;
};

App.factory('MyObjectWithParam', function ($injector) {
  return function(name) { 
    return $injector.instantiate(MyObjectWithParam,{ name: name });
  };
});

したがって、MyObjectWithParamを使用するコントローラーでこれを行うことができます。

var obj = new MyObjectWithParam("hello"),

ここで完全な例を参照してください：http：
//plnkr.co/edit/GKnhIN？p = Preview

そしてここでそれが議論されたグーグルグループページ：
https ：//groups.google.com/forum/#！msg / angle / 56sdORWEoqg / b8hdPskxZXsJ

于 2013-04-09T14:39:47.723 に答える
51

主な違いは次のとおりです。

サービス

構文：module.service( 'serviceName', function );

結果：serviceNameを注入可能な引数として宣言すると、に渡される関数のインスタンスmodule.serviceが提供されます。

使用法：挿入された関数参照に（）を追加するだけで呼び出すのに役立つユーティリティ関数を共有するのに役立つ可能性があります。injectedArg.call( this )または同様のもので実行することもできます。

工場

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

結果：factoryNameを注入可能な引数として宣言すると、に渡された関数参照を呼び出すことによって返される値module.factoryが提供されます。

使用法：インスタンスを作成するために新しく作成できる「クラス」関数を返す場合に役立つ可能性があります。

また、 AngularJSのドキュメントと、サービスとファクトリについて混乱しているstackoverflowに関する同様の質問を確認してください。

これは、サービスとファクトリを使用した例です。AngularJSサービスとファクトリの詳細をご覧ください。

于 2013-12-23T00:01:26.110 に答える
27

最初の答えに加えて、.service（）は、よりオブジェクト指向のスタイル（C＃/ Java）でコードを記述した人向けだと思います（このキーワードを使用し、プロトタイプ/コンストラクター関数を介してオブジェクトをインスタンス化します）。

Factoryは、javascript/関数型コーディングスタイルにより自然なコードを作成する開発者向けです。

angle.js内の.serviceおよび.factoryメソッドのソースコードを見てください-内部的には、それらはすべてプロバイダーメソッドを呼び出します：

  function provider(name, provider_) {
    if (isFunction(provider_)) {
      provider_ = providerInjector.instantiate(provider_);
    }
    if (!provider_.$get) {
      throw Error('Provider ' + name + ' must define $get factory method.');
    }
    return providerCache[name + providerSuffix] = provider_;
  }

  function factory(name, factoryFn) { \
    return provider(name, { $get: factoryFn }); 
  }

  function service(name, constructor) {
    return factory(name, ['$injector', function($injector) {
      return $injector.instantiate(constructor);
    }]);
  }
于 2013-06-20T11:35:21.317 に答える
25

非常に簡単です：

.service-登録された関数はコンストラクターとして呼び出されます（別名「newed」）

.factory-登録された関数は単純な関数として呼び出されます

両方とも一度呼び出されると、アプリの他のコンポーネントに注入されるシングルトンオブジェクトになります。

于 2014-11-25T14:17:41.737 に答える
20

すべてのプロバイダーは同じように機能します。さまざまなメソッド、、serviceを使用するとfactory、provider同じことをより少ないコードで実行できます。

PSもvalueありconstantます。

providerで始まり、で終わるチェーンの各特殊ケースにvalueは、追加の制限があります。したがって、それらの間で決定するには、より少ないコードで目的を達成できるかどうかを自問する必要があります。

これが私が何を意味するかを示す写真です：

ここに画像の説明を入力してください

この画像を入手したブログ投稿の内訳とリファレンスガイドは次のとおりです。

http://www.simplygoodcode.com/2015/11/the-difference-between-service-provider-and-factory-in-angularjs/

于 2015-12-10T13:02:03.863 に答える
13

以下に、サービスとファクトリの違いを確認するのに役立つ可能性のあるサービスとファクトリの例をいくつか示します。基本的に、サービスには「新しい...」が呼び出され、すでにインスタンス化されています。ファクトリは自動的にインスタンス化されません。

基本的な例

単一のメソッドを持つクラスオブジェクトを返します

これが単一のメソッドを持つサービスです：

angular.service('Hello', function () {
  this.sayHello = function () { /* ... */ };
});

これは、メソッドを使用してオブジェクトを返すファクトリです。

angular.factory('ClassFactory', function () {
  return {
    sayHello: function () { /* ... */ }
  };
});

値を返す

数値のリストを返すファクトリ：

angular.factory('NumberListFactory', function () {
  return [1, 2, 3, 4, 5];
});

console.log(NumberListFactory);

番号のリストを返すサービス：

angular.service('NumberLister', function () {
  this.numbers = [1, 2, 3, 4, 5];
});

console.log(NumberLister.numbers);

どちらの場合も出力は同じで、数値のリストです。

高度な例

工場を使用した「クラス」変数

この例では、CounterFactoryを定義し、カウンターをインクリメントまたはデクリメントします。現在のカウントを取得したり、作成されたCounterFactoryオブジェクトの数を取得したりできます。

angular.factory('CounterFactory', function () {
  var number_of_counter_factories = 0; // class variable

  return function () {
    var count = 0; // instance variable
    number_of_counter_factories += 1; // increment the class variable

    // this method accesses the class variable
    this.getNumberOfCounterFactories = function () {
      return number_of_counter_factories;
    };

    this.inc = function () {
      count += 1;
    };
    this.dec = function () {
      count -= 1;
    };
    this.getCount = function () {
      return count;
    };
  }

})

を使用しCounterFactoryて複数のカウンターを作成します。クラス変数にアクセスして、作成されたカウンターの数を確認できます。

var people_counter;
var places_counter;

people_counter = new CounterFactory();
console.log('people', people_counter.getCount());
people_counter.inc();
console.log('people', people_counter.getCount());

console.log('counters', people_counter.getNumberOfCounterFactories());

places_counter = new CounterFactory();
console.log('places', places_counter.getCount());

console.log('counters', people_counter.getNumberOfCounterFactories());
console.log('counters', places_counter.getNumberOfCounterFactories());

このコードの出力は次のとおりです。

people 0
people 1
counters 1
places 0
counters 2
counters 2
于 2014-07-29T07:56:13.240 に答える
13

「ファクトリ」と「サービス」は、角度でDI（依存性注入）を行う異なる方法です。

したがって、以下のコードに示すように、「サービス」を使用してDIを定義する場合。これにより、「Logger」オブジェクトの新しいGLOBALインスタンスが作成され、関数に挿入されます。

app.service("Logger", Logger); // Injects a global object

「ファクトリ」を使用してDIを定義すると、インスタンスは作成されません。メソッドを渡すだけで、後でコンシューマーはオブジェクトインスタンスのファクトリを内部的に呼び出す必要があります。

app.factory("Customerfactory", CreateCustomer);

以下は、「サービス」のDIプロセスが「ファクトリ」とどのように異なるかを視覚的に示す簡単な画像です。

ここに画像の説明を入力してください

シナリオに応じてさまざまなタイプのオブジェクトを作成する場合は、ファクトリを使用する必要があります。たとえば、シナリオに応じて、単純な「Customer」オブジェクト、または「Address」オブジェクトを使用した「Customer」、または「Phone」オブジェクトを使用した「Customer」を作成します。この段落の詳細な説明は次のとおりです

ユーティリティ、ロガー、エラーハンドラなどのユーティリティまたは共有関数を注入する場合は、サービスを使用する必要があります。

于 2015-04-02T01:39:04.460 に答える
8

サービススタイル:(おそらく最も単純なもの）は実際の関数を返します：挿入された関数参照に（）を追加するだけで呼び出すのに役立つユーティリティ関数を共有するのに便利です。

AngularJSのサービスは、一連の関数を含むシングルトンJavaScriptオブジェクトです。 

var myModule = angular.module("myModule", []);

myModule.value  ("myValue"  , "12345");

function MyService(myValue) {
    this.doIt = function() {
        console.log("done: " + myValue;
    }
}

myModule.service("myService", MyService);
myModule.controller("MyController", function($scope, myService) {

    myService.doIt();

});

ファクトリスタイル:(より複雑ですがより洗練された）関数の戻り値を返します：Javaでnew Object（）のようなオブジェクトをインスタンス化します。

ファクトリは値を作成する関数です。サービスやコントローラーなどがファクトリから注入された値を必要とする場合、ファクトリはオンデマンドで値を作成します。作成された値は、注入が必要なすべてのサービス、コントローラーなどで再利用されます。 

var myModule = angular.module("myModule", []);

myModule.value("numberValue", 999);

myModule.factory("myFactory", function(numberValue) {
    return "a value: " + numberValue;
})  
myModule.controller("MyController", function($scope, myFactory) {

    console.log(myFactory);

});

プロバイダースタイル:(本格的な構成可能なバージョン）は、関数の$ get関数の出力を返します：構成可能。

AngularJSのプロバイダーは、作成できるファクトリの最も柔軟な形式です。代わりにprovider（）関数を使用することを除いて、サービスまたはファクトリで行うのと同じように、プロバイダーをモジュールに登録します。 

var myModule = angular.module("myModule", []);

myModule.provider("mySecondService", function() {
    var provider = {};
    var config   = { configParam : "default" };

    provider.doConfig = function(configParam) {
        config.configParam = configParam;
    }

    provider.$get = function() {
        var service = {};

        service.doService = function() {
            console.log("mySecondService: " + config.configParam);
        }

        return service;
    }

    return provider;
});

myModule.config( function( mySecondServiceProvider ) {
    mySecondServiceProvider.doConfig("new config param");
});

myModule.controller("MyController", function($scope, mySecondService) {

    $scope.whenButtonClicked = function() {
        mySecondService.doIt();
    }

});

src jenkov

<!DOCTYPE html>
    <html ng-app="app">
    <head>
    	<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.1/angular.min.js"></script>
    	<meta charset=utf-8 />
    	<title>JS Bin</title>
    </head>
    <body ng-controller="MyCtrl">
    	{{serviceOutput}}
    	<br/><br/>
    	{{factoryOutput}}
    	<br/><br/>
    	{{providerOutput}}
    
    	<script>
    
    		var app = angular.module( 'app', [] );
    
    		var MyFunc = function() {
    
    			this.name = "default name";
    
    			this.$get = function() {
    				this.name = "new name"
    				return "Hello from MyFunc.$get(). this.name = " + this.name;
    			};
    
    			return "Hello from MyFunc(). this.name = " + this.name;
    		};
    
    		// returns the actual function
    		app.service( 'myService', MyFunc );
    
    		// returns the function's return value
    		app.factory( 'myFactory', MyFunc );
    
    		// returns the output of the function's $get function
    		app.provider( 'myProv', MyFunc );
    
    		function MyCtrl( $scope, myService, myFactory, myProv ) {
    
    			$scope.serviceOutput = "myService = " + myService;
    			$scope.factoryOutput = "myFactory = " + myFactory;
    			$scope.providerOutput = "myProvider = " + myProv;
    
    		}
    
    	</script>
    
    </body>
    </html>

jsbin

<!DOCTYPE html>
<html ng-app="myApp">
<head>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.1/angular.min.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
</head>
<body>
<div ng-controller="MyCtrl">
    {{hellos}}
</div>
	<script>

	var myApp = angular.module('myApp', []);

//service style, probably the simplest one
myApp.service('helloWorldFromService', function() {
    this.sayHello = function() {
        return "Hello, World!"
    };
});

//factory style, more involved but more sophisticated
myApp.factory('helloWorldFromFactory', function() {
    return {
        sayHello: function() {
            return "Hello, World!"
        }
    };
});
    
//provider style, full blown, configurable version     
myApp.provider('helloWorld', function() {

    this.name = 'Default';

    this.$get = function() {
        var name = this.name;
        return {
            sayHello: function() {
                return "Hello, " + name + "!"
            }
        }
    };

    this.setName = function(name) {
        this.name = name;
    };
});

//hey, we can configure a provider!            
myApp.config(function(helloWorldProvider){
    helloWorldProvider.setName('World');
});
        

function MyCtrl($scope, helloWorld, helloWorldFromFactory, helloWorldFromService) {
    
    $scope.hellos = [
        helloWorld.sayHello(),
        helloWorldFromFactory.sayHello(),
        helloWorldFromService.sayHello()];
}
	</script>

</body>
</html>

jsfiddle

于 2015-12-17T00:06:25.133 に答える
2

基本的な違いは、プロバイダーがプリミティブ（非オブジェクト）、配列、またはコールバック関数の値をファクトリで宣言された変数に設定できることです。したがって、オブジェクトを返す場合は、明示的に宣言して返す必要があります。

一方、サービスは、サービス宣言変数をオブジェクトに設定するためにのみ使用できるため、オブジェクトの明示的な作成と返送を回避できますが、一方で、thisキーワードの使用は許可されます。

または、簡単に言うと、「プロバイダーはより一般的な形式ですが、サービスはオブジェクトのみに制限されています」。

于 2014-11-21T01:09:55.897 に答える
2

これが、デザインパターンの観点からそれらの違いを理解した方法です。

サービス：タイプを返します。これは、そのタイプのオブジェクトを作成するために新しくなります。Javaアナロジーが使用される場合、ServiceはJavaクラス定義を返します。

ファクトリ：すぐに使用できる具体的なオブジェクトを返します。Javaアナロジーでは、ファクトリはJavaオブジェクトを返します。

人々（私を含む）を混乱させることが多いのは、コードにサービスまたはファクトリを挿入すると、それらを同じように使用できることです。どちらの場合も、コードで取得するのは、すぐに呼び出すことができる具体的なオブジェクトです。つまり、サービスの場合、Angularはユーザーに代わってサービス宣言で「新規」を呼び出します。これは複雑な概念だと思います。

于 2016-01-22T22:59:00.780 に答える
1

これは、サービスとファクトリとプロバイダーを理解するための最良かつ短い答えです。

ソース：https ：//groups.google.com/forum/#！msg / angle / 56sdORWEoqg / HuZsOsMvKv4J

ここで、ベンがデモ で言うことhttp://jsbin.com/ohamub/1/edit?html,output

「コードには主な違いを示すコメントがありますが、ここで少し詳しく説明します。メモとして、私はこれについて頭を悩ませているところです。間違っていることを言ったら、私に知らせてください。

サービス

構文：module.service（'serviceName'、function）;

結果：serviceNameを注入可能な引数として宣言すると、module.serviceに渡される実際の関数参照が提供されます。

使用法：挿入された関数参照に（）を追加するだけで呼び出すのに役立つユーティリティ関数を共有するのに役立つ可能性があります。また、injectedArg.call（this）などを使用して実行することもできます。

工場

構文：module.factory（'factoryName'、function）;

結果：factoryNameを注入可能な引数として宣言すると、module.factoryに渡された関数参照を呼び出すことによって返される値が提供されます。

使用法：インスタンスを作成するために新しく作成できる「クラス」関数を返す場合に役立つ可能性があります。

プロバイダー

構文：module.provider（'providerName'、function）;

結果：providerNameを注入可能な引数として宣言すると、module.providerに渡された関数参照の$getメソッドを呼び出すことによって返される値が提供されます。

使用法：インスタンスを作成するために新しく作成できる「クラス」関数を返すのに役立つ可能性がありますが、注入する前に何らかの構成が必要です。プロジェクト間で再利用可能なクラスにおそらく役立ちますか？まだこれはぼんやりしている」ベン

于 2016-05-01T20:21:58.807 に答える
1

私はしばらくの間この混乱を経験しました、そして私はここで簡単な説明を提供するために最善を尽くしています。これがお役に立てば幸いです。

angular .factoryangular .serviceどちらもサービスを初期化し、同じように機能するために使用されます。

唯一の違いは、サービスを初期化する方法です。

どちらもシングルトンです

var app = angular.module('app', []);

工場

app.factory（<service name>、<function with a return value>）

戻り値のある関数からサービスを初期化する場合は、このfactoryメソッドを使用する必要があります。

例えば

function myService() {
  //return what you want
  var service = {
    myfunc: function (param) { /* do stuff */ }
  }
  return service;
}

app.factory('myService', myService);

このサービスを（コントローラーなどに）注入する場合：

  • Angularは指定された関数を（として）呼び出しmyService()てオブジェクトを返します
  • シングルトン-一度だけ呼び出され、保存され、同じオブジェクトを渡します。

サービス

app.service（<service name>、<constructor function>）

コンストラクター関数から（thisキーワードを使用して）サービスを初期化する場合は、このserviceメソッドを使用する必要があります。

例えば

function myService() {
  this.myfunc: function (param) { /* do stuff */ }
}

app.service('myService', myService);

このサービスを（コントローラーなどに）注入する場合：

  • Angularはnew、指定された関数（as new myService()）を使用してオブジェクトを返します
  • シングルトン-一度だけ呼び出され、保存され、同じオブジェクトを渡します。

注：factoryと<constructor function>またはserviceで使用すると<function with a return value>、機能しません。

例-デモ

于 2016-06-26T08:19:21.193 に答える
1

Pascal Prechtによるブログ投稿のおかげで、これが違いを理解するのに役立ちました。

サービスは、サービスを定義する名前と関数を受け取るモジュール上のメソッドです。その特定のサービスを、コントローラー、ディレクティブ、フィルターなどの他のコンポーネントに挿入して使用できます。ファクトリはモジュールのメソッドであり、ファクトリを定義する名前と関数も取ります。また、サービスで行ったのと同じ方法で注入して使用することもできます。

newで作成されたオブジェクトは、コンストラクター関数のプロトタイププロパティの値をプロトタイプとして使用するため、Object.create（）を呼び出すAngularコードを見つけました。これは、インスタンス化されたときのサービスコンストラクター関数であると思います。ただし、ファクトリ関数は実際には呼び出される関数にすぎないため、ファクトリのオブジェクトリテラルを返す必要があります。

これが私が工場で見つけたAngular1.5コードです：

var needsRecurse = false;
    var destination = copyType(source);

    if (destination === undefined) {
      destination = isArray(source) ? [] : Object.create(getPrototypeOf(source));
      needsRecurse = true;
    }

factory（）関数のAngularソースコードスニペット：

 function factory(name, factoryFn, enforce) {
    return provider(name, {
      $get: enforce !== false ? enforceReturnValue(name, factoryFn) : factoryFn
    });
  }

渡された名前とファクトリ関数を受け取り、ファクトリ関数である$getメソッドを持つ同じ名前のプロバイダーを返します。インジェクターに特定の依存関係を要求するときは常に、$ get（）メソッドを呼び出すことにより、基本的に対応するプロバイダーにそのサービスのインスタンスを要求します。そのため、プロバイダーを作成するときに$ get（）が必要です。

これがサービス用の角度1.5コードです。

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

service（）を呼び出すと、実際にはfactory（）が呼び出されます。ただし、サービスコンストラクタ関数をそのままファクトリに渡すだけではありません。また、指定されたコンストラクターによってオブジェクトをインスタンス化するようにインジェクターに要求する関数を渡します。

つまり、MyServiceをどこかに挿入すると、コードで何が起こるかは次のようになります。

MyServiceProvider.$get(); // return the instance of the service

もう一度言い換えると、サービスはファクトリを呼び出します。ファクトリは、対応するプロバイダーの$ get（）メソッドです。さらに、$ injector.instantiate（）は、コンストラクター関数を使用して最終的にObject.create（）を呼び出すメソッドです。そのため、サービスでは「これ」を使用しています。

ES5の場合、service（）とfactory（）のどちらを使用するかは関係ありません。サービスのプロバイダーを作成するのは、常に呼び出されるファクトリです。

ただし、サービスでもまったく同じことができます。サービスはコンストラクター関数ですが、オブジェクトリテラルを返すことを妨げるものではありません。したがって、サービスコードを取得して、基本的にファクトリとまったく同じように記述できます。つまり、オブジェクトを返すファクトリとしてサービスを記述できます。

ほとんどの人がサービスよりも工場の使用を推奨するのはなぜですか？これは、Pawel Kozlowskiの著書「AngularJSを使用したWebアプリケーション開発の習得」から得られた、私が見た中で最高の答えです。

ファクトリメソッドは、オブジェクトをAngularJS依存性注入システムに取り込む最も一般的な方法です。非常に柔軟性があり、高度な作成ロジックを含めることができます。ファクトリは通常の関数であるため、新しい字句スコープを利用して「プライベート」変数をシミュレートすることもできます。特定のサービスの実装の詳細を非表示にできるため、これは非常に便利です。」

于 2016-07-01T18:01:53.830 に答える
1
  • ファクトリでは、実際にファクトリ内にオブジェクトを作成して返します。
  • このサービスでは、キーワードを使用して関数を定義する標準関数があります。 this
  • プロバイダーにはあなた$getが定義するものがあり、それを使用してデータを返すオブジェクトを取得できます。
于 2016-10-29T15:24:55.557 に答える
1

AngularJSでビジネスロジックを処理する方法は3つあります:( YaakovのCourseraAngularJSコースに触発されて）次のとおりです。

  1. サービス
  2. 工場
  3. プロバイダー

ここでは、サービスとファクトリについてのみ説明します。

サービス：

構文：

app.js

 var app = angular.module('ServiceExample',[]);
 var serviceExampleController =
              app.controller('ServiceExampleController', ServiceExampleController);
 var serviceExample = app.service('NameOfTheService', NameOfTheService);

 ServiceExampleController.$inject = ['NameOfTheService'] //very important as this protects from minification of js files

function ServiceExampleController(NameOfTheService){
     serviceExampleController = this;
     serviceExampleController.data = NameOfTheService.getSomeData();
 }

function NameOfTheService(){
     nameOfTheService = this;
     nameOfTheService.data = "Some Data";
     nameOfTheService.getSomeData = function(){
           return nameOfTheService.data;
     }     
}

index.html

<div ng-controller = "ServiceExampleController as serviceExample">
   {{serviceExample.data}}
</div>

サービスの主な機能：

  1. 怠惰なインスタンス化：サービスが注入されない場合、サービスはインスタンス化されません。したがって、それを使用するには、モジュールに注入する必要があります。

  2. シングルトン：複数のモジュールに注入された場合、すべてが1つの特定のインスタンスにのみアクセスできます。そのため、異なるコントローラー間でデータを共有すると非常に便利です。

工場

それでは、AngularJSのファクトリについて話しましょう

まず、構文を見てみましょう。

app.js：

var app = angular.module('FactoryExample',[]);
var factoryController = app.controller('FactoryController', FactoryController);
var factoryExampleOne = app.factory('NameOfTheFactoryOne', NameOfTheFactoryOne);
var factoryExampleTwo = app.factory('NameOfTheFactoryTwo', NameOfTheFactoryTwo);

//first implementation where it returns a function
function NameOfTheFactoryOne(){
   var factory = function(){
      return new SomeService();
    }
   return factory;
}

//second implementation where an object literal would be returned
function NameOfTheFactoryTwo(){
   var factory = {
      getSomeService : function(){
          return new SomeService();
       }
    };
   return factory;
}

ここで、コントローラーで上記の2つを使用します。

 var factoryOne = NameOfTheFactoryOne() //since it returns a function
 factoryOne.someMethod();

 var factoryTwo = NameOfTheFactoryTwo.getSomeService(); //accessing the object
 factoryTwo.someMethod();

工場の特徴：

  1. このタイプのサービスは、ファクトリデザインパターンに従います。工場は、新しいオブジェクトやメソッドを作成する中心的な場所と考えることができます。

  2. これにより、シングルトンだけでなく、カスタマイズ可能なサービスも生成されます。

  3. この.service()メソッドは、常に同じタイプのサービス、つまりシングルトンを生成するファクトリです。その動作を構成する簡単な方法はありません。この.service()メソッドは通常、構成をまったく必要としないもののショートカットとして使用されます。

于 2017-02-27T19:23:04.320 に答える
1

短く簡単な説明については、https：//stackoverflow.com/a/26924234/5811973を参照してください。

詳細な説明については、https：//stackoverflow.com/a/15666049/5811973を参照してください。

また、angularJsのドキュメントから： ここに画像の説明を入力してください

于 2017-06-30T11:50:55.803 に答える
0

このアナロジーで違いを理解できます-値を返す通常の関数と、新しいキーワードを使用してインスタンス化されるコンストラクター関数の違いを検討してください。したがって、ファクトリの作成は、値を返す通常の関数の作成とまったく同じです（プリミティブまたはオブジェクト）に対して、サービスの作成は、新しいキーワードを使用してインスタンスを作成できるコンストラクター関数（OOクラス）の作成に似ています。ここで注意すべきことは、Serviceメソッドを使用してサービスを作成すると、AngularJSでサポートされている依存性注入メカニズムを使用してそのインスタンスが自動的に作成されることです。

于 2017-09-02T19:31:41.577 に答える