Angularjs controller fails to load http data from cachefactory service

Question

Newbie to angular, using service I'm trying to load cachefactory and using the cache from controller.

Here is service methods

codesApp.service('CodeFilterService',function($filter, $http, CacheService,$log){
this.getByCodeType = function (codeTypeValue, codeName) {
    if (angular.isUndefined(CacheService.get('Codes'))) {
        loadCodes();
    }
    return  $filter('filter')(CacheService.get('Codes'), {codetype: codeTypeValue, name: '!' + codeName});
};

this.getAllCodes = function () {
    $log.info("getAllCodes");
    if (angular.isUndefined(CacheService.get('Codes'))) {
        $log.info("Loading fresh getAllCodes");
        this.loadCodes();
    }
    return  CacheService.get('Codes');
};

this.loadCodes = function () {
    $http.get("./rest/codes").then(function (response) {
        $log.info("Codes Size" +response.data.length );
        CacheService.put('Codes', response.data);
    });
    };
});

codesApp.factory('CacheService',function($cacheFactory){
     return $cacheFactory('super-cache');
 });

Controller Code :

codesApp.controller('CodeCreateController',function($scope,$state,
 Code,CodeFilterService,$log){

  ... 
$scope.codeDropdownList = CodeFilterService.getAllCodes();
   $log.info("codeDropdownList = " + angular.isUndefined($scope.codeDropdownList))    ;

}); 

Here angular.isUndefined($scope.codeDropdownList)) returns true which means data not getting loaded. Is there any way to resolve this issue.

Answer 1

You may use promise inject $q

codesApp.service('CodeFilterService', function ($filter, $http, CacheService, $log, $q) {

    this.getByCodeType = function (codeTypeValue, codeName) {
        if (angular.isUndefined(CacheService.get('Codes'))) {
            loadCodes();
        }
        return $filter('filter')(CacheService.get('Codes'), {
            codetype: codeTypeValue,
            name: '!' + codeName
        });
    };

    this.getAllCodes = function () {
        $log.info("getAllCodes");
        var deferred = $q.defer();
        if (angular.isUndefined(CacheService.get('Codes'))) {
            $log.info("Loading fresh getAllCodes");
            this.loadCodes().then(function (result) {
                $log.error('getAllCodes success');
                var cachedCodes = CacheService.get('Codes');
                deferred.resolve(cachedCodes);
            }, function (reason) {
                $log.error('getAllCodes error: ' + reason);
                deferred.reject();
            });
        } else {
            var cachedCodes = CacheService.get('Codes');
            deferred.resolve(cachedCodes);
        }
        return deferred.promise;
    };

    this.loadCodes = function () {
        $log.info("loadCodes");
        var deferred = $q.defer();
        $http.get("./rest/codes").then(function (response) {
            $log.error('loadCodes success');
            $log.info("Codes Size" + response.data.length);
            CacheService.put('Codes', response.data);
            deferred.resolve();
        }, function (reason) {
            $log.error('loadCodes error: ' + reason);
            deferred.reject();
        });
        return deferred.promise;
    };
});




codesApp.controller('CodeCreateController', function ($scope, $state,
    Code, CodeFilterService, $log) {

    ...
    CodeFilterService.getAllCodes().then(function (result) {
        $log.info('result: ' + result);
        $scope.codeDropdownList = result;
        $log.info("codeDropdownList = " + angular.isUndefined($scope.codeDropdownList))
    }, function (reason) {
        $log.error('error: ' + reason);
    });

});