<!DOCTYPE html>
<html>

<head>
  <script src="https://momentjs.com/downloads/moment-with-locales.js"></script>
  <script src="https://code.angularjs.org/1.6.3/angular.js"></script>
  <script src="https://code.angularjs.org/1.6.3/angular-resource.js"></script>
  <script src="https://rawgit.com/beachmachine/angular-resource-factory/0.8.2/dist/ngresourcefactory.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="example">
  <h1>Angular ResourceFactory Demo</h1>
  
  <div ng-controller="ExampleController">
    <dl>
      <dt ng-repeat-start="member in vm.members">{{ member.name }}</dt>
      <dd ng-repeat-end>Created at: {{ member.creation_date.format('LLL') }}</dd>
    </dl>

    <button ng-click="load()">Load members</button>
    <button ng-click="clear()">Clear cache</button>
  </div>
</body>

</html>
(function() {
  var app = angular.module('example', [
    'ngResourceFactory'
  ]);

  /**
   * Definition of the member resource.
   */
  app.factory('MemberResource',
    function(ResourceFactoryService) {
      return ResourceFactoryService('MemberResource', 'member.json', {
        queryDataAttr: null, // result does not have a data attribute. The response directly contains the data
        queryTotalAttr: null, // result does not have a attribute for the total count
        pkAttr: 'pk', // attribute `pk` is the primary key of the instances
        urlAttr: null, // resource instance do not have an attribute containing their URL

        /**
         * Converts the dates to moment objects.
         * @param obj
         * @return {*}
         */
        toInternal: function(obj) {
          // no transformation needed if given object is false
          if (!obj) {
            return obj;
          }

          obj.creation_date = obj.creation_date ? moment(obj.creation_date) : null;
          obj.last_modification_date = obj.last_modification_date ? moment(obj.last_modification_date) : null;

          return obj;
        },

        /**
         * Converts the moment dates to strings.
         * @param obj
         * @return {*}
         */
        fromInternal: function(obj) {
          // no transformation needed if given object is false
          if (!obj) {
            return obj;
          }

          obj.creation_date = obj.creation_date ? moment(obj.creation_date).toJSON() : null;
          obj.last_modification_date = obj.last_modification_date ? moment(obj.last_modification_date).toJSON() : null;

          return obj;
        }
      });
    }
  );
  
  app.controller('ExampleController',
    function($scope, MemberResource) {
      $scope.vm = {};
      
      /**
       * Loads the members from the resource service. The first time called the 
       * data will be fetched from the API. Afterwards the data is cached.
       */
      $scope.load = function() {
        $scope.vm.members = MemberResource.query();
      };
      
      /**
       * Clears the cache so the next time data is loaded from the resource
       * sevice it will be fetched from the API again.
       */
      $scope.clear = function() {
        MemberResource.getCache().removeAll();
      }
    }
  )


})();
html {
  font-size: 62.5%; 
}

body {
  font-size: 1.5em;
  line-height: 1.6;
  font-weight: 400;
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222; 
}

button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 24px;
  padding: 0 30px;
  color: #555;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box; 
}
[{
  "pk": 1,
  "creation_date": "2017-01-11T06:00:00Z",
  "last_modification_date": "2017-01-12T08:00:00Z",
  "name": "Example Member 1"
}, {
  "pk": 2,
  "creation_date": "2017-02-11T06:00:00Z",
  "last_modification_date": "2017-02-12T08:00:00Z",
  "name": "Example Member 2"
}, {
  "pk": 3,
  "creation_date": "2017-03-11T06:00:00Z",
  "last_modification_date": "2017-03-12T08:00:00Z",
  "name": "Example Member 3"
}, {
  "pk": 4,
  "creation_date": "2017-04-11T06:00:00Z",
  "last_modification_date": "2017-04-12T08:00:00Z",
  "name": "Example Member 4"
}]