AngularJS - Loading icon whilst waiting for data/data calculation
Solution 1
This is my usual approach. To OZ_'s point, this requires Font Awesome. The <i>
's classes fa fa-spinner fa-spin
are a reference to that library.
Although, you could also opt to show/hide a .gif
that indicates loading.
Markup
Using ng-hide
and ng-show
to control visibility of the spinner and element 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, within your success
block, set it to true
. Also worth noting you'll 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');
});
}
}
});
Solution 2
AngularJS is not a CSS-framework. You can find loading icons in TWBS of FontAwesome: http://fortawesome.github.io/Font-Awesome/examples/#spinning
Oam Psy
Updated on June 11, 2022Comments
-
Oam Psy almost 2 years
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've noticed when my page is performing a .length, sometimes it can take a while for the data to load, for example:
<div> <a>Countries</a> : {{Countries.length}} </div>
Does Angular have some form of waiting/loading icon that i could show whilst the data in the DIV is being populated?
Ideally something lightweight and that doesnt require a library to be loaded (my application is using jQuery too)
Thanks
-
Oam Psy about 10 yearsthanks, however i am seeing this error: Error: [$injector:unpr] errors.angularjs.org/1.2.8/$injector/…
-
couzzi about 10 yearsAye, how about
$rootScope
instead of$scope
?