4

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>
iLemming
  • 34,477
  • 60
  • 195
  • 309

1 Answers1

3

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'])

maxisam
  • 21,975
  • 9
  • 75
  • 84
  • too bad this is the only working solution I have found so far. – maxisam Nov 06 '12 at 19:29
  • Ok, I try to make it as simple as possible. You only need to do 2 steps – maxisam Nov 06 '12 at 19:54
  • sorry I still feel myself kinda lost here... can you show me a simple example where I have some text when the page loads, and then on the callback of resource's get method it hides.. – iLemming Nov 06 '12 at 22:12
  • Do you check the 2nd example ? You pretty much don't need to do anything if you use my version. only 2 thing. 1. Add a tag 2 Add module name LoadingModule – maxisam Nov 06 '12 at 22:15
  • I'm too new to angular to get all that $scope and $watch stuff. Maybe soon I can get that all, but right now I need to understand simply how to have some text on the page load and then how to hide it on successful get – iLemming Nov 06 '12 at 22:27
  • modified your code like: angular.module('VideoStatus', ['ngResource','LoadingModule']) , and add < div data-loading> < /div> to your html. And link loading.js and modal.js from my example . You are done. You don't need to know $watch or anything – maxisam Nov 06 '12 at 22:36
  • How about this, post your working code to plunker and I will fix it for you – maxisam Nov 06 '12 at 22:38
  • here, can you please show me on this example? http://plnkr.co/edit/8lQERI?p=preview I'd appreciate that indefinitely – iLemming Nov 06 '12 at 23:04
  • thank you man... you're offering me a ready-made solution. I'm gonna use that for now, but I'm gonna need to take some time and learn about $httpProvider and interceptors. I didn't expect that answer to my question would be a lil bit complicated, given the fact how angular makes everything else so simple – iLemming Nov 07 '12 at 15:57
  • btw... you didn't tell me how to start loading the data right away on the pageload... not on button click :) – iLemming Nov 07 '12 at 20:09
  • It is right away on the pageload if there is any post get etc. – maxisam Nov 07 '12 at 20:13
  • no I mean it gets data from twitter only on button click... how can I force it onPageload instead? – iLemming Nov 07 '12 at 20:17
  • Oh I got it! I got it!.. I gotta use `ng-init`! Yay! – iLemming Nov 07 '12 at 20:32