angular.js - How does angularJS display the "Loading" prompt when the requested data has not been loaded?

Question

After clicking the button to make a request, due to the network or large data size, the angularJS two-way binding data part in the page is not displayed. The page structure is ugly. How can I achieve pop-up layer coverage before all data is loaded? Delete the original web page and prompt "Loading", wait until all data is loaded, and then display the web page with complete data.
The following effect:

Answer 1

https://github.com/cgross/angular-busy/blob/master/README.md Use this module

Answer 2

Make a mask layer in advance, display the mask when making a request (usually $http or $resource), and close the mask after promise resolves.

The logic is that simple, but because it occurs very frequently, you have to consider how to DRY it.

At the view level, if the mask is common to all applications, don’t write it in every route. Instead, consider writing it in the upper routing entry so that sub-routes can share it.

At the calling level, it is simple to save the mask state in $rootScope and use DI to retrieve it at any time; if it is more elaborate, just write a service to control it.

The mask itself can be encapsulated into a directive for easy reuse, but this thing is very simple, so it’s okay not to encapsulate it.