对服务与工厂感到困惑

Question

据我了解，当在工厂内部时，我返回一个被注入控制器的对象。 在服务内部时，我使用this处理对象而不返回任何内容。

我假设服务总是单例 ，并且每个控制器都会注入一个新的工厂对象 。 然而，事实证明，工厂对象也是单身人士？

用于演示的示例代码：

var factories = angular.module('app.factories', []);
var app = angular.module('app',  ['ngResource', 'app.factories']);

factories.factory('User', function () {
  return {
    first: 'John',
    last: 'Doe'
  };
});

app.controller('ACtrl', function($scope, User) {
  $scope.user = User;
});

app.controller('BCtrl', function($scope, User) {
  $scope.user = User;
});

当改变user.first在ACtrl事实证明， user.first在BCtrl也发生了变化，例如， User是单身？

我的假设是在一个带有工厂的控制器中注入了一个新实例？

Answer 1

所有角度服务都是单身人士 ：

文档（请参阅单项服务 ）： https ： //docs.angularjs.org/guide/services

最后，重要的是要意识到所有Angular服务都是应用程序单例。 这意味着每个注入器只有一个给定服务的实例。

基本上服务和工厂之间的区别如下：

app.service('myService', function() {

  // service is just a constructor function
  // that will be called with 'new'

  this.sayHello = function(name) {
     return "Hi " + name + "!";
  };
});

app.factory('myFactory', function() {

  // factory returns an object
  // you can run some code before

  return {
    sayHello : function(name) {
      return "Hi " + name + "!";
    }
  }
});

查看有关$ offer的演示文稿： http ： //slides.wesalvaro.com/20121113/#/

这些幻灯片用于AngularJs的一次聚会： http ： //blog.angularjs.org/2012/11/more-angularjs-meetup-videos.html

Answer 2

对我而言，当我意识到它们都以相同的方式工作时，就会产生启示：通过运行一次 ，存储它们获得的值，然后在通过依赖注入引用时咳嗽相同的存储值 。

说我们有：

app.factory('a', fn);
app.service('b', fn);
app.provider('c', fn);

三者之间的区别在于：

1. a的存储值来自运行fn ，换句话说： fn()
2. b的存储值来自new ing fn ，换句话说： new fn()
3. c的存储值来自首先通过new ing fn获取实例，然后运行实例的$get方法

这意味着，有一些类似于角度内的缓存对象，每次注入的值只分配一次，当它们第一次注入时，其中：

cache.a = fn()
cache.b = new fn()
cache.c = (new fn()).$get()

这就是为什么我们在服务中使用this ，并定义一个this.$get in providers。

希望这可以帮助。

Answer 3

实例

“你好世界”的例子

与factory / service / provider ：

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

//service style, probably the simplest one
myApp.service('helloWorldFromService', function() {
    this.sayHello = function() {
        return "Hello, World!"
    };
});

//factory style, more involved but more sophisticated
myApp.factory('helloWorldFromFactory', function() {
    return {
        sayHello: function() {
            return "Hello, World!"
        }
    };
});

//provider style, full blown, configurable version     
myApp.provider('helloWorld', function() {
    // In the provider function, you cannot inject any
    // service or factory. This can only be done at the
    // "$get" method.

    this.name = 'Default';

    this.$get = function() {
        var name = this.name;
        return {
            sayHello: function() {
                return "Hello, " + name + "!"
            }
        }
    };

    this.setName = function(name) {
        this.name = name;
    };
});

//hey, we can configure a provider!            
myApp.config(function(helloWorldProvider){
    helloWorldProvider.setName('World');
});


function MyCtrl($scope, helloWorld, helloWorldFromFactory, helloWorldFromService) {

    $scope.hellos = [
        helloWorld.sayHello(),
        helloWorldFromFactory.sayHello(),
        helloWorldFromService.sayHello()];
}​

Answer 4

还有一种方法可以返回构造函数，以便您可以在工厂中返回新的类，如下所示：

function MyObjectWithParam($rootScope, name) {
  this.$rootScope = $rootScope;
  this.name = name;
}
MyObjectWithParam.prototype.getText = function () {
  return this.name;
};

App.factory('MyObjectWithParam', function ($injector) {
  return function(name) { 
    return $injector.instantiate(MyObjectWithParam,{ name: name });
  };
}); 

所以你可以在一个使用MyObjectWithParam的控制器中做到这一点：

var obj = new MyObjectWithParam("hello"),

在这里看到完整的例子：
http://plnkr.co/edit/GKnhIN?p=preview

在这里谷歌小组页面，讨论的地方：
https://groups.google.com/forum/#!msg/angular/56sdORWEoqg/b8hdPskxZXsJ

Answer 5

以下是主要差异：

服务

语法： module.service( 'serviceName', function );

结果：将serviceName声明为injectable参数时，将向您提供传递给module.service 的函数的实例 。

用法：通过简单地向注入的函数引用附加（）来共享对调用有用的实用程序函数非常有用。 也可以使用injectedArg.call( this )或类似的方式运行。

工厂

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

结果：当将factoryName声明为injectable参数时，将通过调用传递给module.factory 的函数引用来提供返回的值 。

用法：用于返回一个'class'函数，然后可以用来创建实例。

还要检查AngularJS文档和stackoverflow上关于服务与工厂混淆的类似问题。

这是使用服务和工厂的示例 。 阅读更多关于AngularJS服务与工厂的信息 。

Answer 6

添加到第一个答案，我认为.service（）适用于以更面向对象的方式编写代码的人（C＃/ Java）（使用此关键字并通过prototype / Constructor函数实例化对象）。

工厂适用于编写代码的开发人员，这些代码对于javascript /功能编码风格更为自然。

看看angular.js里面的.service和.factory方法的源代码 - 在内部它们都调用了provider方法：

  function provider(name, provider_) {
    if (isFunction(provider_)) {
      provider_ = providerInjector.instantiate(provider_);
    }
    if (!provider_.$get) {
      throw Error('Provider ' + name + ' must define $get factory method.');
    }
    return providerCache[name + providerSuffix] = provider_;
  }

  function factory(name, factoryFn) { \
    return provider(name, { $get: factoryFn }); 
  }

  function service(name, constructor) {
    return factory(name, ['$injector', function($injector) {
      return $injector.instantiate(constructor);
    }]);
  }

Answer 7

非常简单：

.service - 注册函数将作为构造函数调用（又名'newed'）

.factory - 注册函数将被调用为一个简单的函数

两次都被调用，导致单个对象被注入到应用程序的其他组件中。

Answer 8

所有提供商的工作方式相同。 service ， factory ， provider的不同方法只是让你在更少的代码中完成同样的事情。

PS还有value和constant 。

从提供provider开始并以value结束的链中的每个特殊情况都有一个附加限制。 因此，要在它们之间做出决定，你必须问问自己哪些让你用更少的代码完成你想要的东西。

这是一张图片，告诉你我的意思：

你可以在博客文章中找到细分和参考指南，我得到了这张图片：

http://www.simplygoodcode.com/2015/11/the-difference-between-service-provider-and-factory-in-angularjs/

Answer 9

以下是服务与工厂的更多示例，这些示例可能有助于了解它们之间的差异。 基本上，一个服务有“新...”调用它，它已经被实例化。 工厂不会自动实例化。

基本的例子

返回一个具有单个方法的类对象

这是一个具有单一方法的服务：

angular.service('Hello', function () {
  this.sayHello = function () { /* ... */ };
});

这是一个使用方法返回对象的工厂：

angular.factory('ClassFactory', function () {
  return {
    sayHello: function () { /* ... */ }
  };
});

返回一个值

返回数字列表的工厂：

angular.factory('NumberListFactory', function () {
  return [1, 2, 3, 4, 5];
});

console.log(NumberListFactory);

返回数字列表的服务：

angular.service('NumberLister', function () {
  this.numbers = [1, 2, 3, 4, 5];
});

console.log(NumberLister.numbers);

两种情况下的输出都是相同的，即数字列表。

高级示例

使用工厂的“类”变量

在这个例子中，我们定义了一个CounterFactory，它递增或递减一个计数器，你可以获得当前计数或获得已创建的CounterFactory对象的数量：

angular.factory('CounterFactory', function () {
  var number_of_counter_factories = 0; // class variable

  return function () {
    var count = 0; // instance variable
    number_of_counter_factories += 1; // increment the class variable

    // this method accesses the class variable
    this.getNumberOfCounterFactories = function () {
      return number_of_counter_factories;
    };

    this.inc = function () {
      count += 1;
    };
    this.dec = function () {
      count -= 1;
    };
    this.getCount = function () {
      return count;
    };
  }

})

我们使用CounterFactory创建多个计数器。 我们可以访问类变量来查看创建了多少个计数器：

var people_counter;
var places_counter;

people_counter = new CounterFactory();
console.log('people', people_counter.getCount());
people_counter.inc();
console.log('people', people_counter.getCount());

console.log('counters', people_counter.getNumberOfCounterFactories());

places_counter = new CounterFactory();
console.log('places', places_counter.getCount());

console.log('counters', people_counter.getNumberOfCounterFactories());
console.log('counters', places_counter.getNumberOfCounterFactories());

此代码的输出是：

people 0
people 1
counters 1
places 0
counters 2
counters 2

Answer 10

“工厂”和“服务”是角度进行DI（依赖注入）的不同方式。

因此，当我们使用“服务”定义DI时，如下面的代码所示。 这将创建“Logger”对象的新GLOBAL实例，并将其注入函数。

app.service("Logger", Logger); // Injects a global object

使用“工厂”定义DI时，它不会创建实例。 它只是传递方法，后来消费者在内部必须为工厂调用对象实例。

app.factory("Customerfactory", CreateCustomer);

下面是一个简单的图像，直观地显示了“服务”的DI过程与“工厂”的不同之处。

当我们想要根据场景创建不同类型的对象时，应该使用工厂。 例如，取决于我们想要创建简单“客户”对象的场景，或者具有“地址”对象的“客户”或具有“电话”对象的“客户”。 以下是本段的详细说明

应该使用服务当我们注入实用程序或共享函数时，如Utility，Logger，Error handler等。

Answer 11

服务风格:( 可能是最简单的一种 ）返回实际函数：用于共享实用函数，通过简单地将（）附加到注入的函数引用来调用它。

AngularJS中的服务是一个单独的JavaScript对象，它包含一组函数

var myModule = angular.module("myModule", []);

myModule.value  ("myValue"  , "12345");

function MyService(myValue) {
    this.doIt = function() {
        console.log("done: " + myValue;
    }
}

myModule.service("myService", MyService);
myModule.controller("MyController", function($scope, myService) {

    myService.doIt();

});

工厂风格:( 更多涉及但更复杂 ）返回函数的返回值：在java中实例化一个像新的Object（）这样的对象。

工厂是一个创造价值的功能。 当服务，控制器等需要从工厂注入的值时，工厂按需创建值。 一旦创建，该值将重用于需要注入的所有服务，控制器等。

var myModule = angular.module("myModule", []);

myModule.value("numberValue", 999);

myModule.factory("myFactory", function(numberValue) {
    return "a value: " + numberValue;
})  
myModule.controller("MyController", function($scope, myFactory) {

    console.log(myFactory);

});

提供者样式:( 完整的，可配置的版本 ）返回函数的$ get函数的输出：Configurable。

AngularJS中的提供商是您可以创建的最灵活的工厂形式。 除了使用provider（）函数之外，您可以像使用服务或工厂一样向模块注册提供程序。

var myModule = angular.module("myModule", []);

myModule.provider("mySecondService", function() {
    var provider = {};
    var config   = { configParam : "default" };

    provider.doConfig = function(configParam) {
        config.configParam = configParam;
    }

    provider.$get = function() {
        var service = {};

        service.doService = function() {
            console.log("mySecondService: " + config.configParam);
        }

        return service;
    }

    return provider;
});

myModule.config( function( mySecondServiceProvider ) {
    mySecondServiceProvider.doConfig("new config param");
});

myModule.controller("MyController", function($scope, mySecondService) {

    $scope.whenButtonClicked = function() {
        mySecondService.doIt();
    }

});

src jenkov

 <!DOCTYPE html> <html ng-app="app"> <head> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.1/angular.min.js"></script> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body ng-controller="MyCtrl"> {{serviceOutput}} <br/><br/> {{factoryOutput}} <br/><br/> {{providerOutput}} <script> var app = angular.module( 'app', [] ); var MyFunc = function() { this.name = "default name"; this.$get = function() { this.name = "new name" return "Hello from MyFunc.$get(). this.name = " + this.name; }; return "Hello from MyFunc(). this.name = " + this.name; }; // returns the actual function app.service( 'myService', MyFunc ); // returns the function's return value app.factory( 'myFactory', MyFunc ); // returns the output of the function's $get function app.provider( 'myProv', MyFunc ); function MyCtrl( $scope, myService, myFactory, myProv ) { $scope.serviceOutput = "myService = " + myService; $scope.factoryOutput = "myFactory = " + myFactory; $scope.providerOutput = "myProvider = " + myProv; } </script> </body> </html> 

jsbin

 <!DOCTYPE html> <html ng-app="myApp"> <head> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.1/angular.min.js"></script> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <div ng-controller="MyCtrl"> {{hellos}} </div> <script> var myApp = angular.module('myApp', []); //service style, probably the simplest one myApp.service('helloWorldFromService', function() { this.sayHello = function() { return "Hello, World!" }; }); //factory style, more involved but more sophisticated myApp.factory('helloWorldFromFactory', function() { return { sayHello: function() { return "Hello, World!" } }; }); //provider style, full blown, configurable version myApp.provider('helloWorld', function() { this.name = 'Default'; this.$get = function() { var name = this.name; return { sayHello: function() { return "Hello, " + name + "!" } } }; this.setName = function(name) { this.name = name; }; }); //hey, we can configure a provider! myApp.config(function(helloWorldProvider){ helloWorldProvider.setName('World'); }); function MyCtrl($scope, helloWorld, helloWorldFromFactory, helloWorldFromService) { $scope.hellos = [ helloWorld.sayHello(), helloWorldFromFactory.sayHello(), helloWorldFromService.sayHello()]; } </script> </body> </html> 

的jsfiddle

Answer 12

基本区别在于提供程序允许将原始（非对象），数组或回调函数值设置为工厂声明的变量，因此如果返回对象，则必须显式声明并返回它。

另一方面， 服务只能用于将服务声明变量设置为对象，因此我们可以避免显式创建和返回对象，而另一方面它允许使用this关键字。

或简而言之，“ 提供者是一种更通用的形式，而服务仅限于对象”。

Answer 13

这就是我在设计模式方面理解它们之间的区别：

服务 ：返回一个类型，该类型将被新建以创建该类型的对象。 如果使用Java类比，则Service返回Java类定义 。

Factory ：返回可以立即使用的具体对象。 在Java Analogy中，Factory返回一个Java对象 。

经常使人（包括我自己）感到困惑的部分是，当您在代码中注入服务或工厂时，它们可以以相同的方式使用，在两种情况下您在代码中获得的内容都是您可以立即调用的具体对象。 这意味着在服务的情况下，角度代表您在服务声明上调用“新”。 我认为这是一个令人费解的概念。

Answer 14

这将是了解Service Vs Factory Vs Provider的最佳和简短的答案

来源 ： https ： //groups.google.com/forum/#! msg / angular/ 56sdORWEoqg / HuZsOsMvKv4J

这里什么奔说，与演示 http://jsbin.com/ohamub/1/edit?html,output

“代码中有评论说明了主要的差异，但我会在这里稍微扩展一下。作为一个说明，我只是想了解这一点，所以如果我说出任何错误，请告诉我。

服务

语法 ：module.service（'serviceName'，function）;

结果 ：将serviceName声明为injectable参数时，将提供传递给module.service的实际函数引用。

用法 ：通过简单地向注入的函数引用附加（）来共享对调用有用的实用程序函数非常有用。 也可以使用injectArg.call（this）或类似的方式运行。

工厂

语法 ：module.factory（'factoryName'，function）;

结果 ：当将factoryName声明为injectable参数时，将通过调用传递给module.factory的函数引用来提供返回的值。

用法 ：用于返回一个'class'函数，然后可以用来创建实例。

供应商

语法 ：module.provider（'providerName'，function）;

结果 ：当将providerName声明为injectable参数时，将通过调用传递给module.provider的函数引用的$ get方法来提供返回的值。

用法 ：对于返回一个'class'函数非常有用，该函数可以随后用于创建实例，但在注入之前需要某种配置。 对于可跨项目重用的类可能有用吗？ 这个还是有些朦胧。“本

Answer 15

我有一段时间的困惑，我正在努力在这里提供一个简单的解释。 希望这会有所帮助！

angular .factory和angular .service都用于初始化服务并以相同的方式工作。

唯一的区别是，您希望如何初始化您的服务。

两人都是单身人士

---

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

---

厂

app.factory（ <service name> ， <function with a return value> ）

如果要从具有返回值的函数初始化服务，则必须使用此factory方法。

例如

function myService() {
  //return what you want
  var service = {
    myfunc: function (param) { /* do stuff */ }
  }
  return service;
}

app.factory('myService', myService);

注入此服务时（例如，您的控制器）：

• Angular将调用您的给定函数（作为myService() ）来返回该对象
• 单例 - 仅调用一次，存储并传递相同的对象。

---

服务

app.service（ <service name> ， <constructor function> ）

如果要从构造函数初始化服务（使用this关键字），则必须使用此service方法。

例如

function myService() {
  this.myfunc: function (param) { /* do stuff */ }
}

app.service('myService', myService);

注入此服务时（例如，您的控制器）：

• Angular将new您的给定函数（作为new myService() ）以返回该对象
• 单例 - 仅调用一次，存储并传递相同的对象。

---

注：如果您使用factory与<constructor function>或service与<function with a return value> ，它不会工作。

---

示例 - DEMO

• 角度服务与工厂
• 角度服务与工厂（带路线）

Answer 16

这要归功于Pascal Precht的博客文章，这有助于我理解其中的差异。

服务是模块上的一种方法，它采用名称和定义服务的函数。 您可以在其他组件中注入和使用该特定服务，例如控制器，指令和过滤器。 工厂是模块上的方法，它还采用名称和函数来定义工厂。 我们也可以像使用服务一样注入和使用它。

用new创建的对象使用构造函数的prototype属性的值作为它们的原型，所以我找到了调用Object.create（）的Angular代码，我相信它是实例化时的服务构造函数。 但是，工厂函数实际上只是一个被调用的函数，这就是为什么我们必须返回工厂的对象文字。

这是我为工厂找到的角度1.5代码：

var needsRecurse = false;
    var destination = copyType(source);

    if (destination === undefined) {
      destination = isArray(source) ? [] : Object.create(getPrototypeOf(source));
      needsRecurse = true;
    }

factory（）函数的Angular源代码片段：

 function factory(name, factoryFn, enforce) {
    return provider(name, {
      $get: enforce !== false ? enforceReturnValue(name, factoryFn) : factoryFn
    });
  }

它接受传递的名称和工厂函数，并返回一个具有相同名称的提供程序，它具有$ get方法，这是我们的工厂函数。 每当您向注入器询问特定的依赖项时，它通常通过调用$ get（）方法向相应的提供程序询问该服务的实例。 这就是创建提供者时需要$ get（）的原因。

这是用于服务的1.5角度代码。

function service(name, constructor) {
    return factory(name, ['$injector', function($injector) {
      return $injector.instantiate(constructor);
    }]);
  }

事实证明，当我们调用service（）时，它实际上调用了factory（）！ 但是，它不仅仅将我们的服务构造函数传递给工厂。 它还传递一个函数，该函数要求注入器通过给定的构造函数实例化对象。

换句话说，如果我们在某处注入MyService，代码中会发生以下情况：

MyServiceProvider.$get(); // return the instance of the service

要重新进行重新设置，服务会调用工厂，这是相应提供程序上的$ get（）方法。 而且，$ injector.instantiate（）是最终使用构造函数调用Object.create（）的方法。 这就是我们在服务中使用“this”的原因。

对于ES5，无论我们使用哪个：service（）或factory（），它总是被调用的工厂，它为我们的服务创建一个提供者。

尽管如此，你也可以对服务做同样的事情。 服务是构造函数，但是，它不会阻止我们返回对象文字。 因此，我们可以使用我们的服务代码并以一种基本上与我们的工厂完全相同的方式编写它，或者换句话说，您可以将服务编写为工厂以返回对象。

为什么大多数人建议使用工厂而非服务？ 这是我见过的最好的答案，它来自Pawel Kozlowski的书：使用AngularJS掌握Web应用程序开发。

工厂方法是将对象引入AngularJS依赖注入系统的最常用方法。 它非常灵活，可以包含复杂的创建逻辑。 由于工厂是常规功能，我们还可以利用新的词法范围来模拟“私有”变量。 这非常有用，因为我们可以隐藏给定服务的实现细节。“

Answer 17

• 随着这家工厂实际上你在工厂内创建一个对象，并将其返回。
• 使用该服务，您只需使用this关键字来定义函数的标准函数。
• 使用提供程序 ，您可以定义$get ，它可用于获取返回数据的对象。

Answer 18

在AngularJS中有三种处理业务逻辑的方法:( 受Yaakov的Coursera AngularJS课程的启发 ）：

1. 服务
2. 厂
3. 提供商

在这里，我们只谈谈服务与工厂

服务 ：

句法：

app.js

 var app = angular.module('ServiceExample',[]);
 var serviceExampleController =
              app.controller('ServiceExampleController', ServiceExampleController);
 var serviceExample = app.service('NameOfTheService', NameOfTheService);

 ServiceExampleController.$inject = ['NameOfTheService'] //very important as this protects from minification of js files

function ServiceExampleController(NameOfTheService){
     serviceExampleController = this;
     serviceExampleController.data = NameOfTheService.getSomeData();
 }

function NameOfTheService(){
     nameOfTheService = this;
     nameOfTheService.data = "Some Data";
     nameOfTheService.getSomeData = function(){
           return nameOfTheService.data;
     }     
}

的index.html

<div ng-controller = "ServiceExampleController as serviceExample">
   {{serviceExample.data}}
</div>

服务的主要特点：

1. Lazily Instantiated ：如果没有注入服务，它将不会被实例化。 因此，要使用它，您必须将其注入模块。

2. 单例 ：如果将它注入多个模块，则所有模块都只能访问一个特定实例。 这就是为什么在不同控制器之间共享数据非常方便。

厂

现在让我们来谈谈AngularJS中的工厂

首先让我们来看看语法 ：

app.js ：

var app = angular.module('FactoryExample',[]);
var factoryController = app.controller('FactoryController', FactoryController);
var factoryExampleOne = app.factory('NameOfTheFactoryOne', NameOfTheFactoryOne);
var factoryExampleTwo = app.factory('NameOfTheFactoryTwo', NameOfTheFactoryTwo);

//first implementation where it returns a function
function NameOfTheFactoryOne(){
   var factory = function(){
      return new SomeService();
    }
   return factory;
}

//second implementation where an object literal would be returned
function NameOfTheFactoryTwo(){
   var factory = {
      getSomeService : function(){
          return new SomeService();
       }
    };
   return factory;
}

现在在控制器中使用以上两个：

 var factoryOne = NameOfTheFactoryOne() //since it returns a function
 factoryOne.someMethod();

 var factoryTwo = NameOfTheFactoryTwo.getSomeService(); //accessing the object
 factoryTwo.someMethod();

工厂特点：

1. 这种类型的服务遵循工厂设计模式 。 可以将工厂视为创建新对象或方法的中心位置。

2. 这不仅可以生成单例，还可以生成可定制的服务。

3. .service()方法是一个始终生成相同类型服务的工厂 ，它是一个单例。 没有简单的方法来配置它的行为。 该.service()方法通常用作不需要任何配置的快捷方式。

Answer 19

有关简短的解释，请参阅https://stackoverflow.com/a/26924234/5811973 。

有关详细说明，请参阅https://stackoverflow.com/a/15666049/5811973 。

也来自angularJs文档：

Answer 20

你可以理解这个类比的区别 - 考虑一个将返回一些值的普通函数和将使用new keyword实例化的构造函数之间的区别。所以创建工厂就像创建将返回一些值的原始函数（原始或一个对象）而创建服务就像创建构造函数（OO类），我们可以使用new关键字创建实例。 唯一需要注意的是，当我们使用Service方法创建服务时，它将使用AngularJS支持的依赖注入机制自动创建它的实例