<!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"
}]