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
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