I did inject $ionicLoading into the controller also. Yet still I see no loading screen.
I even tried every combination of 'templateUrl', template but still no success.
does not work.
I even made constant of Ionicloading. Still no result.
I have got it to working somehow. Now I am stuck with a new problem.
The global $ionicLoading just appears for a second and then disappears even though the promise is not yet resolved and network still shows the request as pending.
The $http Interceptor is firing the response function even before the response has been resolved. The response of data (the remote json file) is still pending but yet the response function is fired. I dont understand. How is that possible. What parameters returned by the server is the actual response?
I did figure out now. The response function is not called on actually obtaining the complete remote JSON file but on obtaining some HTTP headers. Like this:
This is instantaneous. So after that valid data exist on the remote server, the fetching begins. But response function makes $ionicLoading hide away when the client is still waiting for the complete file.
app.config(['$httpProvider', function ($httpProvider) {
var $http,
interceptor = ['$q', '$injector', function ($q, $injector) {
var error;
function success(response) {
// get $http via $injector because of circular dependency problem
$http = $http || $injector.get('$http');
if($http.pendingRequests.length < 1) {
$('#loadingWidget').hide();
}
return response;
}
function error(response) {
// get $http via $injector because of circular dependency problem
$http = $http || $injector.get('$http');
if($http.pendingRequests.length < 1) {
$('#loadingWidget').hide();
}
return $q.reject(response);
}
return function (promise) {
$('#loadingWidget').show();
return promise.then(success, error);
}
}];
$httpProvider.responseInterceptors.push(interceptor);
}]);
the trick in this example should be this: if($http.pendingRequests.length < 1) i hope this helps.