Ich habe eine meiner Meinung nach sehr offensichtliche Frage, aber ich konnte nirgendwo eine Antwort finden.
Ich versuche nur, einige JSON-Daten von meinem Server in den Client zu laden. Im Moment verwende ich JQuery, um es mit einem AJAX-Aufruf zu laden (Code unten).
<script type="text/javascript">
var global = new Array();
$.ajax({
url: "/json",
success: function(reports){
global = reports;
return global;
}
});
</script>
Dies befindet sich in der HTML-Datei. Es funktioniert bisher, aber das Problem ist, dass ich AngularJS verwenden möchte. Während Angular die Variablen verwenden kann, kann ich das Ganze nicht in eine Variable laden, sodass ich für jede Schleife eine verwenden kann. Dies scheint mit dem "$ Scope" zu tun zu haben, der sich normalerweise in der .js-Datei befindet.
Das Problem ist, dass ich keinen Code von anderen Seiten in eine .js-Datei laden kann. Jedes Beispiel von Angular zeigt nur solche Dinge:
function TodoCtrl($scope) {
$scope.todos = [
{text:'learn angular', done:true},
{text:'build an angular app', done:false}];
Dies ist also nützlich, wenn IA) Sie dies alles von Hand eingeben möchten UND B) Wenn ich im Voraus weiß, was alle meine Daten sind ...
Ich weiß es nicht im Voraus (die Daten sind dynamisch) und ich möchte sie nicht eingeben.
Als ich versuchte, den AJAX-Aufruf mithilfe von $ Resource in Angular zu ändern, scheint dies nicht zu funktionieren. Vielleicht kann ich es nicht herausfinden, aber es ist eine relativ einfache GET-Anfrage für JSON-Daten.
tl: dr Ich kann AJAX-Aufrufe nicht zum Laufen bringen, um externe Daten in ein Winkelmodell zu laden.
quelle
Antworten:
Wie Kris erwähnt, können Sie den
$resource
Dienst verwenden, um mit dem Server zu interagieren, aber ich habe den Eindruck, dass Sie Ihre Reise mit Angular beginnen - ich war letzte Woche dort -, daher empfehle ich, direkt mit dem$http
Dienst zu experimentieren . In diesem Fall können Sie dieget
Methode aufrufen .Wenn Sie den folgenden JSON haben
Sie können es so laden
Die
get
Methode gibt ein Versprechungsobjekt zurück , dessen erstes Argument ein Erfolgsrückruf und das zweite ein Fehlerrückruf ist .Wenn Sie
$http
als Parameter einer Funktion hinzufügen, wirkt Angular magisch und injiziert die$http
Ressource in Ihren Controller.Ich habe hier einige Beispiele aufgeführt
quelle
code
Vielen Dank, ich habe stattdessen den $ http-Dienst verwendet ... wenn auch etwas anders ... $ http.get ('/ json'). success (Funktion (Antwort) {$ scope.reports = Antwort; getData ();code
was mich interessiert, ist das Versprechen Objekt ... Ich möchte wirklich mehr darüber erfahren. Ich liebe die Idee davon. Das andere Problem, das ich hatte, ist im Grunde eine Schleife auf der Ajax-Anfrage so zu führen Ich kann die Seite ständig "automatisch" aktualisieren. $ timeout hat bei mir nicht funktioniert.config
,data
,headers
undstatus
. Die Werte in derdata
Eigenschaft sind genau das, was Sie wollen.$scope.todos = res;
oder$scope.todos = res.data;
- der Unterschied ist, ob Sie in einem.then(response)
oder in einem.success(result)
Das.success
ist gegeben,response.data
während das.then
das Ganze gegeben istresponse
.Hier ist ein einfaches Beispiel für das Laden von JSON-Daten in ein Angular-Modell.
Ich habe einen JSON-Webdienst 'GET', der eine Liste mit Kundendaten aus einer Online-Kopie der Northwind SQL Server- Datenbank von Microsoft zurückgibt .
http://www.iNorthwind.com/Service1.svc/getAllCustomers
Es werden einige JSON-Daten zurückgegeben, die folgendermaßen aussehen:
..und ich möchte eine Dropdown-Liste mit diesen Daten füllen, um so auszusehen ...
Ich möchte, dass der Text jedes Elements aus dem Feld "Firmenname" und die ID aus den Feldern "Kunden-ID" stammt.
Wie würde ich das machen?
Mein Angular Controller würde so aussehen:
... die eine "listOfCustomers" -Variable mit diesem Satz von JSON-Daten füllt.
Dann würde ich auf meiner HTML-Seite Folgendes verwenden:
Und das ist es. Wir können jetzt eine Liste unserer JSON-Daten auf einer Webseite sehen, die zur Verwendung bereit ist.
Der Schlüssel dazu liegt im Tag "ng-options":
Es ist eine seltsame Syntax, um den Kopf herumzukriegen!
Wenn der Benutzer ein Element in dieser Liste auswählt, wird die Variable "$ scope.selectedCustomer" auf die ID (das Feld CustomerID) dieses Kundendatensatzes gesetzt.
Das vollständige Skript für dieses Beispiel finden Sie hier:
JSON-Daten mit Angular
Mike
quelle
Ich verwende folgenden Code, der irgendwo im Internet gefunden wurde. Ich erinnere mich jedoch nicht an die Quelle.
quelle