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);
示例演示
在下面的例子中,我定义了MyService
和MyFactory
。 请注意如何.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工厂?
Factory
和Service
是一个provider
包装。
厂
Factory
可以返回任何可以是一个class(constructor function)
, instance of class
, string
, number
或boolean
。 如果你返回一个constructor
函数,你可以在你的控制器中实例化。
myApp.factory('myFactory', function () { // any logic here.. // Return any thing. Here it is object return { name: 'Joe' } }
服务
服务不需要返回任何东西。 但是你必须在this
variables中分配一切。 因为服务将默认创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
函数的一个不同的符号。
- 如果您使用的是课程,则可以使用服务符号。
- 如果您使用的是对象: 可以使用工厂符号。
service
和factory
符号之间的唯一区别是服务是新的 ,工厂不是。 但是对于其他的东西,他们都看起来 , 嗅觉和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);