jquery - getelementsbyclass - document queryselector angular element

AngularJS-Icono de carga mientras se espera el cálculo de datos/datos

Question

Tengo un simple http.get angular:

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

Ejemplo .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,
}

Me di cuenta de que cuando mi página realiza una .length, a veces puede llevar un tiempo que se carguen los datos, por ejemplo:

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

¿Angular tiene algún tipo de icono de espera / carga que podría mostrar mientras se están llenando los datos en el DIV?

Lo ideal es algo ligero y que no requiera que se cargue una biblioteca (mi aplicación también usa jQuery)

Gracias

Answer 1

Este es mi enfoque habitual. Para el punto de OZ_, esto requiere Font Awesome . Las clases de <i> fa fa-spinner fa-spin son una referencia a esa biblioteca.

Aunque, también puede optar por mostrar / ocultar un .gif que indique la carga.

Margen

Usando ng-hide y ng-show para controlar la visibilidad del spinner y el elemento que contendrá los datos poblados.

<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

Antes de su llamada, configure $scope.dataLoaded en false . Luego, dentro de tu bloque de success , configúralo en true . También vale la pena señalar que tendrá que pasar $scope a su fábrica.

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 no es un marco CSS. Puede encontrar iconos de carga en TWBS de FontAwesome: http://fortawesome.github.io/Font-Awesome/examples/#spinning