AngularJS:工厂和服务?

编辑2016年1月:由于这仍然得到关注。 既然问了这个问题,我已经完成了几个AngularJS项目,对于那些我主要使用factory ,build立了一个对象,最后返回了对象。 但是,下面的陈述仍然是正确的。

编辑:我想我终于明白了两者之间的主要区别,我有一个代码示例来演示。 我也认为这个问题是不同的build议重复。 重复说服务是不可实例化的,但是如果你按照我下面的演示来设置它,那实际上是这样的。 可以将服务设置为与工厂完全相同。 我还将提供代码,显示工厂故障转移服务,这似乎没有其他答案。

如果我像这样设置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 没有被实例化,这就是为什么在build立一个工厂时需要返回一个对象(参见我的示例)。

但是,您可以使用与build立工厂完全相同的方式来设置服务(IE会返回一个对象), 并且服务的行为与工厂完全相同

有了这些信息,我没有理由使用工厂的服务,服务可以做一切工厂可以和更多。

下面的原始问题。


我知道这已经被问及时间的负载,但我真的不能看到工厂和服务之间的任何function差异。 我读过这个教程: http : //blogs.clevertech.biz/startupblog/angularjs-factory-service-provider

它似乎给了一个相当好的解释,但是,我build立了我的应用程序如下:

的index.html

 <!DOCTYPE html> <html> <head> <title>My App</title> <script src="lib/angular/angular.js"></script> <script type="text/javascript" src="js/controllers.js"></script> <script type="text/javascript" src="js/VaderService.js"></script> <script type="text/javascript" src="js/app.js"></script> </head> <body ng-app="MyApp"> <table ng-controller="StarWarsController"> <tbody> <tr><td>{{luke}}</td></tr> </tbody> </table> </body> </html> 

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我看到“join黑暗卢克”,很好。 完全如预期。 但是,如果我将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(我确定我清空caching,并做了一个硬重新加载)。 它和module.factory 完全一样。 那么两者之间真正的function差异呢?

服务工厂


在这里输入图像说明在这里输入图像说明

工厂和服务的区别就像function和对象的区别

工厂提供商

  • 给我们函数的返回值,即。 您只需创build一个对象,向其中添加属性,然后返回相同的对象。当您将此服务传递到您的控制器时,该对象上的这些属性现在将在该控制器中通过您的工厂提供。 (假设情景)

  • 单身人士,只会被创build一次

  • 可重复使用的组件

  • 工厂是控制器之间进行通信的好方法,如共享数据。

  • 可以使用其他依赖项

  • 通常在服务实例需要复杂的创build逻辑时使用

  • 不能在.config()函数中注入。

  • 用于不可configuration的服务

  • 如果您使用的是对象,则可以使用工厂提供者。

  • 语法: module.factory('factoryName', function);

服务提供者

  • 给我们一个函数(对象)的实例 – 你刚刚使用'new'关键字实例化,你将添加属性到'this',服务将返回'this'。当你将服务传递到你的控制器时,这些属性通过您的服务,现在可以在该控制器上使用“this”。 (假设情景)

  • 单身人士,只会被创build一次

  • 可重复使用的组件

  • 服务用于控制器之间的通信以共享数据

  • 您可以使用this关键字将属性和函数添加到服务对象

  • 依赖关系被注入为构造函数参数

  • 用于简单的创build逻辑

  • 不能在.config()函数中注入。

  • 如果您使用的是课程,则可以使用服务提供者

  • 语法: module.service('serviceName', function);

示例演示

在下面的例子中,我定义了MyServiceMyFactory 。 请注意如何.service我已经使用this.methodname.创build服务方法this.methodname..factory我已经创build了一个工厂对象,并分配给它的方法。

AngularJS .service


 module.service('MyService', function() { this.method1 = function() { //..method1 logic } this.method2 = function() { //..method2 logic } }); 

AngularJS。工厂


 module.factory('MyFactory', function() { var factory = {}; factory.method1 = function() { //..method1 logic } factory.method2 = function() { //..method2 logic } return factory; }); 

也看看这个美丽的东西

对服务和工厂感到困惑

AngularJS工厂,服务和提供商

Angular.js:服务vs提供者vs工厂?

FactoryService是一个provider包装。

Factory可以返回任何可以是一个class(constructor function)instance of classstringnumberboolean 。 如果你返回一个constructor函数,你可以在你的控制器中实例化。

  myApp.factory('myFactory', function () { // any logic here.. // Return any thing. Here it is object return { name: 'Joe' } } 

服务

服务不需要返回任何东西。 但是你必须在thisvariables中分配一切。 因为服务将默认创build实例并将其用作基础对象。

 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一样。

IMPORTANT :Factory和Service的返回结果是caching,所有的控制器都返回相同的结果。

我应该什么时候使用它们?

在所有情况下, Factory最为可取。 当你有需要在不同控制器中实例化的constructor函数时,可以使用它。

Service是一种Singleton对象。 对于所有的控制器,来自服务的对象返回将是相同的。 当您想要为整个应用程序提供单个对象时,可以使用它。 例如:已validation的用户详细信息。

为了进一步理解,请阅读

http://iffycan.blogspot.in/2013/05/angular-service-or-factory.html

http://viralpatel.net/blogs/angularjs-service-factory-tutorial/

  • 如果您使用服务,您将获得一个函数的实例(“this”关键字)。
  • 如果你使用工厂,你将得到通过调用函数引用返回的值(工厂中的return语句)

工厂和服务是最常用的食谱。 它们唯一的区别在于,Service配方对自定义types的对象更好,而Factory可以生成JavaScript原语和函数。

参考

$提供服务

它们在技术上是相同的,它实际上是使用$provide服务的provider函数的一个不同的符号。

  • 如果您使用的是课程,则可以使用服务符号。
  • 如果您使用的是对象: 可以使用工厂符号。

servicefactory 符号之间的唯一区别是服务是新的 ,工厂不是。 但是对于其他的东西,他们都看起来嗅觉performance都一样。 同样,它只是$ provide.provider函数的简写。

 // Factory angular.module('myApp').factory('myFactory', function() { var _myPrivateValue = 123; return { privateValue: function() { return _myPrivateValue; } }; }); // Service function MyService() { this._myPrivateValue = 123; } MyService.prototype.privateValue = function() { return this._myPrivateValue; }; angular.module('myApp').service('MyService', MyService);