var app = angular.module('plunker', ['ngResource']);
app.factory('NameResource', function($resource) {
var url = 'data.json';
var res = $resource(url, null, {
query: {
method: 'GET',
isArray: true,
transformRequest: [],
transformResponse: function(data, headersGetter) {
var items = angular.fromJson(data);
var models = [];
function Person(config) {
this.name = config.name;
}
Person.prototype.sayHello = function () {
// the person says hello
}
angular.forEach(items, function(item) {
models.push(new Person(item));
});
console.log("models: ", models);
return models;
}
}
});
return res;
});
app.controller('MainCtrl', function($scope, NameResource) {
NameResource.query()
.$promise.then(function (data) {
$scope.names = data;
// sayHello is actually undefined! because $scope.names[0] is
// an instance of Resources and not Person
$scope.names[0].sayHello();
});
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script>
<script data-require="angular-resource@1.3.x" data-semver="1.3.14" src="http://code.angularjs.org/1.3.14/angular-resource.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
Hello.
<ul>
<li ng-repeat="n in names">
{{n.name}}
</li>
</ul>
</body>
</html>
/* Put your css in here */
[
{
"name": "john"
},
{
"name": "mary"
},
{
"name": "jane"
}
]