Using Promises in AngularJS Views

Question

Mark Dalglish wrote a short article on how to use promises in AngularJS views. Some people asked questions about this in the comments, but Mark did not answer them (yet). Since I ask me the same question, I will ask instead of StackOverflow to get the answer:

• If you use promises in views, how do I handle the load / wait indication because they are asynchronous? Does the promise have something like an "allowed" or "inside Request" property?

• How to handle errors? Usually they occurred in the second callback, but if I use the promise directly in the view, I do not handle this case. Is there another way?

Thanks.

Answer 1

EDIT: with angular v1.2 , promise resolution in views is not activated by default .

The automatic resolution of promises in a view initially looks like a convenient tool, but it has a number of limitations that need to be carefully understood and evaluated. The biggest problem with this approach is that it is AngularJS that will add callbacks to the promise, and we have little control over it.

Answering your questions:

1) As stated, eventually AngularJS will add success / error callbacks, so we don't have much control here. What you can do is turn the original promise into a regular one that will track resolution. But this kind of agility is a goal to save a few keystrokes. And no, there are no such things as "allowed." In short, there is no universal progress tracking mechanism that will work for all promises. If your promises are based on $http , you can use interceptors or the pendingRequests property to track the pendingRequests request.

2) You cannot. Once again, AngularJS adds a handler inside the $parse service, and it looks like this: promise.then(function(val) { promise.$$v = val; }); (see code here ). You can see that only the success callback has been added, so all failures will be ignored.

These are not the only limitations of automatically resolving promises in a view. Another problem is that the promises function returned by the function will not be resolved correctly. For example, if you rewrite the example as follows:

 myModule.controller('HelloCtrl', function($scope, HelloWorld) { $scope.messages = function() { return HelloWorld.getMessages(); } }); 

and try using the following markup:

 <li ng-repeat="message in messages()"></li> 

everything will work as expected, which may come as a surprise.

In short: although automatic resolution of promises may seem like a convenient shortcut, it has a number of limitations and unobvious behavior. Evaluate them carefully and decide whether to save a few keystrokes.