AngularJS:工厂和保养? [英] AngularJS : Factory and Service?

查看:251
本文介绍了AngularJS:工厂和保养?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

修改2016年1月:因为这仍然备受关注。既然问这个我已经完成了几个项目AngularJS,并为那些我大多用工厂,建立了一个对象,并在年底返回的对象。我下面的语句是仍然如此,但是。

EDIT Jan 2016: Since this still gets attention. Since asking this I've completed a few AngularJS projects, and for those I mostly used factory, built up an object and returned the object at the end. My statements below are still true, however.

编辑:我想,我终于明白了两者之间的主要区别,我有一个code例子来演示。我也在想这个问题是所提出的重复不同。重复的说,服务不是实例化的,但如果你将其设置为我下面演示,它实际上是。服务可以被设置为是完全一样的工厂。我也将提供code,其中显示出工厂故障转移服务,这是任何其他的答案似乎做的。

EDIT : I think I finally understand the main difference between the two, and I have a code example to demonstrate. I also think this question is different to the proposed duplicate. The duplicate says that service is not instantiable, but if you set it up as I demonstrated below, it actually is. A service can be set up to be exactly the same as a factory. I will also provide code that shows where factory fails over service, which no other answer seems to do.

如果我设置VaderService像这样(即服务):

If I set up VaderService like so (ie as a service):

var module = angular.module('MyApp.services', []);

module.service('VaderService', function() {
    this.speak = function (name) {
        return 'Join the dark side ' + name;
    }
});

然后在我的控制,我可以做到这一点:

Then in my controller I can do this:

module.controller('StarWarsController', function($scope, VaderService) {
    $scope.luke = VaderService.speak('luke');   
});

使用的服务,VaderService注入到控制器被实例化,所以我可以叫VaderService.speak,但是,如果我更改了VaderService到module.factory,的在控制器中的code将无再工作的,这是主要的区别。随着工厂,VaderService注入到控制器的的实例,这就是为什么你需要返回一个对象建立一家工厂(见我在这个问题的例子)。

With service, the VaderService injected in to the controller is instantiated, so I can just call VaderService.speak, however, if I change the VaderService to module.factory, the code in the controller will no longer work, and this is the main difference. With factory, the VaderService injected in to the controller is not instantiated, which is why you need to return an object when setting up a factory (see my example in the question).

不过,您可以设置在完全相同的方式服务,你可以设立一个工厂(IE有它返回一个对象)和服务行为完全相同的工厂

However, you can set up a service in the exact same way as you can set up a factory (IE have it return an object) and the service behaves the exact same as a factory

,我看到的没有的理由使用工厂对服务,服务能够做的一切工厂可以和更多的。

Given this information, I see no reason to use factory over service, service can do everything factory can and more.

下面原来的问题。

我知道这已被要求多次加载,但我实在看不出工厂和服务之间的功能差异。我读过这个教程:<一href=\"http://blogs.clevertech.biz/startupblog/angularjs-factory-service-provider\">http://blogs.clevertech.biz/startupblog/angularjs-factory-service-provider

I know this has been asked loads of times, but I really cannot see any functional difference between factories and services. I had read this tutorial: http://blogs.clevertech.biz/startupblog/angularjs-factory-service-provider

和它似乎给一个合理的很好的解释,但是,我建立了我的应用程序如下:

And it seems to give a reasonably good explanation, however, I set up my app as follows:

index.html的

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:

app.js:

angular.module('MyApp', [
  'MyApp.services',
  'MyApp.controllers'
]);

controllers.js:

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

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):

Then when I load up index.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;
});

然后重新装入index.html的(我确信我清空缓存并做了硬性重新加载)。它的工作原理的究竟的,因为它与module.factory也如法炮制。那么究竟是什么这两个??

Then reload index.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


工厂和服务之间的差别是,就像一个功能和一个目的

The difference between factory and service is just like the difference between a function and an object

厂提供


  • 为我们提供了函数的返回值,即。你只要创建一个对象,属性添加到它,那么物体而你通过这个服务为您的控制器返回相同的对象上的这些属性现在将通过您的工厂控制器可用。 (假设的情况)

  • Gives us the function's return value ie. You just create an object, add properties to it, then return that same object.When you pass this service into your controller, those properties on the object will now be available in that controller through your factory. (Hypothetical Scenario)

辛格尔顿,只会创​​建一次

Singleton and will only be created once

可重用的组件

厂是像共享数据控制器之间通信的好方法。

Factory are a great way for communicating between controllers like sharing data.

可以使用其他依赖

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

Usually used when the service instance requires complex creation logic

不能在的.config注入()功能。

用于非配置服务

如果你使用一个对象,你可以使用工厂提供。

If you're using an object, you could use the factory provider.

语法: module.factory('factoryName',功能);

服务提供商


  • 给了我们一个函数的实例(对象) - 你只需实例化与新的关键字,你会以这个'添加属性和服务将返回this'.When传递服务到控制器中,对这些属性'这个'现在将可以通过您的服务,控制器上。 (假设的情况)

  • Gives us the instance of a function (object)- You just instantiated with the ‘new’ keyword and you’ll add properties to ‘this’ and the service will return ‘this’.When you pass the service into your controller, those properties on ‘this’ will now be available on that controller through your service. (Hypothetical Scenario)

辛格尔顿,只会创​​建一次

Singleton and will only be created once

可重用的组件

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

Services are used for communication between controllers to share data

您可以通过添加属性和功能,服务对象的这个关键字

You can add properties and functions to a service object by using the this keyword

依赖注入的构造函数的参数

Dependencies are injected as constructor arguments

用于简单的创建逻辑

不能在的.config注入()功能。

如果您使用的是类,你可以使用服务提供商

If you're using a class you could use the service provider

语法: module.service(服务名,功能);

样品展示

Sample Demo

在下面的例子中我已经定义为MyService MyFactory 。注意如何。服务我使用创建的服务方法 this.methodname。。工厂我创建了一个工厂对象和分配的方法吧。

In below example I have define MyService and MyFactory. Note how in .service I have created the service methods using this.methodname. In .factory I have created a factory object and assigned the methods to it.

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;
});


此外,在这个美丽的东西看看


Also Take a look at this beautiful stuffs

困惑服务VS工厂

Confused about service vs factory

AngularJS厂,服务和供应商

<一个href=\"http://stackoverflow.com/questions/15666048/angular-js-service-vs-provider-vs-factory\">Angular.js:服务提供商VS VS工厂?

这篇关于AngularJS:工厂和保养?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆