EDIT Jan 2016:因为这仍然引起关注.自从提出这个问题以来,我已经完成了几个AngularJS项目,对于那些我主要使用factory个的项目,我构建了一个对象,并在最后返回了该对象.然而,我下面的陈述仍然是正确的.

EDIT :我想我终于明白了两者之间的主要区别,我有一个代码示例要演示.我也认为这个问题与拟议的重复问题不同.副本显示服务不可实例化,但如果您按照我下面演示的方式设置它,它实际上是可实例化的.可以将服务设置为与工厂完全相同.我还将提供代码,显示工厂故障转移服务的位置,这似乎没有其他答案可以做到.

如果我这样设置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.但是,如果我将VaderService更改为module,请发言.工厂,the code in the controller will no longer work,这是主要的区别.对于factory,注入控制器的VaderService是not实例化的,这就是为什么在设置factory时需要返回一个对象(参见问题中的示例).

但是,您可以使用与设置工厂(即让其返回对象)和the service behaves the exact same as a factory完全相同的方式来设置服务

有了这些信息,我明白了no个使用工厂而不是服务的理由,服务可以做工厂能做的一切,甚至更多.

下面是原始问题.


我知道这已经被问了很多次了,但我真的看不出工厂和服务之间有什么功能上的区别.我读过这个教程: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;
});

Then when I load up 指数html I see "Join the dark side luke", great. Exactly as expected. However if I change VaderService.js to this (note module.service instead of 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;
});

Then reload 指数html (I made sure I emptied the cache and did a hard reload). It works exactly the same as it did with module.factory. So what is the real functional difference between the two??

推荐答案

Service vs Factory


enter image description here enter image description here

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

Factory Provider

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

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

  • 可再用元件

  • 工厂是控制器之间交流的好方法,比如共享数据.

  • 可以使用其他依赖项

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

  • 无法在.config()函数中注入.

  • 用于不可配置的服务

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

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

Service Provider

  • 给我们一个函数(对象)的实例——你只是用"new"关键字实例化了,你将向"this"添加属性,服务将返回"this".当您将服务传递到控制器中时,"this"上的那些属性现在将通过您的服务在该控制器上可用.(假设情景)

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

  • 可再用元件

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

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

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

  • 用于简单的创建逻辑

  • 无法在.config()函数中注入.

  • 如果您使用的是类,则可以使用服务Provider

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

100

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

再看看这些漂亮的东西

100

AngularJS Factory, Service and Provider

Angular.js: service vs provider vs factory?

Javascript相关问答推荐

React native在不首次加载时渲染的挂钩比上一次渲染期间渲染的挂钩更多

获取最接近的父项(即自定义元素)

Fastify错误:CORS策略已阻止从起源api-dev.example.com上的MLhttp请求

仅在React和JS中生成深色

如何判断属于多个元素的属性是否具有多个值之一

Vue:ref不会创建react 性属性

TypeScript索引签名模板限制

引用在HTMLAttributes<;HTMLDivElement>;中不可用

如何从URL获取令牌?

可更改语言的搜索栏

覆盖加载器页面避免对页面上的元素进行操作

OpenAI转录API错误请求

如何在DYGRAPS中更改鼠标事件和键盘输入

为什么我的按钮没有从&q;1更改为&q;X&q;?

在不删除代码的情况下禁用Java弹出功能WordPress

如何在HTMX提示符中设置默认值?

按什么顺序接收`storage`事件?

匹配一个或多个可选重复的特定模式

如何用javascript更改元素的宽度和高度?

JAVASCRIPT SWITCH CASE语句:当表达式为';ALL';