Make an AngularJS service and working with promise - angularjs

Question

I would like to make a service which loads a JSON file and the provide some methods to work with the result.
Blog.service('ArticleService', ['$http', function ($http) {
this.loadArticles = function() {
return $http.get('data/articles.json');
};
this.getArticles = function () {
// return the json
};
this.getArticle = function (id) {
// work with the json
};
}]);
And the controller:
Blog.controller('BlogController', function ($scope, ArticleService) {
console.log(ArticleService.getArticles());
console.log(ArticleService.getArticle(1));
});
I'd like to cache the result of my request and then work with this result in my methods, getArticles and getArticle.

Answer 1

Following your comment, if you want to do only 1 request, then I'll suggest saving the $http promise in a variable in your service and returning that variable in getArticles.
Blog.service('ArticleService', ['$http', function ($http) {
this.loadArticles = function() {
return $http.get('data/articles.json');
};
var articles;
this.getArticles = function () {
if (!articles) {
articles = this.loadArticles();
}
return articles;
};
this.getArticle = function (id) {
// work with the json
};
}]);
Or better yet, load the articles variable on init:
Blog.service('ArticleService', ['$http' '$q', function ($http, $q) {
var articles = (function() {
return $http.get('data/articles.json');
})();
this.getArticles = function () {
return articles;
};
this.getArticle = function (id) {
// Return a promise that will be resolved with the correct article.
var deferred = $q.defer();
articles.then(function (arts) {
arts.forEach(function (art) {
if (art.id === id) {
deferred.resolve(art);
}
});
});
return deferred.promise;
};
}]);
Angular used to unwrap promises, but that was deprecated because it proved to be troublesome and very "magical" (leading to misunderstandings). See https://github.com/angular/angular.js/issues/5153

Answer 2

Alternatively, you could use $http's cache property:
Blog.service('ArticleService', ['$http', function ($http) {
this.getArticles = function() {
return $http.get('data/articles.json', {cache: 'myCache'});
};
this.getArticle = function (id) {
return $http.get('data/articles.json', {cache: 'myCache'}).then(function(response) {
// Parse the response, return the article in question.
});
};
}]);

Answer 3

Blog.service('ArticleService', ['$http', '$q', function ($http, $q)
{
var self = this;
this.loadArticles = function ()
{
var deffered = $q.defer();
$http.get("data/articles.json").then(
function (result)
{
deffered.resolve(result);
},
function ()
{
deffered.reject()
}
);
return deffered.promise;
};
this.getArticles = function ()
{
return self.loadArticles;
};
this.getArticle = function (id)
{
// some stuff to retrieve the object
};
}]);
then in your controller
Blog.controller('BlogController', function ($scope, ArticleService)
{
ArticleService.getArticles().then(function (data)
{
console.log(data);
}, then(function ()
{
alert("error")
})
);
});
});

Answer 4

If you want your cache to persist from session to session, then see user3904's answer.
If it is acceptable for the cache to die with the page, then you might consider the following approach :
Blog.service('ArticleService', ['$http', '$q', function ($http, $q) {
var articles = {};
var loadArticles = function () {
articles.multi = $http.get("data/articles.json").done(function(a) {
articles.multi = a;
});
return articles.multi;
};
var loadArticle = function (id) {
articles[id] = $http.get("data/articles.json/" + id).done(function(a) {
articles[id] = a;
});
return articles[id];
};
this.getArticles = function () {
return articles.multi ? $q.when(articles.multi) : loadArticles();
};
this.getArticle = function(id) {
id = '' + id;
return articles[id] ? $q.when(articles[id]) : loadArticle(id);
};
}]);
Explanation
The cache is the js plain object articles.
The two load...() functions are private - assuming, as seems reasonable, that they are to be called only by their corresponding get...() functions. (This is not particularly significant to the overall solution).
On first call, the two loadArticles() caches a promise, which is overwritten with the data delivered by the promise, when that data arrives. The promise is temporarily cached for one reason - in case a second request is made before the data is returned from the server. The $q.when(...) in this.getArticles() ensures that loadArticles() returns promise-wrapped data, regardless of what is currently cached - promise or data.
this.getArticle() works similarly to this.getArticles(), but accepts (and passes) an id.
This strategy is designed to be storage efficient. By caching only the data long term, the (small) overhead of promise wrappers is avoided. This might be an issue if users are likely to request many individual articles per session.
Storage efficiency is bought at the cost of slightly less efficient delivery of cached articles. $q.when(...) will take some extra clock cycles to complete.
It should be quite simple to adapt the code to work the other way round - ie to optimise for delivery at the cost of storage efficiency - ie to store promises long term and avoid the need for $q.when(...).
Both approaches will work and for most applications it's pretty academic which one is adopted.