Route loader directive

routeLoaderDirective.js

function routeLoaderCtrl ($rootScope) {
  $rootScope.$on('$routeChangeStart', function (){
    this.routeLoading = true;
  }.bind(this));

  $rootScope.$on('$routeChangeSuccess', function (){
    this.routeLoading = false;
  }.bind(this));
}

function routeLoaderDirective () {
  return {
    restrict: 'E',
    templateUrl: 'route-loader.html',
    controller: 'routeLoaderCtrl',
    controllerAs: 'vm',
    scope: {},
    bindToController: {
      routeLoading:'='
    }
  }
}

angular
  .module('core')
  .controller('routeLoaderCtrl', routeLoaderCtrl)
  .directive('routeLoader',routeLoaderDirective);