gistfile1.txt

.factory('appLoading', function($rootScope) {
    var timer;
    return {
      loading : function() {                                           // this is the line that gets called when you appLoading.loading(), right?

  Yes. This gets called whenever I want the page to indicate a loading operation. loading() starts sets the animatio flag
which starts the animation icon loading at the top of the app.

        clearTimeout(timer);
        $rootScope.status = 'loading';
        if(!$rootScope.$$phase) $rootScope.$apply();
      },
      ready : function(delay) {                                     // this is what confusses me a ready function inside another
        function ready() {                                               // I do not understand why you are calling ready() again here.
          $rootScope.status = 'ready';
          if(!$rootScope.$$phase) $rootScope.$apply();
        }

  So the ready() function is the actual function that sets the page status to ready, which hides the loading animation.
If there is a dealy then it waits and if there isn't then it runs the ready() function right away.
This is here to make the code reusable so that I don't end up rewriting the code when there is a delay
and when there is not one.

        clearTimeout(timer);
        delay = delay == null ? 500 : false;                // what is the purpose of this delay

The delay is here so that the loading animation won't display and hide right away and then display right
away after another page is there. This way if you call ready() multiple times then it will only remove the
loading animation 500ms after the last time it was called. This way the animation isn't choppy.

        if(delay) {
          timer = setTimeout(ready, delay);
        }
        else {
          ready();                                                            // what is the purpose of calling here the ready

This is here when there is no delay at all.

function
        }
      }
    };
  })