迹忆客 专注技术分享

我们将介绍 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")
})