AngularJS - Laden-Symbol, während Sie warten auf Daten/Daten-Berechnung

Habe ich eine einfache Eckige http.erhalten:

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

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

Habe ich bemerkt, wenn meine Seite eine .Länge, manchmal kann es eine Weile dauern, bis die Daten geladen werden, zum Beispiel:

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

Nicht Eckig haben irgendeine form von warte - /lade-Symbol, dass ich zeigen konnte, während die Daten im DIV wird aufgefüllt?

Idealerweise etwas leichtes und, dass nicht verlangen, eine Bibliothek geladen werden (meine Anwendung ist die Verwendung von jQuery zu)

Dank

InformationsquelleAutor Oam Psy | 2014-05-06

  1. 13

    Dies ist meine übliche Vorgehensweise. Zu OZ_ Punkt, dies erfordert Font Awesome. Die <i>'s Klassen fa fa-spinner fa-spin sind eine Referenz auf die Bibliothek.

    Obwohl, Sie könnte auch entscheiden, ein - /ausblenden .gif angibt laden.

    Markup

    Mit ng-hide und ng-show Steuern Sie die Sichtbarkeit der spinner und das element, das enthalten Ihre ausgefüllten Daten.

    <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

    Vor Ihrem Anruf, set $scope.dataLoaded zu false. Dann, in Ihrem success block, legen Sie es auf true. Auch erwähnenswert, werden Sie brauchen, um passieren $scope zu Ihrem Werk. 

    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');
            });
        }
    }
});
    vielen Dank, jedoch sehe ich diesen Fehler: - Fehler: [$Injektor:unpr] errors.angularjs.org/1.2.8/$Injektor/...
    Aye, wie etwa $rootScope statt $scope?

    InformationsquelleAutor couzzi

  2. 1

    AngularJS ist nicht ein CSS-framework. Finden Sie das laden von icons in TWBS von FontAwesome:
    http://fortawesome.github.io/Font-Awesome/examples/#spinning

    InformationsquelleAutor OZ_

Schreibe einen Kommentar