angular js to load initial data in context

Question

where should i load basic data in angularjs app. i have created factory initialy i want to load data into service so that whenever i will require data i will use my service instead of hitting back to server.

Hint:: My problem is i am applying ng-controller to different div's so many instance are created i dont want to load data from server with each instance.

app.factory('feedbackFactory', function ($http) {
   //factory code
});


app.factory('feedbackService', function ($http) {
   //service code
});


app.controller('feedbackController', function ($scope, feedbackService,feedbackFactory $filter) {
      // Constructor for this controller
init();

function init() {
   feedbackFactory.get(1234, 1, 20).then(function(data)
     {
        $scope.feedbackItems=data;
        // here load data into service
        });
    }
});

Answer 1

If your server supports caching $http will default to use the E-Tags and only actually get the data back from the server once (assuming it doesn't update and the e-tag changes). This will cause it to hit the server however but get a 304 response.

If you want to force your application to only ever talk to the server once you would need to setup some kind of variable that gets checked to see if it should hit the server or not...

app.factory('feedbackFactory', function ($http) {
    var checkServer = true;
    var results = [];
    function getStuff(x, y, z) {
        if (checkServer) {
            checkServer = false; // we don't want to check again! Maybe have a refresh button that sets this back to true?
            // do http call...
            $http.get("path").then(function(response) {
                // Here is the magic... use angular.copy to keep your results object the same but update its values!
                angular.copy(response, results);
            });
        }
        return results; // this will be updated by our inital call to the server!
    });
});

Thats probably not all valid code since I'm just typing off the top of my head, but it should get you close enough. Big ones are bind to the results object and use angular.copy(httpResponseData, results) to fill the data, you might want to return a $q.when(results) if you want to bind to the call itself in a promise instead of directly binding to the feedbackFactory.results ;

app.factory('feedbackFactory', function ($http, $q) {
    var checkServer = true;
    var results = [];
    function getStuff(x, y, z) {
        if (checkServer) {
            checkServer = false; // we don't want to check again! Maybe have a refresh button that sets this back to true?
            // do http call...
            return $http.get("path").then(function(response) {
                // Here is the magic... use angular.copy to keep your results object the same but update its values!
                angular.copy(response, results);
                return results; // If you want to bind to the promise instead of .results directly
            });
        }
        return $q.when(results); // If you want to bind to the promise instead of .results directly
    });
});

Answer 2

You can use $http cache, so your data won't be fetched from server after the first time. See this answer to see how to use cache in $http.