AngularJS:工厂和服务?

IT技术 javascript angularjs angularjs-service angularjs-factory
2021-02-09 10:38:22

编辑 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');   
});

使用service,注入控制器的VaderService是实例化的,所以我可以直接调用VaderService.speak,但是,如果我将VaderService改为module.factory,控制器中的代码将不再起作用,这是主要的区别. 使用工厂,注入到控制器中的 VaderService没有被实例化,这就是为什么在设置工厂时需要返回一个对象的原因(请参阅我在问题中的示例)。

但是,您可以以与设置工厂完全相同的方式设置服务(即让它返回一个对象),并且该服务的行为与工厂完全相同

鉴于这些信息,我认为没有理由使用工厂而不是服务,服务可以做工厂所能做的一切,甚至更多。

下面的原始问题。


我知道这已经被问过很多次了,但我真的看不出工厂和服务之间有任何功能差异。我读过这个教程:http : //blogs.clevertech.biz/startupblog/angularjs-factory-service-provider

它似乎给出了一个相当好的解释,但是,我按如下方式设置了我的应用程序:

索引.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>

应用程序.js:

angular.module('MyApp', [
  'MyApp.services',
  'MyApp.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完全相同那么两者之间真正的功能区别是什么?

4个回答

服务工厂


在此处输入图片说明 在此处输入图片说明

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

工厂供应商

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

  • 单例并且只会被创建一次

  • 可重用组件

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

  • 可以使用其他依赖

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

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

  • 用于不可配置的服务

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

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

服务提供者

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

  • 单例并且只会被创建一次

  • 可重用组件

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

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

  • 依赖项作为构造函数参数注入

  • 用于简单的创建逻辑

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

  • 如果你正在使用一个类,你可以使用服务提供者

  • 句法: module.service(‘serviceName’, function);

示例演示

在下面的示例中,我定义了MyServiceMyFactory请注意.service我是如何使用this.methodname.In创建服务方法的,.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;
});

也看看这些美丽的东西

对服务与工厂的困惑

AngularJS 工厂、服务和提供者

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

这对我来说很有意义!所以我可以想象,让服务表现得像一个工厂,但这与服务的设计目的背道而驰。此外,如果我在使用 module.factory 时不返回任何内容,事情将无法正常工作,对吗?
2021-03-18 10:38:22
最后一个链接不再有效。
2021-03-19 10:38:22
我不喜欢工厂示例,因为它与服务相同(虽然有效)。工厂可以返回函数,但两者在概念上的区别应该是关于变量——服务就像类(新 = 空对象)和工厂就像对象(= 静态数据/值)。
2021-04-03 10:38:22
是我一个人还是服务似乎毫无意义?
2021-04-09 10:38:22
因此,作为使用“服务”在两个控制器之间进行通信以更新影响两个独立控制器的单个变量的人,服务是正确的方式吗?
2021-04-09 10:38:22

Factory并且Service只是一个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'
  }
}

服务

服务不需要返回任何东西。但是您必须将所有内容都分配给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.

IMPORTANT: Factory 和 Service 的返回结果将被缓存,所有控制器都将返回相同的结果。

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

Factory在所有情况下都是最可取的。当您有constructor需要在不同控制器中实例化的功能时,可以使用它

Service是一种Singleton对象。从服务返回的对象对于所有控制器都是相同的。当您希望整个应用程序具有单个对象时,可以使用它。例如:经过身份验证的用户详细信息。

如需进一步了解,请阅读

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

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

更新了何时需要使用它们的答案。
2021-03-25 10:38:22
由于工厂允许您返回对象,因此您可以控制公开的内容,这意味着您可以在工厂中拥有私有方法。对于服务,整个对象都是公开的。
2021-03-26 10:38:22
那你为什么要选择一个呢?你能给我一个工厂可以做而服务不能做的事情的可靠例子吗?我仍然不太明白其中的区别。
2021-03-30 10:38:22
服务和工厂都是单身。
2021-04-02 10:38:22
@eet,在服务中我们也可以有私有方法。您分配给this对象的任何内容都将公开。其他功能是私有的。服务只是减少自己创建对象。
2021-04-09 10:38:22
  • 如果您使用服务,您将获得一个函数的实例(“this”关键字)。
  • 如果您使用工厂,您将通过调用函数引用(工厂中的 return 语句)获得返回的值

工厂和服务是最常用的配方。它们之间的唯一区别是 Service recipe 更适合自定义类型的对象,而 Factory 可以生成 JavaScript 原语和函数。

参考

我真的不明白这是什么意思。你能给我举个例子,说明你可以用工厂做些什么,但不能用服务做,反之亦然?
2021-04-04 10:38:22

$提供服务

它们在技术上是一回事,实际上是使用服务provider功能的不同表示法$provide

  • 如果您使用的是类:您可以使用服务符号。
  • 如果您使用的是对象:您可以使用工厂表示法。

唯一的区别servicefactory 符号是服务是新-ED和工厂不。但对于其他一切,它们的外观气味行为都相同。同样,它只是$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);