Tôi đã cố gắng giải quyết vấn đề chính xác trong bài viết trên blog này .
Về cơ bản, ngôi nhà tốt nhất cho mô hình dữ liệu là trong các dịch vụ và nhà máy. Tuy nhiên, tùy thuộc vào cách bạn truy xuất dữ liệu của mình và mức độ phức tạp của các hành vi bạn cần, có rất nhiều cách khác nhau để thực hiện. Angular hiện không có cách tiêu chuẩn hoặc thực hành tốt nhất.
Bài đăng bao gồm ba cách tiếp cận, sử dụng $ http , $ resource và Restangular .
Dưới đây là một số mã ví dụ cho từng loại, với một getResult()phương thức tùy chỉnh trên mô hình Công việc:
Restangular (peasy dễ dàng):
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 (hơi phức tạp hơn một chút):
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 (lõi cứng):
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;
});
Bản thân bài đăng trên blog đi sâu vào chi tiết hơn về lý do tại sao bạn có thể sử dụng từng phương pháp, cũng như các ví dụ mã về cách sử dụng các mô hình trong bộ điều khiển của bạn:
Mô hình dữ liệu AngularJS: $ http VS $ resource VS Restangular
Có khả năng Angular 2.0 sẽ cung cấp một giải pháp mạnh mẽ hơn cho mô hình hóa dữ liệu giúp mọi người trên cùng một trang.