Angular Service と Angular Factory の違い

Angular service サービスと Angular factory サービスの違いを紹介します。

また、Angular factory よりも Angular service を選択する理由とその逆の理由を紹介します。

Angular Service と Angular Factory の違い

Angular が提供するさまざまなサービスタイプ、特に Angular service サービスと Angular factory サービスの違いには少し混乱があるようです。

それらを区別する最良の方法は、両方のサービスでサービスを作成し、それらの違いを理解することです。

todoList という Angular モジュールを作成し、それを変数 list に割り当てます。

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

次に、Angular service と Angular factory の両方を使用して todoList と呼ばれる Angular service を作成し、違いを確認します。Angular service サービスを作成するには、モジュールで service メソッドを呼び出します。

サービスメソッドの最初のパラメータはサービス名です。それを todoListService と呼びましょう。

service メソッドの 2 番目のパラメーターは関数です。引数を必要としない無名関数を渡してみましょう。

したがって、コードは次のようになります。

list.service("todoListService", function(){

})

todoListService を実装しましょう。初めてコントローラーにサービスを注入するとき、Angular はサービスメソッドで渡した関数参照で new キーワードを使用します。

つまり、関数をコンストラクター関数として扱います。new キーワードを使用すると、2つのことが自動的に発生します。まず、this 変数に割り当てられた空のオブジェクトを取得します。

次に、関数はこのオブジェクトを返します。関数の残りの部分は、サービスの定義です。

それでは、やることのリストを格納するための配列を設定しましょう。コードは次のようになります。

list.service("todoListService", function(){
this.todoList = []
})

実装しない addTodo と removeTodo の 2つのメソッドを作成しましょう。コードは以下のようになります。

list.service("todoListService", function(){
this.todoList = []
this.addTodo = function(todo){
//Just to give idea
}
this.removeTodo = function(todo){
//Just to give idea
}
})

したがって、すべてサービスとして構築された addTodo 関数と removeTodo 関数を備えた Angular service が完成しました。

これを注入すると、変数 this が返され、サービスになります。Angular factory サービスを作成するには、モジュールで factory メソッドを呼び出します。

service メソッドの最初のパラメーターはサービス名であり、これを todoListFactory と呼びましょう。service メソッドの 2 番目のパラメーターは関数です。

引数を必要としない無名関数を渡してみましょう。

list.factory("todoListFactory", function(){

})

ファクトリサービスを実装しましょう。

Angular service と Angular factory の違いは、Angular service がコンストラクター関数としてヌードであるということです。対照的に、Angular ファクトリは呼び出されるだけで、関数から返されるものはすべて私たちのサービスになります。

todoListFactory を実装するには、空のオブジェクトを作成してそのオブジェクトを返す必要があります。残りの実装は同じです。

todoList 配列と 2つの関数 addTodo と removeTodo を作成します。したがって、コードは次のようになります。

list.factory("todoListFactory", function(){
var obj = {}
this.todoList = []
this.addTodo = function(todo){
//Just to give idea
}
this.removeTodo = function(todo){
//Just to give idea
}
return obj
})

2つのサービス、factory service と service service がありますが、これも同じです。コントローラを作成し、サービスを注入して、同じように使用できます。

list.controller("todoController", function(todoListService, todoListFactory){
	todoListService.addTodo(/*todo*/)
	todoListFactory.addTodo(/*todo*/)
})

主な質問は、両方で同じことができるのに、なぜサービスではなくファクトリを使用することを選択するのかということです。答えは、関数のようなオブジェクト以外のものを返したい場合は、ファクトリを使用する必要があるということです。

やることを作成できるサービスが必要だったとしましょう。これを行うために、ファクトリを作成できます。このファクトリは、やることと名前の説明を受け取る関数を返すことができます。

この関数は、説明と名前が設定された新しいオブジェクトを返します。また、やることを完了としてマークする機能があります。

コードは次のようになります。

list.factory("todoListF", factory(){
	return function(description, name){
		return{
			description: description,
			name: name,
			complete: function(){
				//to-do completed
			}
		}
	}
})

そのため、新しい todoList ファクトリサービスをコントローラーに挿入し、それを使用して、タスク to-do や更新された to-do などの新しい to-do を作成できます。

list.controller("todoFController", function(todoListF){
	var task = new todoListF("Push code to github", "Github Push Code")
	var update = new todoListF("Update code on github repository", "Update Repository")
})