Question

I jsut started learning angular.js. Can you guys show me the right way to make a page that initially presents an ajax loader element saying ‘Loading data’ or something like that. Then after data’s been fetched it would update the view and hide the element. I can put stuff in page load event using jquery, but how do you do that using pure angular? So far I figured out how to put that in click event:

<div ng-app="VideoStatus" ng-controller="VideoStatusCtrl">
    <button ng-click="getVideos()">get videos</button>
</div>
<script type="text/javascript">
    angular.module('VideoStatus', ['ngResource']).run(function(){ 
       // I guess somehow I can start fetching data from the server here, 
      //  but I don't know how to call Controller methods passing the right scope 
    });

    function VideoStatusCtrl($scope, $resource) {
        $scope.videoStatus = $resource('/Videos/GetStatuses', { callback: 'JSON_CALLBACK' });

        $scope.getVideos = function () {
            $scope.videoResult = $scope.videoStatus.get();
            console.log('videos fetched');
        };
    };
</script>

Answer 1

Kudos to Adam Webber & Peter Bacon Darwin

Here is the working plunker

Here is my version plunker that make loading as a directive with modal popup feature

Here is the tutorial to use my version

you only need loading.js and modal.js and reference jQuery and twitterbootstrap css.

in your code,

Only 2 steps you need to do with your code.

1. Add the following code to HTML

   < div data-loading> < /div>

2. Add LoadingModule module to your application module.

   angular.module(‘YourApp’, [‘LoadingModule’])