AngularJS - Icon loading pending data / data calculation

Question

I have a simple Angular http.get:

app.factory('countriesService', function($http) { return { getCountryData: function(done) { $http.get('/resources/json/countries.json') .success(function(data) { done(data);}) .error(function(error) { alert('An error occured'); }); } } }); 

Example .JSON:

 { "NoCities": 66, "Balance": 2103, "Population": 63705000, "CityInfo": [ { "CityName": "London", "CityPopulation": "7825200", "Facts": { "SubFact1": "xzy", "SubFact2": "xzy", "SubFact3": "xzy", "SubFact4": "xzy", "SubFact5": "xzy" }, }, { "CityName": "Manchester", "CityPopulation": "2584241", "Facts": { "SubFact1": "abc", "SubFact2": "abc", "SubFact3": "abc", "SubFact4": "abc" }, } ], "SubmitInfo": null, "FormAction": null, "FormController": null, } 

I noticed that when my page runs the .length, it may sometimes take a while to load the data, for example:

 <div> <a>Countries</a> : {{Countries.length}} </div> 

Does Angular have a wait / load form icon that I could show while the data in the DIV is populating?

Ideally, something is lightweight and does not require loading a library (my application also uses jQuery)

thanks

Answer 1

This is my usual approach. For the OZ_ point, this requires an Awesome font . The <i> fa fa-spinner fa-spin classes are a reference to this library.

Although you can also select / hide the .gif , which indicates a download.

Markup

Using ng-hide and ng-show to control the visibility of the counter and the item that will contain your populated data.

 <p class="text-center" ng-hide="dataLoaded"> <i class="fa fa-spinner fa-spin"></i> </p> <div ng-show="dataLoaded"> <a>Countries</a> : {{Countries.length}} </div> 

Js

Before your call, set $scope.dataLoaded to false . Then, in your success block, set it to true . It's also worth noting that you need to pass $scope to your factory.

 app.factory('countriesService', function($http, $scope) { return { getCountryData: function(done) { $scope.dataLoaded = false; $http.get('/resources/json/countries.json') .success(function(data) { done(data); $scope.dataLoaded = true; }) .error(function(error) { alert('An error occured'); }); } } }); 

Answer 2

AngularJS is not a CSS framework. You can find the download icons in TWBS FontAwesome: http://fortawesome.imtqy.com/Font-Awesome/examples/#spinning