AngularJS-значок загрузки в ожидании данных / расчета данных
у меня есть простой угловой http.получить:
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');
});
}
}
});
пример .В 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,
}
Я заметил, когда моя страница выполняет .длина, иногда это может занять некоторое время для загрузки данных, например:
<div>
<a>Countries</a> : {{Countries.length}}
</div>
имеет ли Angular какую-то форму значка ожидания/загрузки, который я мог бы показать, пока данные в DIV заполняются?
В идеале что-то легкое и не требует загрузки библиотеки (мое приложение использует jQuery too)
спасибо
2 ответов
это мой обычный подход. К точке OZ, это требует Шрифт Удивительным. The <i>
'ы классы fa fa-spinner fa-spin
- это ссылка на эту библиотеку.
хотя, вы также можете выбрать, чтобы показать/скрыть .gif
это указывает на загрузку.
разметки
используя ng-hide
и ng-show
для управления видимостью блесны и элемента, который будет содержать ваши заполненные данные.
<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
перед вызовом установите $scope.dataLoaded
to false
. Тогда, внутри вашего success
блок, установите его в true
. Также стоит отметить, что вам нужно будет пройти $scope
к вашей фабрике.
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');
});
}
}
});
AngularJS не является CSS-фреймворком. Вы можете найти иконки загрузки в TWBS of FontAwesome: http://fortawesome.github.io/Font-Awesome/examples/#spinning