popup alert when http request last x seconds with angularjs

Question

I want to popup and alert saying "Error Contacting Server" when http request doesn't get any feedback.

.controller('items_ctrl',['$scope','$http',function($scope,$http){
    $scope.shop_id=localStorage.getItem("shop_id");
        $http.get('http://localhost/myapp/spree/stocks.php').success(function(data){
            console.log(JSON.stringify(data));
            $scope.item=data;

           });
    }])

Answer 1

You should use then instead of success/error methods

Here is your updated code

.controller('items_ctrl',['$scope','$http',function($scope,$http){
    $scope.shop_id=localStorage.getItem("shop_id");
        $http.get('http://localhost/myapp/spree/stocks.php').then(function(data){
               console.log(JSON.stringify(data));
               $scope.item=data;

           }, function(error){
               alert("Error contacting server");
           });
        }])

Answer 2

You should specify error callback function.

$http.get('/someUrl', config).then(successCallback, errorCallback);

For more information please see https://docs.angularjs.org/api/ng/service/ $http

Answer 3

Use promise for it .Set some timeout in your javascript.

var cancelReq= $q.defer();
$http.get('/someUrl', {timeout: cancelReq.promise}).success(successCallback);
$timeout(showErrorPopup, 3000);

after timeout , resolve it and then show popup

function showErrorPopup(){
   cancelReq.resolve(); 
//popup code
}