angular-loading-bar and images/views/states loading – SEO

I am using ui-router for my angular app. I have some views that contain images. I would like the angular-loading-bar to track also when these images are finished loading. Or more generally, until the view has finished rendering.

When I stumbled upon that post on how to do SEO with angularJS, it indicated that we must create static html snapshots of every “page” and serve them to search engine bots so that they can be crawled. To do that, we must ourselves crawl over all pages in our application with a headless browser and store the html into a file that will be served. But, with angular having to load views over ajax and all, we must wait for our page to be loaded before storing what the headless browser html. Otherwise we get empty html with empty views.

I have written a small script that can check for the ready status of our views. When the $rootScope.status property equals ‘ready’, I know I can store my headless browser’s html as it has finished loading.

var app = angular.module("app", ["ui.router", 'ngAnimate','angular-loading-bar','angular-images-loaded','angular-google-analytics']);

app.run(['$rootScope', function($rootScope){

    $rootScope.loadingCount = 0;
    $rootScope.changeSuccess = false;

    $rootScope.ready = function(){
        $rootScope.loadingCount--;
        if (($rootScope.loadingCount == 0) && ($rootScope.changeSuccess == true)){
            $rootScope.status = 'ready';
        }
    };

    $rootScope.loading = function(){
        $rootScope.loadingCount++;
        $rootScope.status = 'loading';
    };

    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
        $rootScope.loadingCount = 0;
        $rootScope.changeSuccess = false;
    });

    $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
        $rootScope.changeSuccess = true;
    });

    $rootScope.$on("$viewContentLoading", function(){
        $rootScope.loadingCount++;
    });

    $rootScope.$on("$viewContentLoading", function(){
        $rootScope.loadingCount--;
    });

}]);

Then, in each of our controllers, we must call

$rootScope.loading();

and when the controller is ready

$rootScope.ready()

With this, we’ll be able to check if all our controllers have rendered their views. It’s not super elegant for now, but it does the job.

This script can be well integrated with angular-loading-bar as it tracks the readiness of the overall application. The progress bar could be an indicator of that progress. The drawback of this is that it has conflicts with the natural behaviour of angular-loading-bar tracking XHR requests.

For example, in my controllers I use this :

app.controller("WorksController", [

    "$scope", "cfpLoadingBar",

    function ($scope, cfpLoadingBar) {
        cfpLoadingBar.start();
        $scope.imgLoadedEvents = {
            always: function () {
                cfpLoadingBar.complete();
            }
        };
    }
]);

This code should be migrated right in the $rootScope script that tracks the readiness of the views.

$rootScope.$watch('status', function(newValue, oldValue){
    if (newValue == 'loading'){ cfpLoadingBar.start() }
    else if (newValue == 'ready') { cfpLoadingBar.complete() }
})

Though, angular-progress-bar still works in the background. I let active the XHR interceptor. Though, if an XHR requests is completed before the image has loaded, the progress bar disappears even if the views have not finished. As well, if an image has loaded before the XHR request is completed, the progress bar disappears.

How can I integrate the XHR interception capabilities of the angular-loading-bar with this view readiness interception capabilities?