<!DOCTYPE html>
<html ng-app="DirectoryDemo">

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="angular.js@2.0.0-alpha.31" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container" ng-controller="MainController">
      <h1>Service vs Factory in AngularJS.</h1>
      
      <p>
        The purpose of this demo is to show the different approaches when creating 
        a factory and a service.
      </p>
      
      <p>
        Open <code>script.js</code> to see the fully commented code. The main 
        controller takes an array of names and adds them one by one to the directory.
        It then displays the contents of the directory in a table. You can see the 
        generated output below.
      </p>
      
      <hr>

      <table class="table table-striped table-hover table-bordered">
        <thead>
          <tr>
            <th>Directory</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="person in directory track by $index">
            <td>
              {{person.getFullName()}}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>

</html>
(function (ng) {
  'use strict';

  // intialize module
  var app = ng.module('DirectoryDemo', []);
  
  // define components
  app.controller('MainController', MainController);
  app.service('Directory', Directory);
  app.factory('Person', Person);
  
  /**
   * MainController
   * 
   * The main controller creates 3 people and adds them to the directory.
   */
  function MainController ($scope, Directory) {
    var names = [ 'Vincent Chase', 'Johnny Drama', 'Ari Gold' ];
    
    $scope.directory = Directory.people;
    
    angular.forEach(names, function (name) {
      name = name.split(' ');
      Directory.addPerson(name[0], name[1]);
    });
  }
  
  /**
   * Directory
   * 
   * This service holds an array of people. It also
   * exposes some basic methods to control the array.
   * 
   * As this is a service, variables and methods are
   * instantiated directly on to 'this'.
   */
  function Directory (Person) {
    var self = this;
    
    // array of Person objects
    this.people = [];
    
    // define methods
    this.addPerson = addPerson;
    
    /**
     * The addPerson method adds a person object to the people array
     */
    function addPerson (firstname, lastname) {
      self.people.push(new Person(firstname, lastname)); 
    }
  }
  
  /**
   * Person
   * 
   * This object holds stores properties and exposes
   * basic methods about a person.
   * 
   * As it is instantiated as a factory, we create a new 
   * object each time using the following syntax:
   * 
   * var john = new Person('John', 'Smith');
   */
  function Person () {
    function PersonClass (firstname, lastname) {
      var self = this;
      
      // define properties
      this.firstname = firstname;
      this.lastname = lastname;
      
      // define methods
      this.getFullName = getFullName;
      
      /**
       * Return persons full name
       */
      function getFullName () {
        return self.firstname + ' ' + self.lastname;
      }
    }
    
    return (PersonClass);
  }
})(angular);
# Service vs Factory in AngularJS.
The purpose of this demo is to show the different approaches when creating a 
factory and a service.

Open `script.js` to see the fully commented code. The main controller takes an 
array of names and adds them one by one to the directory. It then displays the 
contents of the directory in a table.