API -Aufrufe in AngularJs verwenden, indem Sie den HTTP -Service von Angular ' s $

Dieser Artikel zeigt, wie AngularJs verwendet werden, um HTTP -Anforderungen an eine Remote -API zu stellen und die Ansicht mit der JSON -Antwort zu aktualisieren. Es nutzt Angulars $http Service und Datenbindung.

Schlüsselkonzepte:

• $http.get: Wird verwendet, um GET -Anforderungen an die API einschließlich einer Abfragebarstellung zu senden. Die Antworten werden in Modellen gespeichert (details und related in diesem Beispiel).
• ngModelOptions mit debounce: Dies verhindert übermäßige API -Aufrufe, indem Modellaktualisierungen verzögert werden (800 ms in diesem Fall).
• $watch Service: überwacht das search -Modell für Änderungen und löst das Abholen von Daten aus.
• Versprechen mit .then(): moderne Fehlerbehandlung unter Verwendung von Versprechen anstelle von veralteten .success()/. Error ().

Projektstruktur & Code -Highlights:

Das Projekt verwendet eine modulare Struktur (CSS, JS, Partials, Index.html).

Enthält die Sucheingabe (gebunden an das index.html -Modell mit search und ng-model) und ng-model-options Anweisungen zum Laden von teilweisen Ansichten (ng-include und main-info.html). related-results.html

Die Kernlogik liegt in

, insbesondere in der app.js. Die MovieController -Leile stellt sicher, dass die $watch('search', fetch) -Funktion aufgerufen wird, wenn sich die Sucheingabe nach dem Entlassungsperiode ändert. fetch() verwendet fetch(), um zwei API -Anrufe (eine für Hauptfilmdetails, eine für verwandte Filme) in die OMDB -API zu tätigen. Die Antworten werden dann $http.get und $scope.details zugeordnet. Eine $scope.related -Funktion überläuft Klicks auf verwandte Filmtitel und aktualisiert das update() -Modell. search

Die Teilansichten (

und main-info.html) verwenden die Datenbindung von Angular, um die Filminformationen anzuzeigen. related-results.html enthält eine bedingte Logik (main-info.html), um Ladezustände und fehlende Posterbilder zu verarbeiten. ng-if iteriert verwandte Filme mit related-results.html und rufen ng-repeat auf klicken. update()

Verbesserungen und Updates:

In den Artikel informieren Updates am 2016-01-17, einschließlich:

ersetzen
• /setTimeout durch clearTimeout dafunce und ng-model-options. $watch
Aktualisierung, um
• für das Versprechen zu verwenden. .then()
Fixieren eines zerbrochenen Posterbildes.

Beispielcode -Snippets:

• ng-model und ng-model-options in index.html:

<input type="text" ng-model="search" ng-model-options="{ debounce: 800 }" placeholder="Enter full movie name" />

• fetch() Funktion in app.js:

function fetch() {
  $http.get("http://www.omdbapi.com/?t=" + $scope.search + "&tomatoes=true&plot=full")
    .then(function(response) { $scope.details = response.data; });

  $http.get("http://www.omdbapi.com/?s=" + $scope.search)
    .then(function(response) { $scope.related = response.data; });
}

• Bedingte Bildbelastung in main-info.html:

<img  ng-src="{{ details.Poster=='N/A' ? 'http://placehold.it/150x220&text=N/A' : details.Poster }}" / alt="API -Aufrufe in AngularJs verwenden, indem Sie den HTTP -Service von Angular &#x27; s $" >

Der Artikel endet mit einem Abschnitt über häufig gestellte Fragen zu AngularJS HTTP -Dienst und API . Eine Codepen -Demo ist ebenfalls verknüpft.

Das obige ist der detaillierte Inhalt vonAPI -Aufrufe in AngularJs verwenden, indem Sie den HTTP -Service von Angular ' s $. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!