Angularjs: How to display loading-icon when using 'resolve' in $routeProvider?

Question

The following code reads via a service and shows on the web page a list of \'page\' objects for a specific \'page category\' (string). Using the resolve object property in $

Answer 1

You can create a directive that will show based on a broadcast that you send before and after a service call, which you could put on $rootScope. So if you're calling a factory to handle dishing out generic POST/GET calls then right before the call you can call a function on $rootScope, such as "$rootScope.startLoading()" and when it finishes call "$rootScope.doneLoading()", where each of these methods broadcast an event for you to pick up on your directive. Then you just handle on your directive to catch the events, "scope.$on("startLoading", func(..." and have it insert/show a loading div template into the DOM and run, then also have a catch for done loading to remove/hide it.

That way you can have a nice general loading overlay.