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)

спасибо

6
angularjs angularjs-directive angularjs-scope get jquery

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');
            });
        }
    }
});
13

AngularJS не является CSS-фреймворком. Вы можете найти иконки загрузки в TWBS of FontAwesome: http://fortawesome.github.io/Font-Awesome/examples/#spinning

1