Femi Adigun Femi Adigun - 2 months ago 14
AngularJS Question

CacheFactory working in my browser but not working in my apk

I have added angular-cache to my app, and have created my items as shown below :

angular.module('rotaryApp', ["ionic", "angular-cache"])
.run(function($ionicPlatform, CacheFactory) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
CacheFactory("songsDataCache", { storageMode: "localStorage", maxAge: 360000, deleteOnExpire: "aggressive" });
CacheFactory("versesCache", { storageMode: "localStorage", maxAge: 360000, deleteOnExpire: "aggressive" });
CacheFactory("chorusCache", { storageMode: "localStorage", maxAge: 360000, deleteOnExpire: "aggressive" });
CacheFactory("imageCache", { storageMode: "localStorage", maxAge: 360000, deleteOnExpire: "aggressive" });
CacheFactory("searchCache", { storageMode: "localStorage", maxAge: 360000, deleteOnExpire: "aggressive" });
//CacheFactory("myTeamsCache", { storageMode: "localStorage" });
//CacheFactory("staticCache", { storageMode: "localStorage" });


});
})

and my service is shown below :

(function () {
'use strict';

angular.module('rotaryApp').factory('eliteApi', ['$http', '$q', '$ionicLoading','CacheFactory', eliteApi]);

function eliteApi($http,$q,$ionicLoading,CacheFactory ) {
var songid;


self.songsDataCache = CacheFactory.get("songsDataCache");
self.versesCache = CacheFactory.get("versesCache");
self.chorusCache = CacheFactory.get("chorusCache");


function getLeagues(){
var defered = $q.defer(),
cacheKey = "songs",
songsData = self.songsDataCache.get(cacheKey);
if(songsData){

console.log("found data in cache");
defered.resolve(songsData);

} else {

$ionicLoading.show({template: 'Loading Songs...'})
var url = "http://bestng.com/notrealurl";
$http.get(url)
.success(function (data) {
$ionicLoading.hide();
console.log("Received data via HTTP");
self.songsDataCache.put(cacheKey, data);
defered.resolve(data);

})
.error(function (data){
defered.reject();
});
}

return defered.promise;


}


function setSongid(sid){
songid = sid;
}

return {
getLeagues: getLeagues,
getLeaguesByTitle: getLeaguesByTitle,
getVerse:getVerse,
getChorus:getChorus,
getLeagueData: getLeagueData,
setSongid: setSongid
};
};


})();

Below is my controller :

(function () {
'use strict';

angular.module('rotaryApp').controller('LeaguesCtrl', ['$state', 'eliteApi', LeaguesCtrl]);

function LeaguesCtrl($state, eliteApi) {
var vm = this;

eliteApi.getLeagues().then(function(data){
vm.leagues = data;

});

};


})();

The getLeagues function is working fine in my browser when I don 'ionic serve' but once I do 'ionic emulate android' It just returned a blank screen.
Please I need help on why this is working in my browser but not working in my apk.

Thank you for your time .

Regards

Answer

The Cache factory must be declared outside of ionicPlatform.ready(), but inside of run(function(){ ...})

Compare my app.js in the question to the working app.js below:

angular.module('rotaryApp', ["ionic", "angular-cache"])

.run(function($ionicPlatform, CacheFactory) {
  $ionicPlatform.ready(function() {
  // Hide the accessory bar by default (remove this to show the accessory bar     above the keyboard
  // for form inputs)
  if(window.cordova && window.cordova.plugins.Keyboard) {
    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
  }
  if(window.StatusBar) {
    // org.apache.cordova.statusbar required
    StatusBar.styleDefault();
  }
}); // end of ready()

CacheFactory("songsDataCache", { storageMode: "localStorage", maxAge:    360000, deleteOnExpire: "aggressive" });
CacheFactory("versesCache", { storageMode: "localStorage", maxAge: 360000,  deleteOnExpire: "aggressive" });
CacheFactory("chorusCache", { storageMode: "localStorage", maxAge: 360000,   deleteOnExpire: "aggressive" });
CacheFactory("imageCache", { storageMode: "localStorage", maxAge: 360000, deleteOnExpire: "aggressive" });
CacheFactory("searchCache", { storageMode: "localStorage", maxAge: 360000, deleteOnExpire: "aggressive" });

}); // end of run(function(){..})

This worked for me. I hope it works for you too

Comments