Angular Service 和 Angular Factory 的區別

我們將介紹 Angular service 和 Angular factory 服務之間的區別。

我們還將介紹選擇 Angular service 而不是 Angular factory 的原因，反之亦然。

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。

服務方法的第二個引數是一個函式。讓我們傳遞一個不需要引數的匿名函式。

因此，我們的程式碼將如下所示。

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

})

讓我們實現 todoListService。當我們第一次將服務注入控制器時，Angular 在我們傳入服務方法的函式引用上使用 new 關鍵字。

換句話說，它將我們的函式視為建構函式。使用 new 關鍵字會自動發生兩件事；首先，我們得到一個分配給 this 變數的空物件。

其次，我們的函式將返回這個物件。函式的其餘部分是我們對服務的定義。

所以，讓我們設定一個陣列來儲存我們的待辦事項列表。我們的程式碼如下所示。

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

讓我們建立兩個方法，addTodo 和 removeTodo，我們不會實現它們。我們的程式碼將如下所示。

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

因此，我們的 Angular service 是完整的，它具有 addTodo 函式和 removeTodo 函式，它們都是構建為服務的。

當我們注入 this 時，變數 this 會返回給我們併成為我們的服務。要建立 Angular factory 服務，請呼叫模組上的工廠方法。

服務方法的第一個引數是服務名稱，我們稱之為 todoListFactory。服務方法的第二個引數是一個函式。

讓我們傳遞一個不需要引數的匿名函式。

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

})

讓我們實現工廠服務。

Angular service 和 Angular factory 之間的區別在於 Angular service 作為建構函式是裸露的。相反，Angular factory 只是被呼叫，從函式返回的任何東西都將是我們的服務。

要實現我們的 todoListFactory，我們必須建立一個空物件並返回該物件。我們實現的其餘部分是相同的。

我們將建立 todoList 陣列和兩個函式 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
})

我們有兩個服務，一個 factory 服務和一個 service 服務，相同。我們可以建立一個控制器，注入我們的服務，並以相同的方式使用；它們都具有相同的方法和屬性。

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

主要問題是為什麼你會選擇使用 factory 而不是 service，因為我們可以對它們做同樣的事情。答案是，如果我們想要返回除物件之外的任何東西，比如函式，我們必須使用 factory。

假設我們想要一個允許我們建立待辦事項的服務；為此，我們可以建立一個 factory，該 factory 可以返回一個函式，該函式接受對待辦事項和名稱的描述。

該函式將返回一個帶有描述和名稱集的新物件。它將具有標記待辦事項完成的功能。

我們的程式碼如下所示。

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

因此，我們可以將新的 todoList factory 服務注入到我們的控制器中，並使用它來建立新的待辦事項，例如待辦任務和更新的待辦事項。

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")
})