ฉันพยายามที่จะแก้ไขปัญหาที่แน่นอนในโพสต์บล็อกนี้
โดยทั่วไปบ้านที่ดีที่สุดสำหรับการสร้างแบบจำลองข้อมูลอยู่ในบริการและโรงงาน อย่างไรก็ตามขึ้นอยู่กับวิธีที่คุณดึงข้อมูลและความซับซ้อนของพฤติกรรมที่คุณต้องการมีวิธีการมากมายในการปรับใช้ เชิงมุมในปัจจุบันไม่มีวิธีมาตรฐานหรือวิธีปฏิบัติที่ดีที่สุด
โพสต์ครอบคลุมสามวิธีใช้$ http , $ ทรัพยากรและRestangular
นี่คือตัวอย่างโค้ดสำหรับแต่ละgetResult()วิธีโดยใช้วิธีการที่กำหนดเองในรูปแบบงาน:
จำกัด (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;
}]);
$ ทรัพยากร (ซับซ้อนกว่าเล็กน้อย):
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 เป็นรูปสี่เหลี่ยมผืนผ้า
มีความเป็นไปได้ที่ Angular 2.0 จะเสนอโซลูชันที่มีประสิทธิภาพมากขึ้นสำหรับการสร้างแบบจำลองข้อมูลที่ทำให้ทุกคนในหน้าเดียวกัน