Mehrere AngularJS-get-Anfragen in einem Modell

Einführung

Ich bin Recht neu in AngularJS, so ist diese Lösung sehr viel, so ein work-in-progress. Ich vermute, dass, da hab ich Sie kämpfte sich durch das lernen mehr darüber, dass Sie anderen Menschen in der gleichen position wie gut. Mit dieser sagte, ich werde nicht nur nach meiner Antwort, sondern auch erklären, mein Gedanke hinter dem code. Ich würde gerne ein feedback, wenn jemand fühlt sich die Antwort verbessert werden kann jeder.

Endgültige Code

Hier ist der code, den ich verwendet, um alles zu arbeiten:

var app = angular.module('myApp', []);

app.controller('DropboxCtrl', function($scope, dropbox) {
    $scope.dropboxAccounts = dropbox.getAccounts();
    $scope.dropboxFiles = dropbox.getFiles();
});

app.factory('dropbox', function($http, $q) {
    var theUIDS = [12345,67890];

    return {
        getAccounts: function() {
            var promises = [];

            for(i = 0; i < theUIDS.length; i++) {
                promises.push($http({
                    url: '/dropbox/accounts/get', 
                    method: "GET",
                    params: { uid: theUIDS[i] }
                }));
            }

            return $q.all(promises);
        },
        getFiles: function() {
            var promises = [];

            for(i = 0; i < theUIDS.length; i++) {
                promises.push($http({
                    url: '/dropbox/files/get', 
                    method: "GET",
                    params: { uid: theUIDS[i] }
                }));
            }

            return $q.all(promises);
        }
    }
});

Grundlegende Algorithmus

Beginnen wir mit der Deklaration eines Moduls myApp und speichern es in eine variable app... beachten Sie das leere array-wir vorbei, das wäre normalerweise ein parameter für alle weiteren Anforderungen, die können oder können nicht vererbt werden von anderen Modulen.

Nachdem unser Modul deklariert ist, brauchen wir einen entsprechenden controller, der als gateway für alle Interaktionen stattfinden. In diesem Fall benötigen wir Zugriff auf die $scope Variablen, die im Vergleich zu unseren controller (nicht in Bezug auf die app selbst). Wir auch erklären, was dieses Werk controller verknüpft ist, in meinem Fall ist es dropbox (wir bekommen, um Fabriken in einem moment). Innerhalb dieser controller vergeben wir zwei Modelle zu $scope: dropboxAccounts und dropboxFiles. Beachten Sie, dass mein ursprünglicher Wunsch war es, ein Modell in meinem AngularJS app. Solange dies möglich ist... ich entschied mich dagegen, denn ich fand es schwer zu differenzieren, meine beiden Typen von JSON zurückgibt auseinander. Gibt Konto Metadaten und die andere gibt ein array von Dateien von diesem Konto. Ich hätte gerne all diese unter einem Modell und sortiert werden, durch eine uid parameter, aber festgestellt, dass dies unmöglich zu tun, ohne zu verändern, was JSON meine RESTful-Endpunkte ausgegeben. Am Ende entschied ich mich für zwei separate Modelle, so kann ich mit Ihnen arbeiten zu erleichtern (bis ich einen Weg finden, Sie zu kombinieren, nach einem gemeinsamen parameter).

Schließlich, wir erstellen eine Fabrik, die speichert meine AJAX-Funktionen (mit $http für die eigentliche AJAX-Aufrufs, und $q für die Handhabung der verspricht). Ich habe zwei Funktionen: (denken Sie daran, die aufgerufen werden, von meinem controller) getAccounts und getFiles. Jeder von Ihnen hat ein array mit dem Namen verspricht gespeichert wird, verspricht meiner $http Anrufe. Ich Laufe durch diese ruft in einer for-Schleife, die sich bei jedem meiner Artikel in theUIDS, die in meinem AJAX-Aufrufs, und ist dann darauf geschoben promises array. Am Ende haben wir unsere $q die warten, bis alle AJAX-Aufrufe in der promises array erfolgreich abgeschlossen hat, vor der Rückgabe alle Daten in einem großen Versprechen zurück zu unserem controller und die Zuordnung zu $scope.

Was Ich Gelernt Habe,

AngularJS ist wirklich hart. Diese Frage hat mich zwei Tage zu Debuggen und zu versuchen, wieder und wieder. Mir wurde gesagt, dass, während die Lernkurve für diese front-end-MVC-framework ist ziemlich steil, die Belohnung ist es Wert. Ich nehme an, wir werden sehen...

Ressourcen

• AngularJS API
• Fabriken und Dienstleistungen-Vergleich
• Gute Verwendung von AngularJS ist all Methode
• Schöne Erklärung von AJAX verspricht sowohl in jQuery und AngularJS