Proper way to set up angularjs factory with cached data

Question

I'm just starting out with Angular.js and I'm trying to figure out how to set up a factory that will show cached data and replace it with data retrieved from a REST service once it is received.

To test this out, I'm just hard-coding the "cached" data. Once the data is received, I want the $scope.directory variable to be updated with the latest data received from the server. I can either get it

Here's my factory code:

app.factory('directoryFactory', function ($http) {
var factory = {};
factory.directory = [{name: "Test", ext: "123"},{name: 'Bob', ext: "234"}];

init();
function init() {
    $http({
        method: 'GET',
        url: '{restapiURL}'

    })
        .success(function (data, status, headers, config) {
            factory.directory=data;
        })
        .error(function (data, status, headers, config) {
            console.log('directory fail');
        });
}

}

My Controller has the following code:

$scope.directory = directoryFactory.directory;

In my view, I use ng-repeat to list out all the people and their extensions.

I'd like the view to be updated once the data is received. What's the correct way to watch for factory data changes?

[This example](http://stackoverflow.com/questions/12505760/angularjs-processing-http-response-in-service) uses `.then` to aid in returning an http response. [This post](http://www.benlesh.com/2013/02/angularjs-creating-service-with-http.html) shows a pretty good tutorial and includes the `$q` method. If I have time later I can post a plunk, but these are good places to start. — rGil, May 24 '13 at 20:47
I'm able to get the directory response just fine from the $http call, but in order to display that new data, I have to have the following in the controller: $scope.directory = directoryFactory.directory(); $timeout(function () { $scope.directory = directoryFactory.directory(); },2000); I guess this boils down to this: How do I trigger the $scope.directory to look for the latest value when directoryFactory.directory gets updated. — jloosli, May 24 '13 at 21:36
At the end of the day, I ended up using $broadcast to let the controller know the second set of data was loaded. — jloosli, Jun 21 '13 at 16:27

Maxim Shoustin · Answer 1 · 2013-05-24T21:52:16.307

Your $scope.directory is promise that contains 2 handlers on success and on failure. Since $http is asynchronous, you don't know when response should come but "promise" will notify you about in case if you use then()

Here is example of POST but its the same flow:

factory:

myModule.factory('ajax_post', ['$http',  function(_http) {   

var path = 'src/php/data.ajax.php';

return{
    init: function(jsonData){
        var _promise= _http.post(path, 
            jsonData
            ,{
                headers: {
                    'SOAPActions': 'http://schemas.microsoft.com/sharepoint/soap/UpdateListItems'
                }
            }
            );            
        return _promise; 
    }
  }   
 }]);

In controller:

 var _promise= ajax_post.init(jsonData);

  _promise.then(function (result) {

       //do something with your result
    }, 
    function (error) {
        alert(error.message);
    }
    );

Proper way to set up angularjs factory with cached data

1 Answers1