Implementare un indicatore di caricamento è un'operazione relativamente semplice in AngularJS.
Possiamo utilizzare un elemento che viene mostrato solo quando esiste una determinata condizione:
<body ng-app="MyApp">
<div id="results" ng-controller="MyCtrl">
<div id="loader" ng-show="!dataLoaded">Loading...</div>
<ul id="list" ng-cloak>
<li ng-repeat="item in data">
{{data.name}}
</li>
</ul>
</div>
</body>
Il codice JavaScript:
var app = angular.module('MyApp', []);
app.controller('MyCtrl', ['$scope', '$http', function($scope, $http) {
$scope.dataLoaded = false;
$scope.data = [];
$http.get('/api/data').then(function(response) {
$scope.dataLoaded = true;
$scope.data = response.data;
}, function(response) {
});
}]);