私はこのブログ投稿でその正確な問題に取り組んでみました。
基本的に、データモデリングに最適な場所は、サービスと工場です。ただし、データを取得する方法と必要な動作の複雑さに応じて、実装を行うにはさまざまな方法があります。Angularには現在、標準的な方法やベストプラクティスがありません。
この投稿では、$ http、$ resource、およびRestangularを使用した3つのアプローチについて説明しています。
JobモデルのカスタムgetResult()メソッドを使用した、それぞれのサンプルコードを次に示します。
Restangular（easy peasy）：
angular.module('job.models', [])
.service('Job', ['Restangular', function(Restangular) {
var Job = Restangular.service('jobs');
Restangular.extendModel('jobs', function(model) {
model.getResult = function() {
if (this.status == 'complete') {
if (this.passed === null) return "Finished";
else if (this.passed === true) return "Pass";
else if (this.passed === false) return "Fail";
}
else return "Running";
};
return model;
});
return Job;
}]);
$ resource（少し複雑）：
angular.module('job.models', [])
.factory('Job', ['$resource', function($resource) {
var Job = $resource('/api/jobs/:jobId', { full: 'true', jobId: '@id' }, {
query: {
method: 'GET',
isArray: false,
transformResponse: function(data, header) {
var wrapped = angular.fromJson(data);
angular.forEach(wrapped.items, function(item, idx) {
wrapped.items[idx] = new Job(item);
});
return wrapped;
}
}
});
Job.prototype.getResult = function() {
if (this.status == 'complete') {
if (this.passed === null) return "Finished";
else if (this.passed === true) return "Pass";
else if (this.passed === false) return "Fail";
}
else return "Running";
};
return Job;
}]);
$ http（ハードコア）：
angular.module('job.models', [])
.service('JobManager', ['$http', 'Job', function($http, Job) {
return {
getAll: function(limit) {
var params = {"limit": limit, "full": 'true'};
return $http.get('/api/jobs', {params: params})
.then(function(response) {
var data = response.data;
var jobs = [];
for (var i = 0; i < data.objects.length; i ++) {
jobs.push(new Job(data.objects[i]));
}
return jobs;
});
}
};
}])
.factory('Job', function() {
function Job(data) {
for (attr in data) {
if (data.hasOwnProperty(attr))
this[attr] = data[attr];
}
}
Job.prototype.getResult = function() {
if (this.status == 'complete') {
if (this.passed === null) return "Finished";
else if (this.passed === true) return "Pass";
else if (this.passed === false) return "Fail";
}
else return "Running";
};
return Job;
});
ブログ投稿自体では、各アプローチを使用する理由の背後にある理由と、コントローラーでモデルを使用する方法のコード例について詳しく説明しています。
AngularJSデータモデル：$ http VS $ resource VS Restangular
Angular 2.0は、全員が同じページにいるデータモデリングに対してより堅牢なソリューションを提供する可能性があります。