AngularJS Execute function after a Service request ends

Question

I am using AngularJS Services in my application to retrieve data from the backend, and I would like to make a loading mask, so the loading mask will start just before sending the request. but how can I know when the request ends?

For example I defined my servive as:

angular.module('myServices', ['ngResource'])
    .factory('Clients', function  ($resource) {
        return $resource('getclients');
    })
    .factory('ClientsDetails', function  ($resource) {
        return $resource('getclient/:cltId');
    })

So I use them in my controller as:

$scope.list = Clients.query();

and

$scope.datails = ClientsDetails.get({
    date:$scope.selectedId
});

So the question would be, how to know when the query and get requests ends?

Edit:

As a side note in this question I've been using using angularjs 1.0.7

You pass a function to the `.get()` function as the second parameter, and that'll be called when the HTTP request completes. — Pointy, Nov 27 '13 at 22:49

score 3 · Answer 1 · answered Nov 27 '13 at 23:47

In AngularJS 1.2 automatic unwrapping of promises is no longer supported unless you turn on a special feature for it (and no telling for how long that will be available).

So that means if you write a line like this:

$scope.someVariable = $http.get("some url");

When you try to use someVariable in your view code (for example, "{{ someVariable }}") it won't work anymore. Instead attach functions to the promise you get back from the get() function like dawuut showed and perform your scope assignment within the success function:

$http.get("some url").then(function successFunction(result) {
  $scope.someVariable = result;
  console.log(result);
});

I know you probably have your $http.get() wrapped inside of a service or factory of some sort, but you've probably been passing the promise you got from using $http out of the functions on that wrapper so this applies just the same there.

My old blog post on AngularJS promises is fairly popular, it's just not yet updated with the info that you can't do direct assignment of promises to $scope anymore and expect it to work well for you: http://johnmunsch.com/2013/07/17/angularjs-services-and-promises/

Thanks for the detailed explanation, just one question, does that implies to old versions too? I am using 1.0.7, also if possible do you know where I should go to find detailed information, I would like to master angularjs as much as possible :) — Abu Romaïssae, Nov 27 '13 at 23:55
No, it does not apply to versions as old as 1.0.7. I know because that was what I was using myself just a couple of weeks ago :) There are two URLs I want to direct you to: the AngularJS migration guide for moving from version 1.0 to 1.2 (http://docs.angularjs.org/guide/migration) and the 1.0.7 docs (http://code.angularjs.org/1.0.7/docs/api). If you go to the regular docs link on their website you get the latest version instead of the one for the particular version you're using. — John Munsch, Nov 28 '13 at 00:22

score 1 · Answer 2 · edited May 23 '17 at 12:19

1

You can use promises to manage it, something like :

Clients.query().then(function (res) {
    // Content loaded
    console.log(res);
}, function (err) {
    // Error
    console.log(err);
});

Another way (much robust and 'best practice') is to make Angular intercepting your requests automatically by using interceptor (see doc here : http://docs.angularjs.org/api/ng.$http).

This can help too : Showing Spinner GIF during $http request in angular

edited May 23 '17 at 12:19

Community

1
1

answered Nov 27 '13 at 23:02

meriadec

2,953
18
20

what will be the content of: `$scope.list` in this case? will it be the same as before? or should I assign the result to this variable AFTER the requests ends using the way you presented? – Abu Romaïssae Nov 27 '13 at 23:23

score 0 · Accepted Answer · answered Dec 16 '13 at 23:48

0

As left in a comment by Pointy I solved my problem giving a second parameter to the get function as following:

$scope.datails = ClientsDetails.get({
    date:$scope.selectedId
}, function(){
    // do my stuff here
});

answered Dec 16 '13 at 23:48

Abu Romaïssae

3,841
5
37
59

AngularJS Execute function after a Service request ends

Edit:

3 Answers3