Loading data ajax style
angularjs, javascript
Solution
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.
Add the following code to HTML
< div data-loading> < /div>
Add LoadingModule module to your application module.
angular.module('YourApp', ['LoadingModule'])
Problem
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> ```