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