Angular JS loading screen and page animation

Question

I am learning AngularJS for a current project and my site has around 6 - 7 pages. I am using the /#/ navigation scheme and I would like to introduce a loading/please wait screen

Answer 1

I've solved this problem by writing custom HTTP Interceptor. Here is sample code:

var app = angular.module('yourapp', ['loadingService']);

app.config(function ($httpProvider) {
    $httpProvider.responseInterceptors.push('myHttpInterceptor');
    var spinnerFunction = function (data, headers) {
        $('#loading').show();
        return data;
    };
    $httpProvider.defaults.transformRequest.push(spinnerFunction);
});

angular.module('loadingService', [],
    function ($provide) {

        $provide.factory('myHttpInterceptor', function ($q, $window) {
            return function (promise) {
                return promise.then(function (response) {
                    $('#loading').hide();
                    return response;
                }, function (response) {
                    $('#loading').hide();
                    return $q.reject(response);
                });
            };
        });
    });

NOTE: There should be an element with the ID of loading in the DOM.