AngularJS：工厂和服务？

汪弘盛

2023-03-14

问题内容：

编辑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
，这就是为什么在设置工厂时需要返回一个对象的原因（请参阅问题中的示例）。

但是，您可以使用与建立工厂完全相同的方式来设置服务（IE使它返回对象）， 并且服务的行为与工厂完全相同

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

下面的原始问题。

我知道这已经被要求很多次，但是我真的看不到工厂和服务之间的功能差异。我已经阅读了本教程：http ://blogs.clevertech.biz/startupblog/angularjs-factory-service-provider

它似乎给出了一个很好的解释，但是，我将我的应用设置如下：

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时，我会看到“加入黑暗的卢克”，太棒了。完全符合预期。但是，如果我将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 完全相同
。那么两者之间真正的功能区别是什么？

问题答案：

服务与工厂

在此处输入图片说明

工厂和服务之间的区别就像功能和对象之间的区别一样

工厂供应商

给我们函数的返回值，即。您只需创建一个对象，向其添加属性，然后返回相同的对象。将该服务传递到控制器中后，该对象上的那些属性现在将在工厂中的该控制器中可用。（假设情景）
单例且仅创建一次
可重复使用的组件
工厂是在控制器之间进行通信（例如共享数据）的一种好方法。
可以使用其他依赖
通常在服务实例需要复杂的创建逻辑时使用
无法注入.config()功能。
用于不可配置的服务
如果使用的是对象，则可以使用工厂提供程序。
句法： module.factory('factoryName', function);

服务提供者

给我们一个函数（对象）的实例-您刚刚使用’new’关键字实例化了，您将在’this’中添加属性，该服务将返回’this’。当您将该服务传递给控制器时，这些属性现在可以通过您的服务在该控制器上使用“ this”上的内容。（假设情景）
单例且仅创建一次
可重复使用的组件
服务用于控制器之间的通信以共享数据
您可以使用this关键字将属性和功能添加到服务对象
依赖项作为构造函数参数注入
用于简单的创建逻辑
无法注入.config()功能。
如果您使用的是课程，则可以使用服务提供商
句法： module.service(‘serviceName’, function);

样本演示

在下面的示例中，我定义了MyService和MyFactory。请注意，.service我如何使用this.methodname.In
创建服务方法，.factory并创建了一个工厂对象并为其分配了方法。

AngularJS。服务

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：工厂和服务？

服务与工厂

相关阅读

相关文章

相关问答

相关工具

相关文档

AngularJS：工厂和服务？

服务 与 工厂

相关阅读

相关文章

相关问答

相关工具

相关文档

服务与工厂