Asynchronous server request - UI wait for complete


#1

Hi there,
a rather naive question here:

I have a service which data was hardcoded for prototyping. Now I would like to link it to server data and am not sure how to synchronize requests and the views currently displayed.
Is there an abstract design-pattern for UI and asynchronous requests in general / or more specifically for Angular.js ? I already read about the $q package and deliverables, but how would I synchronize that with the views and stop other background processes?

Thanks,
El


#2

Assign your scope variables to the asynchronous data received. ANgular will update the UI itself when a new value is assigned to the $scope variable.


#3

It depends when you need your data. If data is requested from the server by some action in the view itself (pushing button for example) you make your $http request that return promise. When promise is fulfilled you assign data returned from server to your scope variables and view updates automatically as @zouzouek said.

If you need your data before view is displayed (typical in master > detail scenario, for example you click contact’s name in the list and then you want to display contact’s details) it’s better to resolve promises inside your route definition. You make your $http request there and only after data is received from server your view is displayed and data passed to it).

This is good article for pointing you in the right direction:
http://blog.brunoscopelliti.com/show-route-only-after-all-promises-are-resolved


#4

@zouzouek @lrolecek Thanks, the links you sent and the approach mentioned makes sense. I have the master -> detail scenario here. Cheers, EL