Correct way of wiring up service to REST api - angularjs

Question

I've created a service (angular.js) that represents a model in my application:
angular.module("MyApp").factory('ItemService', function() {
this.items = [1, 2, 3];
this.getItems = function() {
return items;
};
this.addItem = function(i) { ... };
this.deleteItem = function(i) { ... };
return this;
});
and my controller:
angular.module('ItemController', function($scope, ItemService) {
$scope.getItems = function() {
return ItemService.getItems();
};
});
Now I want to wire up my service to a REST backend that retrieves, adds, deletes the items permanently. So I want to get rid of the initialization of the items array in my service and want to retrieve it from the server instead. Some things I came across:
The getItems function gets called from Angular multiple times (like 5-6 times when the page loads up and more often when page elements change). So I want to avoid to make each time a REST api call in the getItems function.
I could create an init() method in my service that initializes the items array using a REST request. But how can I ensure that this initialization is done before getItems gets called.
I could create a condition in getItems() that checks if items array is null. If so, initialize it from backend, if not return the saved array.
Note: getItems is not the only function that uses the items array. e.g. addItem, deleteItem etc. use it too.
Many ways to do the same thing, but what is the correct/best way to do this using Angular.js?

Answer 1

I would do it by leveraging the $cacheFactory service that is available as part of the angular ng module. This service will help you put,remove and get objects from cache on the browser side.
Coming to your implementation :
1) Inject $cacheFactory in your service
angular.module("MyApp").factory('ItemService', ['$cacheFactory',function($cacheFactory)
2) Modify your getItems method using the basic caching pattern
var items = $cacheFactory.get('cachedItems')
if (!items){
//make a $http call
items = $http.get to your url
//set the retrieved object in cache
$cacheFactory.put('cachedItems',items);
}
return items;
3) In your other Add/Delete/Update methods i will clear the cache after your server side update is successful
$cacheFactory.remove('cachedItems');
You can find more details about $cacheFactory here : https://docs.angularjs.org/api/ng/service/$cacheFactory

Answer 2

Angular $resources (start from 1.2) https://docs.angularjs.org/api/ngResource/service/$resource
It provides wrapper to interact (CRUD) with your REST service and supports caching out of the box.
Example:
var User = $resource('/user/:userId', {userId:'#id'});
User.get({userId:123}, function(user) {
user.abc = true;
user.$save();
});