Download ajax style data

Question

I started learning angular.js. Can you guys show me the correct way to make a page that initially presents the ajax loader element that says “Data loading” or something like that. Then, after the data has been received, it will update the view and hide the element. I can put stuff in a page load event using jquery, but how do you do it using pure angular? So far I have figured out how to do this in the 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 and Peter Bacon Darwin

Here is a working plunker

Here is my version of plunker that do the download as a directive with a modal popup function

Here is a tutorial for using my version

you only need load.js and modal.js and jQuery and twitterbootstrap css links.

in your code

Only two steps you need to follow with your code.

• Add the following code in HTML

  <div data-loading> </DIV>

• Add the LoadingModule module to your application module.

  angular.module ('YourApp', ['LoadingModule'])