title: AngularJS : Factory and Service?
body: <p><strong>EDIT Jan 2016:</strong> Since this still gets attention. Since asking this I've completed a few AngularJS projects, and for those I mostly used <code>factory</code>, built up an object and returned the object at the end. My statements below are still true, however.</p>
  
  <p><strong>EDIT :</strong> 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.</p>
  
  <p>If I set up VaderService like so (ie as a service):</p>
  
  <pre><code>var module = angular.module('MyApp.services', []);
  
  module.service('VaderService', function() {
      this.speak = function (name) {
          return 'Join the dark side ' + name;
      }
  });
  </code></pre>
  
  <p>Then in my controller I can do this:</p>
  
  <pre><code>module.controller('StarWarsController', function($scope, VaderService) {
      $scope.luke = VaderService.speak('luke');   
  });
  </code></pre>
  
  <p>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, <em>the code in the controller will no longer work</em>, and this is the main difference. With factory, the VaderService injected in to the controller is <em>not</em> instantiated, which is why you need to return an object when setting up a factory (see my example in the question).</p>
  
  <p>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 <strong>the service behaves the exact same as a factory</strong></p>
  
  <p>Given this information, I see <em>no</em> reason to use factory over service, service can do everything factory can and more.</p>
  
  <p>Original question below.</p>
  
  <hr>
  
  <p>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: <a href="http://blogs.clevertech.biz/startupblog/angularjs-factory-service-provider">http://blogs.clevertech.biz/startupblog/angularjs-factory-service-provider</a></p>
  
  <p>And it seems to give a reasonably good explanation, however, I set up my app as follows:</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
      &lt;title&gt;My App&lt;/title&gt;
      &lt;script src="lib/angular/angular.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/controllers.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/VaderService.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/app.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body ng-app="MyApp"&gt; 
          &lt;table ng-controller="StarWarsController"&gt;
              &lt;tbody&gt;
              &lt;tr&gt;&lt;td&gt;{{luke}}&lt;/td&gt;&lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>app.js:</p>
  
  <pre><code>angular.module('MyApp', [
    'MyApp.services',
    'MyApp.controllers'
  ]);
  </code></pre>
  
  <p>controllers.js:</p>
  
  <pre><code>var module = angular.module('MyApp.controllers', []);
  
  module.controller('StarWarsController', function($scope, VaderService) {
      var luke = new VaderService('luke');
      $scope.luke = luke.speak();
  });
  </code></pre>
  
  <p>VaderService.js</p>
  
  <pre><code>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;
  });
  </code></pre>
  
  <p>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):</p>
  
  <pre><code>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;
  });
  </code></pre>
  
  <p>Then reload index.html (I made sure I emptied the cache and did a hard reload). It works <em>exactly</em> the same as it did with module.factory. So what is the real functional difference between the two??</p>