I am using Angularjs 1.3.7 and just discovered that Promise.all does not update angularjs view after a successful response, while $q.all does. Is this later changed since Promises are included in native javascript or what is the reason behind this?
As IAmDranged mentions in a comment:
Probably yeah, because the Promise API is not integrated with the angular mechanism - meaning essentially that it doesn't trigger a digest cycle at key point of the lifecycle of the promises. Try adding a $scope.$apply() at the end of the Promise.all() callback function to trigger a digest cycle manually.
It was confirmed that Promise.all does not trigger a digest cycle.
Related
This is a general question about AngularJS.
AngularJS does not raise an event to notify when the digest cycle has ended. AngularJS suggests using $timeout as a solution to queue your work to be run after the current digest cycle (also waits for DOM rendering to be completed by the browser).
Does anyone know how to know if $scope.$apply() and $scope.$digest() have ended without using $timeout?
You can use $scope.$digest(), before your business logic function or $scope.$apply(function(){/*your business*/}) but this method like timeout function.
TypeScript constantly suggests that I change my AngularJS service code to async/await functions.
My understanding is that using the await keyword is totally fine with third-party promises, since it is just syntax sugar for calling then. However, I normally return Angular promises because they are necessary to play nicely with the digest cycle.
This code gives me an error because async functions wrap their contents in an ES6 promise. Will this matter for Angular scheduling, given that the returned promise is still hooked up to an Angular-spawned promise? Or should I submit an issue to TypeScript for suggesting async/await when functions do not explicitly return an ES6 promise?
For anyone viewing this in the future. It does not play nicely. async functions wrap their contents in a global ES6 promise, so if you await AngularJS promises within the changes will eventually hit, but scheduling is weird when you chain together $q promises and ES6 promises, so there will usually be an artificial delay before changes are reflected in the DOM.
On the other hand, Angular 2+ monkey-patches DOM event sources and promises, so async-await should work as expected with newer versions.
We are using Angular JS promises heavily and its one of the recommend practice from Angular team also. I feel that its just a syntax sugar on the top of Callback. But not sure about it. Can anybody give me few examples where Angular.js promises are better than javascript callbaks?
Promises can be chained and avoid the 'pyramid of doom'. They also have a defined way of handling results like success and failures, which with callbacks is not the case.
if you have multiple ajax calls and on each success of those calls sometimes you have to call the same ajax method again. Coding such scenario becomes ugly with callbacks.
Promise handles that very elegantly.
You can skip model dirty checking in $timeout service by setting the third parameter called invokeApply to false (see documentation).
Is it possible to achieve the same result with the $http service?
I need to call a legacy third-party restful webservice several times, but must reduce the amount of refreshes on the UI...
No, but you can use jQuery.ajax or any other ajax library to make http requests out of the digest loop.
In fact, $http will not send any request outside the digest loop. This is from the angular comments:
The $http service will not actually send the request until the next $digest() is
executed. Normally this is not an issue, since almost all the time your call to $http will
be from within a $apply() block.
If you are calling $http from outside Angular, then you should wrap it in a call to
$apply to cause a $digest to occur and also to handle errors in the block correctly.
So I know if the call is outside angularjs or it is async then we need $apply to update the
angularjs scope.
What is the best practices to using $apply if I have many api/3rd party in my app?
I always forgot or didn't know that api/plugin is async.
I would write a wrapper service for each lib that needs it, and encapsulate callbacks in angular promises, but remember it's only neccessary for asynchronous functions, if you call a synchronous external lib, this should work as expected without issues.