Ansicht aktualisieren, nachdem AJAX-Aufruf erfolgreich war und Daten zurückgibt

Question

Ich bin ein Anfänger, der an einer Rezeptsuch-App arbeitet, die eine Liste von Rezepten basierend auf den Zutaten zurückgibt, die der Benutzer in die Suchleiste eingibt. Ich lerne, Angular zu verwenden, da es bequem ist und meinen Code handhabbarer macht.

Bis jetzt ist es mir gelungen, jQuery AJAX GET-Anfragen an die API meiner Datenbank zu stellen und eine Liste von JSON-Objekten zurückgeben zu lassen.

Hier ist mein Eckige Controller Erklärung:

var recipesData = []; // variable that will hold the returned data 
    angular 
     .module("awesomeapp") 
     .controller("listController", listController); 

    function listController() { 
     var vm = this; 
     vm.data = recipesData; 
    } 

Und ich habe Sachen in vm.data an anderer Stelle angezeigt meiner Meinung nach.

Das Problem ist, wenn vm.data auf recipesData eingestellt ist, enthält es noch nichts, weil die Seite gerade geladen wurde, der Benutzer nichts eingegeben hat und noch keine Daten zurückgegeben werden.

Was soll ich tun, damit vm.data nach dem Ajax-Aufruf gesetzt werden kann? Oder kann es außerhalb der listController-Funktion gesetzt werden?

Ich bin auf der Suche nach einer eleganten Lösung, damit alles einfacher zu warten ist. Danke :)

Answer 1

Der richtige Weg, dies zu tun, ist nicht jQuery verwenden und Angulars $ http-Service verwenden, um die Daten abzurufen. Der noch geeignetere Weg, dies zu tun, besteht darin, einen eigenen Dienst zu erstellen, der Angulars $ http-Dienst intern verwendet, um die Daten zu erhalten.

Also zuerst würden Sie den Dienst erstellen. Etwas wie folgt aus:

angular 
     .module("awesomeapp") 
     .service("recipeService", recipeService); 

function recipeService($http) { 
    return $http.get(**url**) 
} 

Dann Ihren Controller wie etwas aussehen:

function listController (recipeService) { 
    var vm = this; 
    recipeService.then(response) { 
     vm.data = response.data 
    } 
} 

Sie werden wahrscheinlich auf Ihrem Service mehr Dinge haben schließlich, aber das sollten Sie in die richtige Richtung bekommen. Ich empfehle dringend, auf John Papas Angularjs-Style-Guide https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md zu verweisen, um Anleitungen zum Strukturieren Ihrer App zu erhalten. Sie möchten versuchen, die Verwendung von jQuery mit Angular im Allgemeinen zu vermeiden, aber insbesondere möchten Sie vermeiden, es für Dinge zu verwenden, die Angular nativ ausführt.