AngularJS : Service vs Factory

AngularJS : Service vs Factory provider. All providers are singeltons, but slighty different in syntax.

by Daan De Smedt

HTML

<div ng-app="app" ng-controller="BasicController as vm">
  <b>Service data</b><br/>
  <!-- one time binding (eliminate unneeded digest watcher) -->
  Hello, {{::vm.serviceName}}!
  <br/><br/>
  <b>Factory data</b>
  <!-- one time binding (eliminate unneeded digest watcher) -->
  <br/> Hello, {{::vm.factoryName}}!
</div>

JavaScript

angular
  .module('app', [])
  .service('NameService', NameService)
  .factory('NameFactory', NameFactory)
  .controller('BasicController', BasicController)

function BasicController(NameService, NameFactory) {
  /* declare VM */
  var vm = this;
  vm.serviceName = NameService.createName(10);
  vm.factoryName = NameFactory.createName(10);
}

/* service syntax */
function NameService() {
  this.createName = createName;

  function createName(length) {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    for (var i = 0; i < length; i++) {
      text += possible.charAt(Math.floor(Math.random() * possible.length));
    }
    return 'service-name-' + text;
  };

}

/* factory syntax */
function NameFactory() {
  var service = {
    createName: createName
  }
  return service;

  function createName(length) {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    for (var i = 0; i < length; i++) {
      text += possible.charAt(Math.floor(Math.random() * possible.length));
    }
    return 'factory-name-' + text;
  };

}