AngularJS:工厂和服务?
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'); });
使用服务,注入到控制器中的VaderService是被实例化的,所以我可以直接调用VaderService.speak,但是,如果我将VaderService更改为module.factory,控制器中的代码将不再起作用,这就是主要区别。使用工厂,不能将VaderService注入到控制器中并实例化,这就是为什么在设置工厂时需要返回一个对象的原因(请参阅我在问题中的示例)。
然而,您可以以完全相同的方式设置服务,就像您可以设置工厂一样(即让它返回一个对象),服务的行为与工厂完全相同
有了这些信息,我看不到使用工厂而不是服务的理由,服务可以做工厂所能做的一切,甚至更多。
以下是原始问题。
我知道这个问题已经被问了很多次,但我真的看不出工厂和服务之间有什么功能上的区别。我阅读了这篇教程:http://blogs.clevertech.biz/startupblog/angularjs-factory-service-provider
看上去它提供了一个相当好的解释,然而,我设置了我的应用程序如下:
index.html
{{luke}} |
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时,我看到“加入黑暗面路克”,很好,正如预期的那样。然而,如果我将VaderService.js更改为这样(请注意,使用module.service而不是module.factory):
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完全相同。那么两者之间的真正功能区别是什么呢?
Factory
和Service
只是provider
的包装器。
Factory
Factory
可以返回任何可以是类(构造函数)
、类的实例
、字符串
、数字
或布尔值
的东西。如果返回构造函数
,你可以在控制器中实例化。
myApp.factory('myFactory', function () { // any logic here.. // Return any thing. Here it is object return { name: 'Joe' } }
Service
服务无需返回任何东西。但你必须把所有东西分配给this
变量。因为服务将默认创建实例并将其用作基础对象。
myApp.service('myService', function () { // any logic here.. this.name = 'Joe'; }
服务背后的实际angularjs代码
function service(name, constructor) { return factory(name, ['$injector', function($injector) { return $injector.instantiate(constructor); }]); }
它只是factory
的包装器。如果你从service
返回了东西,那么它将像Factory
一样运行。
重要提示
:从Factory和Service返回的结果将被缓存,并且对所有控制器返回相同的结果。
什么时候使用它们?
Factory
在大多数情况下都是首选。它可用于需要在不同控制器中实例化的构造函数
。
Service
是一种Singleton
对象。从服务返回的对象将为所有控制器相同。当你想要在整个应用程序中拥有单个对象时,它可用于此。
进一步了解,请阅读
http://iffycan.blogspot.in/2013/05/angular-service-or-factory.html
http://viralpatel.net/blogs/angularjs-service-factory-tutorial/
将上述内容翻译为:
http://viralpatel.net/blogs/angularjs-service-factory-tutorial/
Service与Factory
工厂和服务之间的区别就像函数和对象之间的区别一样。
工厂提供程序
-
提供函数的返回值,即您只需创建一个对象,向其中添加属性,然后返回该相同的对象。当您将此服务传递到控制器时,该对象上的这些属性现在将通过您的工厂在该控制器中可用。(假设场景)
-
单例,只会被创建一次
-
可以重复使用的组件
-
工厂是在控制器之间通信的良好方式,就像共享数据一样。
-
可以使用其他依赖项
-
通常用于服务实例需要复杂的创建逻辑的情况
-
不能注入到
.config()
函数中。 -
用于不可配置的服务
-
如果您使用的是对象,可以使用工厂提供程序。
-
语法:
module.factory('factoryName',function);
服务提供程序
-
提供函数(对象)的实例-您只需使用“new”关键字实例化,然后将属性添加到“this”中,服务将返回“this”。当您将服务传递到控制器时,此“this”上的属性现在将通过该控制器在该控制器中可用。(假设场景)
-
单例,只会被创建一次
-
可重复使用的组件
-
服务用于控制器之间的通信以共享数据
-
您可以使用
this
关键字将属性和函数添加到服务对象中 -
依赖项是作为构造函数参数注入的
-
用于简单的创建逻辑
-
不能注入到
.config()
函数中。 -
如果您使用的是类,则可以使用服务提供程序。
-
语法:
module.service('serviceName',function);
在下面的例子中,我定义了MyService
和MyFactory
。请注意,在.service
中,我使用this.methodname
创建了服务方法。在.factory
中,我创建了一个工厂对象并将方法分配给它。
AngularJS .service
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; });
也可以看一下这些有趣的内容: