In one of my new projects I am using AngularJS $resources for http calls. I have requirement to show local data (from SQLite) when there is no internet connection.
I have clustered my obstacles by the following steps, and created sample code down below
var servicetest = angular.module('servicetest', ['ngResource'])
.factory('interceptors' ,function($rootScope, offlineCntrl){
return {
'request':function(request){
if(!offlineCntrl.isOnline()){
//there wont be a server call
request.url='';
//Abort the request
request.timeout;
}else{
return request;
}
},
'response':function(response){
if(!offlineCntrl.isOnline()){
offlineCntrl.assignLocal(request).then(function(data){
//Get the local data here.
// Have to pass this data to my response
// At this stage I am getting an error attached below
response.data = data;
return response;
})
}else{
return response;
}
}
}
})
.config(function($httpProvider){
$httpProvider.interceptors.push('interceptors');
})
.factory('offlineCntrl', function($q, $timeout){
return {
isOnline: function(){
return navigator.onLine;
},
assignLocal:function(request){
var defer = $q.defer();
$timeout(function(){
defer.resolve({title:"local", body:"Local local data context"});
})
return defer.promise;
}
}
})
.factory('CloudSerivce', function($resource){
return $resource('https://jsonplaceholder.typicode.com/posts/:id', {
id:'@id'
}, {
get:{
method:"GET",
isArray:false,
cancellable: true
}
})
})
.controller('mainCntrl', function($scope, CloudSerivce){
$scope.data = {};
$scope.getCloudService = function(){
CloudSerivce.get({id:1}).$promise.then(function(data){
//It should receive local data if there is no network
$scope.data = data;
}, function(err){
console.log(err)
})
}
})<html ng-app="servicetest">
<body ng-controller='mainCntrl'>
<h1>{{data.title}}</h1>
<p>{{data.body}}</p>
<button ng-click='getCloudService()'>
GET ITEMS
</button>
<h4>Try the button disabling your internet connection</h4>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
</html>I am getting an error when I try to return the response with deferred promise event.
TypeError: Cannot read property 'headers' of undefined
at f (angular.js:7520)
at C (angular.js:10924)
at angular.js:11010
at h.$eval (angular.js:11930)
at h.$digest (angular.js:11756)
at a.$apply (angular.js:12036)
at HTMLButtonElement.<anonymous> (angular.js:17871)
at angular.js:2612
at q (angular.js:309)
at HTMLButtonElement.c (angular.js:2611)
I can do it by bubbling up a $rootScope emitter and catch it within the controller, but I believe the easiest way is to hack the ngResource (CloudService $promise event) response after aborting the request. So that I can keep the controller getCloudService function as it is, which can work on offline and online mode.
Need to do something like that
.factory('interceptors' ,function($rootScope, offlineCntrl){
return {
'request':function(request){
if(!offlineCntrl.isOnline()){
//there wont be a server call
request.url='';
//Abort the request
request.timeout;
}else{
return request;
}
},
'response':function(response){
const deferred = $q.defer();
if(!offlineCntrl.isOnline()){
offlineCntrl.assignLocal(request).then(function(data){
deferred.resolve(data);
});
}else deferred.resolve(response);
return deferred.promise;
}
}
})