AngularJS:工厂和服务?[重复]

2020/10/14 11:01 · javascript ·  · 0评论

编辑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,则控制器中的代码将不再起作用,这是主要区别。使用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);

样本演示

在下面的示例中,我定义了MyServiceMyFactory请注意,.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工厂,服务和提供者

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

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/

  • 如果使用服务,您将获得一个函数实例(“ this”关键字)。
  • 如果使用工厂,则将通过调用函数引用(工厂中的return语句)获得返回的值。

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

参考

提供服务

从技术上讲,它们是同一件事,实际上是使用服务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);
本文地址:http://javascript.askforanswer.com/angularjsgongchanghefuwuzhongfu.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!