Angularjs how to make a loading screen correctly?

Question

JavaScript

Greetings, such a question, we have a stateManager service and init,
init starts after all the services have loaded, and starts the initialization of all the main services using the service queue in the stateManager, etc. while all this is being done, we need to display the loading screen. At first it was just like stateManager -> $rootScope.loaders.init.active = true. In the template, two elements depend on this variable, the first is the loader itself and the second is the page content itself. But then I asked myself the question - how if I control the bootloader, it’s not a service to do it, you need a controller, but then, logically, it seems like its display should be answered by the controller, and not the service. But bad luck, because the content also depends on the rootScope variable, and I don’t want to attach the same controller to it.
What is the best way to solve this problem? Yet to control the display through rootScope? But then in the controller, for example, you will also have to work with the rootScope, for example, if you want to delay the appearance for N seconds after the entire initialization.
Thanks in advance.

Answer 1

I didn’t understand anything ... If by loading screen you mean a spinner, you can make it globally at events (for example, show the spinner by $stateChangeStart and hide by $stateChangeSuccess or $stateChangeError. You should also do such things in resolvers for controllers. They are launched as since between $staeChangeStart and Success and return promises, you can just wedge into the promise chain and catch that something happened
.
...

Answer 2

Use the deferredBootstrap module to load all the necessary data before initializing the application, you will not have to fence these same queues.