1

I want to add some delay in angularjs. So that it can fetch data from api. Because my api is heavy. I am calling this function. Basically i want some delay to load page so that my api work properly. I tried some time my data pull immediate some time i am getting error. When i refresh my page it work fine.

      Help to put $timeout function in this angularjs
  // Geting test stuff
    $scope.teststuff = function () {
$scope.loading = true;
$http.get(settings.WebApiBaseUrl + 'Api/testing')           
   .success(function (data) {
        $scope.mydata = data;
        $scope.loading = false;
    }).error(function (data, status, headers, config) {
        alert("Error " + status )             
  $scope.loading = false;
    })

}

Devesh Khosla
  • 15
  • 1
  • 7

1 Answers1

0

Updated:

This problem can easily be solved by using resolve property of $routerProvider. Please use this config. So here the route /ed will not load until the resolve is completed, meaning the http request must return a value, only after that the page will load.

app.config(['$routeProvider', '$httpProvider', function ($routeProvider, $httpProvider) {
    var settings.WebApiBaseUrl =  "some url you want to use";
    $routeProvider.when("/al", { templateUrl: "Views/test.html", controller: "testCtrl" })
  .when("/ed", { 
    templateUrl: "Views/test2.html", 
    controller: "test2Ctrl",
    resolve: {
        initialize: function($http, $sessionStorage){
            $http.get('api/ApiKey/' + $sessionStorage.user)
          .success(function (myKey) { 
            return $http.get(settings.WebApiBaseUrl + 'Api/test1', { headers: { 'X-ApiKey': myKey } })
            .success(function (data) { 
              return data; 
            }).error(function (data, status, headers, config) { 
              alert("error" + status);
            });
          }).error(function (data, status, headers, config) { 
             alert("error" + status);
          }); 
        }
    }
  })
  .otherwise({ 
    redirectTo: '/al' 
  }); 
}]);

Now in the controller you need to do.

app.controller( 'test2Ctrl', function ( $scope, initialize ) {
        $scope.loading=false;
        $scope.test1=initialize;
        $scope.loading=true;
});

Old Answer: so you have a http request which is a promise and will wait until the data is received and from your example I can see you are implementing a loading screen kind of thing until the http request is completed.

To ensure the bulky http request doesn't time out you can use.

angular.module('MyApp', [])
  .config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.timeout = 5000;
}]);

While the page waits for the http request to complete you can use the scope variable($scope.loading = true;) to activate a loading spinner library to mask your page. Checkout angular loading overlay or some other code to do this.

Reference: http timeout

Naren Murali
  • 19,250
  • 3
  • 27
  • 54
  • I want to delay every single call (endpoint)? When they are called. – Devesh Khosla Aug 21 '17 at 15:51
  • If you have an $http request it uses promises to wait for the data to be received so there is no need for setting the delay, are you using any angular router (ui-router) in you application? The line I have given will increase the wait time for the HTTP request, I gave this because I thought the request is getting timed out. – Naren Murali Aug 21 '17 at 15:53
  • @DeveshKhosla angular has a $routeprovider service, there you can place your http request in a resolve parameter, the page will not load until the http request is completed. http://embed.plnkr.co/kHXK54 also http://odetocode.com/blogs/scott/archive/2014/05/20/using-resolve-in-angularjs-routes.aspx – Naren Murali Aug 21 '17 at 16:11
  • Same problem. Actually I have problem with APIKey. Some time my APIKey work fine some time it give me error 401. That's why i was thinking to put some delay. But still same problem – Devesh Khosla Aug 21 '17 at 16:13
  • @DeveshKhosla you are in the wrong approach, delay will only worsen your code quality, please share your angular routing config, if possible share your code, I will show what's wrong. – Naren Murali Aug 21 '17 at 16:21
  • app.config(['$routeProvider', '$httpProvider', function ($routeProvider, $httpProvider) { $httpProvider.defaults.timeout = 5000; $routeProvider .when("/al", { templateUrl: "Views/test.html", controller: "testCtrl" }) .when("/ed", { templateUrl: "Views/test2.html", controller: "test2Ctrl" }) .otherwise({ redirectTo: '/al' }); }]) – Devesh Khosla Aug 21 '17 at 16:24
  • @DeveshKhosla can you please try out the code in my updated answer. – Naren Murali Aug 21 '17 at 16:55
  • My code is really big. one of Controller shows here. // Get all test1 $http.get('api/ApiKey/' + $sessionStorage.user).success(function (myKey) { $http.get(settings.WebApiBaseUrl + 'Api/test1', { headers: { 'X-ApiKey': myKey } }).success(function (data) { $scope.test1 = data; }).error(function (data, status, headers, config) { alert("error" + status) }) }).error(function (data, status, headers, config) { scope.loading = false; }); – Devesh Khosla Aug 21 '17 at 17:05
  • @DeveshKhosla I updated again, try this, also please start reading on angular router resolve, it will clarify your doubt. – Naren Murali Aug 21 '17 at 17:17
  • @DeveshKhosla any luck solving this issue? – Naren Murali Aug 25 '17 at 07:00
  • Thanks. My server was having error that time. Thank you so much for you help. Really appreciated. – Devesh Khosla Aug 25 '17 at 19:23