线索就在名字里

服务和工厂彼此相似。两者都将产生一个可以注入到其他对象中的单例对象，因此通常可以互换使用。

它们旨在从语义上用于实现不同的设计模式。

服务用于实现服务模式

服务模式是将应用程序分解为逻辑一致的功能单元的模式。例如API访问器或一组业务逻辑。

这在Angular中尤其重要，因为Angular模型通常只是从服务器上提取的JSON对象，所以我们需要一个地方来放置我们的业务逻辑。

这是一个Github服务的例子。它知道如何与Github对话。它知道url和方法。我们可以把它注入到控制器中，它会生成并返回一个承诺。

(function() {
  var base = "https://api.github.com";

  angular.module('github', [])
    .service('githubService', function( $http ) {
      this.getEvents: function() {
        var url = [
          base,
          '/events',
          '?callback=JSON_CALLBACK'
        ].join('');
        return $http.jsonp(url);
      }
    });
  )();

工厂实现工厂模式

另一方面，工厂旨在实现工厂模式。一种工厂模式，其中我们使用工厂函数来生成对象。通常我们会用它来建立模型。下面是一个返回Author构造函数的工厂:

angular.module('user', [])
  .factory('User', function($resource) {
    var url = 'http://simple-api.herokuapp.com/api/v1/authors/:id'
    return $resource(url);
  })

我们可以这样使用它:

angular.module('app', ['user'])
  .controller('authorController', function($scope, User) {
    $scope.user = new User();
  })

注意，工厂也返回单例对象。

工厂可以返回构造函数

因为工厂只是返回一个对象，所以它可以返回任何类型的对象，包括构造函数，如上所述。

工厂返回一个对象;服务是可更新的

另一个技术差异在于服务和工厂的组合方式。一个新的服务函数将生成对象。工厂函数将被调用并返回该对象。

服务是可更新的构造函数。 工厂被简单地调用并返回一个对象。

这意味着在服务中，我们将“This”附加到构造函数的上下文中，它将指向正在构造的对象。

为了说明这一点，下面是使用服务和工厂创建的相同的简单对象:

angular.module('app', [])
  .service('helloService', function() {
    this.sayHello = function() {
      return "Hello!";
    }
  })
  .factory('helloFactory', function() {
    return {
      sayHello: function() {
        return "Hello!";
      }
    }
  });

我花了一些时间试图弄清楚其中的区别。

我认为工厂函数使用模块模式，服务函数使用标准的java脚本构造函数模式。

这里所有的答案似乎都围绕着服务和工厂，这是有效的，因为这就是被问到的问题。但同样重要的是要记住，还有其他几个变量，包括provider()、value()和constant()。

关键是要记住，每一个都是另一个的特殊情况。每一种特殊情况都允许你用更少的代码做同样的事情。每一种都有一些额外的限制。

要决定什么时候使用哪个，你只需看看哪个允许你用更少的代码做你想做的事情。下面这张图说明了它们是多么相似:

对于一个完整的分步分解和快速参考何时使用每一个，你可以访问我得到这张图片的博客文章:

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

简单地说…

Const user = { 名字:“约翰” }; / /工厂 const addLastNameFactory = (user, lastName) => ({ 用户, 姓, })； console.log (addLastNameFactory(用户、“母鹿”)); / /服务 const addLastNameService = (user, lastName) => { 用户。lastName = lastName;/ /坏!突变 返回用户; }; console.log (addLastNameService(用户、“母鹿”));

博士TL; 1)当你使用Factory时，你创建一个对象，向它添加属性，然后返回相同的对象。当你将这个工厂传递给你的控制器时，对象上的那些属性现在将通过你的工厂在那个控制器中可用。

app.controller('myFactoryCtrl', function($scope, myFactory){
  $scope.artist = myFactory.getArtist();
});

app.factory('myFactory', function(){
  var _artist = 'Shakira';
  var service = {};

  service.getArtist = function(){
    return _artist;
  }

  return service;
});

2)当你在使用Service时，Angular会在幕后用' new '关键字实例化它。正因为如此，你将为' this '添加属性，服务将返回' this '。当你把服务传递给你的控制器时，“this”上的那些属性现在将通过你的服务在控制器上可用。

app.controller('myServiceCtrl', function($scope, myService){
  $scope.artist = myService.getArtist();
});

app.service('myService', function(){
  var _artist = 'Nelly';
  this.getArtist = function(){
    return _artist;
  }
});

不博士TL;

1)工厂 工厂是创建和配置服务的最流行的方式。实际上没有比TL和DR说的更多的东西了。你只需要创建一个对象，向其添加属性，然后返回相同的对象。然后当你把工厂传递给你的控制器时，对象上的那些属性现在将通过你的工厂在控制器中可用。下面是一个更广泛的示例。

app.factory('myFactory', function(){
  var service = {};
  return service;
});

现在，当我们将' myFactory '传递给控制器时，任何附加到' service '的属性都将可用。

现在让我们向回调函数中添加一些“私有”变量。这些不会直接从控制器访问，但我们最终将在' service '上设置一些getter/setter方法，以便在需要时能够更改这些'私有'变量。

app.factory('myFactory', function($http, $q){
  var service = {};
  var baseUrl = 'https://itunes.apple.com/search?term=';
  var _artist = '';
  var _finalUrl = '';

  var makeUrl = function(){
   _artist = _artist.split(' ').join('+');
    _finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK';
    return _finalUrl
  }

  return service;
});

在这里你会注意到我们没有将这些变量/函数附加到“service”。我们创建它们只是为了以后使用或修改它们。

baseUrl是iTunes API需要的基URL _artist是我们要查找的艺术家 _finalUrl是最终的完全构建的URL，我们将调用iTunes makeUrl是一个函数，它将创建并返回我们的 iTunes友好的URL。

现在我们的助手/私有变量和函数已经就绪，让我们向“service”对象添加一些属性。无论我们把什么放在' service '上，我们都能够直接在任何控制器中使用' myFactory '。

我们将创建setArtist和getArtist方法，简单地返回或设置艺术家。我们还将创建一个方法，用我们创建的URL调用iTunes API。这个方法将返回一个承诺，它将在数据从iTunes API返回后实现。如果你没有在Angular中使用承诺的经验，我强烈建议你深入研究一下。

下面的setArtist接受一个艺术家，并允许你设置艺术家。itunes首先调用makeUrl()来构建我们将用于$http请求的URL。然后它设置一个promise对象，用我们最终的url发出$http请求，然后因为$http返回了一个promise，所以我们能够在请求后调用.success或.error。然后我们用iTunes数据来解决我们的承诺，或者我们用“有一个错误”的消息来拒绝它。

app.factory('myFactory', function($http, $q){
  var service = {};
  var baseUrl = 'https://itunes.apple.com/search?term=';
  var _artist = '';
  var _finalUrl = '';

  var makeUrl = function(){
    _artist = _artist.split(' ').join('+');
    _finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
    return _finalUrl;
  }

  service.setArtist = function(artist){
    _artist = artist;
  }

  service.getArtist = function(){
    return _artist;
  }

  service.callItunes = function(){
    makeUrl();
    var deferred = $q.defer();
    $http({
      method: 'JSONP',
      url: _finalUrl
    }).success(function(data){
      deferred.resolve(data);
    }).error(function(){
      deferred.reject('There was an error')
    })
    return deferred.promise;
  }

  return service;
});

现在我们的工厂建成了。我们现在能够将' myFactory '注入到任何控制器中，然后我们将能够调用我们附加到服务对象的方法(setArtist, getArtist和callItunes)。

app.controller('myFactoryCtrl', function($scope, myFactory){
  $scope.data = {};
  $scope.updateArtist = function(){
    myFactory.setArtist($scope.data.artist);
  };

  $scope.submitArtist = function(){
    myFactory.callItunes()
      .then(function(data){
        $scope.data.artistData = data;
      }, function(data){
        alert(data);
      })
  }
});

In the controller above we’re injecting in the ‘myFactory’ service. We then set properties on our $scope object that are coming from data from ‘myFactory’. The only tricky code above is if you’ve never dealt with promises before. Because callItunes is returning a promise, we are able to use the .then() method and only set $scope.data.artistData once our promise is fulfilled with the iTunes data. You’ll notice our controller is very ‘thin’. All of our logic and persistent data is located in our service, not in our controller. 2) Service Perhaps the biggest thing to know when dealing with creating a Service is that that it’s instantiated with the ‘new’ keyword. For you JavaScript gurus this should give you a big hint into the nature of the code. For those of you with a limited background in JavaScript or for those who aren’t too familiar with what the ‘new’ keyword actually does, let’s review some JavaScript fundamentals that will eventually help us in understanding the nature of a Service.

为了真正看到使用' new '关键字调用函数时发生的变化，让我们创建一个函数并使用' new '关键字调用它，然后让我们展示解释器在看到' new '关键字时的操作。最终的结果是一样的。

首先，让我们创建构造函数。

var Person = function(name, age){
  this.name = name;
  this.age = age;
}

这是一个典型的JavaScript构造函数。现在，每当我们使用' new '关键字调用Person函数时，' this '将被绑定到新创建的对象。

现在让我们在Person的原型上添加一个方法，这样它就可以在Person '类'的每个实例上使用。

Person.prototype.sayName = function(){
  alert('My name is ' + this.name);
}

现在，因为我们将sayName函数放在原型上，所以Person的每个实例都能够调用sayName函数，以便提醒该实例的名称。

现在我们有了Person构造函数和sayName函数的原型，让我们实际创建一个Person的实例，然后调用sayName函数。

var tyler = new Person('Tyler', 23);
tyler.sayName(); //alerts 'My name is Tyler'

创建Person构造函数，向原型添加函数，创建Person实例，然后在原型上调用函数的所有代码都是这样的。

var Person = function(name, age){
  this.name = name;
  this.age = age;
}
Person.prototype.sayName = function(){
  alert('My name is ' + this.name);
}
var tyler = new Person('Tyler', 23);
tyler.sayName(); //alerts 'My name is Tyler'

Now let’s look at what actually is happening when you use the ‘new’ keyword in JavaScript. First thing you should notice is that after using ‘new’ in our example, we’re able to call a method (sayName) on ‘tyler’ just as if it were an object - that’s because it is. So first, we know that our Person constructor is returning an object, whether we can see that in the code or not. Second, we know that because our sayName function is located on the prototype and not directly on the Person instance, the object that the Person function is returning must be delegating to its prototype on failed lookups. In more simple terms, when we call tyler.sayName() the interpreter says “OK, I’m going to look on the ‘tyler’ object we just created, locate the sayName function, then call it. Wait a minute, I don’t see it here - all I see is name and age, let me check the prototype. Yup, looks like it’s on the prototype, let me call it.”.

下面的代码告诉你如何思考' new '关键字在JavaScript中的实际作用。它基本上是上述段落的一个代码示例。我把“解释器视图”或解释器在注释中查看代码的方式放在了注释中。

var Person = function(name, age){
  //The line below this creates an obj object that will delegate to the person's prototype on failed lookups.
  //var obj = Object.create(Person.prototype);

  //The line directly below this sets 'this' to the newly created object
  //this = obj;

  this.name = name;
  this.age = age;

  //return this;
}

现在，了解了JavaScript中' new '关键字的实际作用后，在Angular中创建服务应该更容易理解了。

在创建Service时，最重要的是要了解Service是用' new '关键字实例化的。将上述知识与我们上面的例子结合起来，你现在应该认识到，你将直接将你的属性和方法附加到' this '，然后从服务本身返回。让我们来看看实际情况。

与我们最初在Factory示例中所做的不同，我们不需要创建一个对象然后返回该对象，因为就像之前多次提到的那样，我们使用了' new '关键字，因此解释器将创建该对象，让它委托给它的原型，然后为我们返回它，而不需要我们做这些工作。

首先，让我们创建“private”和helper函数。这看起来很熟悉，因为我们在我们的工厂做了完全相同的事情。我不会解释每一行在这里做什么，因为我在工厂示例中做了，如果你感到困惑，请重新阅读工厂示例。

app.service('myService', function($http, $q){
  var baseUrl = 'https://itunes.apple.com/search?term=';
  var _artist = '';
  var _finalUrl = '';

  var makeUrl = function(){
    _artist = _artist.split(' ').join('+');
    _finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
    return _finalUrl;
  }
});

现在，我们将把控制器中所有可用的方法都附加到this上。

app.service('myService', function($http, $q){
  var baseUrl = 'https://itunes.apple.com/search?term=';
  var _artist = '';
  var _finalUrl = '';

  var makeUrl = function(){
    _artist = _artist.split(' ').join('+');
    _finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
    return _finalUrl;
  }

  this.setArtist = function(artist){
    _artist = artist;
  }

  this.getArtist = function(){
    return _artist;
  }

  this.callItunes = function(){
    makeUrl();
    var deferred = $q.defer();
    $http({
      method: 'JSONP',
      url: _finalUrl
    }).success(function(data){
      deferred.resolve(data);
    }).error(function(){
      deferred.reject('There was an error')
    })
    return deferred.promise;
  }

});

现在，就像在我们的工厂中一样，setArtist, getArtist和callItunes将在我们传递myService到的任何控制器中可用。这里是myService控制器(与我们的工厂控制器几乎完全相同)。

app.controller('myServiceCtrl', function($scope, myService){
  $scope.data = {};
  $scope.updateArtist = function(){
    myService.setArtist($scope.data.artist);
  };

  $scope.submitArtist = function(){
    myService.callItunes()
      .then(function(data){
        $scope.data.artistData = data;
      }, function(data){
        alert(data);
      })
  }
});

就像我之前提到的，一旦你真正理解了“new”的作用，服务就几乎等同于Angular中的工厂。

工厂模式更灵活，因为它可以返回函数和值以及对象。

恕我直言，在服务模式中没有太多意义，因为它所做的一切都可以通过工厂轻松完成。例外可能是:

如果您出于某种原因关心实例化服务的声明类型——如果您使用服务模式，则构造函数将是新服务的类型。 如果您已经有一个正在其他地方使用的构造函数，并且还想将其用作服务(尽管如果您想向其中注入任何东西，可能没有多大用处!)。

Arguably, the service pattern is a slightly nicer way to create a new object from a syntax point of view, but it's also more costly to instantiate. Others have indicated that angular uses "new" to create the service, but this isn't quite true - it isn't able to do that because every service constructor has a different number of parameters. What angular actually does is use the factory pattern internally to wrap your constructor function. Then it does some clever jiggery pokery to simulate javascript's "new" operator, invoking your constructor with a variable number of injectable arguments - but you can leave out this step if you just use the factory pattern directly, thus very slightly increasing the efficiency of your code.