If you're looking to display a general template for all state transitions while the data is being resolved, my recommendation is to listen for the events triggered by the routing library. This way, you can manage all state transitions from a single central point without cluttering the routing configuration, which could prove to be quite challenging.

For more information, you can refer to the documentation for $routeChangeStart, $routeChangeSuccess, and $routeChangeError on the Angular router documentation.

Recently, I undertook the task of creating a new service along with a new view directive. Surprisingly, the process turned out to be much simpler than I initially anticipated. The newly developed service allows for a clean separation between the main view and the loading view, which can now be reused across all pages of the application. In addition, I incorporated the option to configure an error template URL and error controller for instances when the loading process fails.

The Angular $injector, $templateRequest, and $controller services played a crucial role in carrying out most of the necessary operations. My role involved connecting a directive that relies on these services to the appropriate event ($locationChangeSuccess) and to the promise obtained from the resolve object's functions (using $q.all). This connection was established within the route service, where the service selects the correct template URL and controller to be passed on to the directive for handling.

Here's a condensed version (excluding the getCurrentConfig method):

RouteService:

(function () {
    'use strict';

// provider: 

    angular.module('pikcachu')
        .provider('pikaRouteService', [function () {

        var routeConfigArray;
        var otherwiseRouteConfig;
        //configuration methods
        this.when = function (url, routeConfig){
            routeConfigArray.push({url: url, routeConfig: routeConfig});
            return this; 
        }
        this.otherwise = function(routeConfig){
            otherwiseRouteConfig = routeConfig;
            return this;
        }
        // service factory:
        this.$get = ['$rootScope', '$location', '$q', '$injector', '$templateRequest', 
            function ($rootScope, $location, $q, $injector, $templateRequest) {
                function RouteService() {
                    this.setViewDirectiveUpdateFn = function(){ /*...*/ }

                    function init(){
                        $rootScope.$on('$locationChangeSuccess', onLocationChangeSuccess);
                    }

                    function onLocationChangeSuccess(){
                        // get the configuration based on the current url
                        // getCurrentConfig is a long function, because it involves parsing the templateUrl string parameters, so it's left out for brevity
                        var currentConfig = getCurrentConfig($location.url());
                        if(currentConfig.resolve !== undefined){
                            // update view directive to display loading view
                            viewDirectiveUpdateFn(currentConfig.loadingTemplateUrl, currentConfig.loadingController);
                            // resolve
                            var promises = [];
                            var resolveKeys = [];
                            for(var resolveKey in currentConfig.resolve){
                               resolveKeys.push(resolveKey);
                               promises.push($injector.invoke(resolve[resolveKey]));
                            }
                            $q.all(promises).then(resolveSuccess, resolveError);
                            function resolveSucces(resolutionArray){
                               // put resolve results in an object
                               var resolutionObject = {};
                               for(var i = 0; i< promises.length;++i){
                                  resolved[resolveKeys[i]] = resolutionArray[i];
                               }
                                 viewDirectiveUpdateFn(currentConfig.errorTemplateUrl, currentConfig.errorController);
                            }
                            function resolveError(){
                                viewDirectiveUpdateFn(currentConfig.errorTemplateUrl, currentConfig.errorController);
                            }
                        }
                    }

                    init();
                }
                return new RouteService();
            }]
    })();

View directive

(function () {
    'use strict';
    angular.module('pikachu')
        .directive('pikaView', ['$templateRequest', '$compile', '$controller', 'pikaRouteService', function ($templateRequest, $compile, $controller, pikaRouteService) {

            return function (scope, jQdirective, attrs) {
                var viewScope;

                function init() {
                    pikaRouteService.listen(updateView);
                }

                function updateView(templateUrl, controllerName, resolved) {
                    if(viewScope!== undefined){
                        viewScope.$destroy();
                    }
                    viewScope = scope.$new();
                    viewScope.resolved = resolved;
                    var controller = $controller(controllerName, { $scope: viewScope });
                    $templateRequest(templateUrl).then(onTemplateLoaded);
                    function onTemplateLoaded(template, newScope) {
                        jQdirective.empty();
                        var compiledTemplate = $compile(template)(newScope);
                        jQdirective.append(compiledTemplate);
                    }
                }

                init();
            };
        }
    ]);
})();