J'ai essayé de résoudre ce problème exact dans ce billet de blog .
Fondamentalement, le meilleur endroit pour la modélisation de données est dans les services et les usines. Cependant, selon la façon dont vous récupérez vos données et la complexité des comportements dont vous avez besoin, il existe de nombreuses façons différentes de procéder à la mise en œuvre. Angular n'a actuellement ni méthode standard ni meilleure pratique.
Le message couvre trois approches, en utilisant $ http , $ resource et Restangular .
Voici un exemple de code pour chacun, avec une getResult()
méthode personnalisée sur le modèle de Job:
Restangulaire (pois facile):
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;
}]);
$ ressource (un peu plus alambiquée):
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 (hardcore):
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;
});
Le billet de blog lui-même explique plus en détail les raisons pour lesquelles vous pouvez utiliser chaque approche, ainsi que des exemples de code sur la façon d'utiliser les modèles dans vos contrôleurs:
Modèles de données AngularJS: $ http VS $ resource VS Restangular
Il est possible qu'Angular 2.0 offre une solution plus robuste à la modélisation des données qui rassemble tout le monde sur la même page.