I have a challenge in my AngularJS application - I need to load a large dataset from an HTTP request just once and share it across multiple controllers. To achieve this, I created a factory that handles the data retrieval:
angular.module('app').factory('reportFactory', ['$http', function ($http) {
var reportFactory = {};
reportFactory.endPoint = 'ajax.php';
reportFactory.getHugeData = function () {
return $http.get(this.endPoint + '?query=CourseListQuery');
};
return reportFactory;
}]);
Initially, I attempted the following approach:
angular.module('app').factory('CommonData', ['reportFactory', function CommonDataFactory(reportFactory) {
var data = {};
reportFactory.getHugeData().then(function (response) {
data.courses = response.data;
}, function (error) {
});
return data;
}]);
However, when trying to access log.warn(CommonData.courses); in my controller, the result returned was undefined.
I am looking for a way to effectively store the promise result and make it accessible throughout my AngularJS application.
How should I structure my code to ensure a single call is made to retrieve the data, and where should this call be executed?