Я намагався вирішити цю проблему в цій публікації блогу .
В основному, найкращий будинок для моделювання даних - це служби та фабрики. Однак залежно від того, як ви отримуєте свої дані та складності поведінки, яка вам потрібна, існує багато різних способів здійснити реалізацію. На сьогодні кутовий не має стандартного способу чи найкращої практики.
Пост охоплює три підходи, використовуючи $ http , $ resource та Restangular .
Ось приклад коду для кожного із власним getResult()методом на моделі Job:
Рестангулярний (легкий горошок):
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;
}]);
$ ресурс (дещо складніший):
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 $ ресурс VS Restangular
Є можливість Angular 2.0 запропонувати більш надійне рішення для моделювання даних, яке отримує всіх на одній сторінці.