Faire des appels API dans AngularJS en utilisant le service Angular & # x27; s $ http

Cet article montre comment utiliser AngularJS pour faire des demandes HTTP à une API distante et mettre à jour la vue avec la réponse JSON. Il exploite le service $http du service et de la liaison des données d'Angular.

Concepts clés:

• $http.get: Utilisé pour envoyer des demandes Get à l'API, y compris une chaîne de requête. Les réponses sont stockées dans les modèles (details et related dans cet exemple).
• ngModelOptions avec debounce: Cela empêche les appels API excessifs en retardant les mises à jour du modèle (800 ms dans ce cas).
• $watch Service: surveille le modèle search pour les modifications, déclenchant la récupération des données.
• Promesses avec .then(): Gestion des erreurs modernes en utilisant les promesses au lieu de les méthodes dégronchées .success() /. Erreur ().

Structure du projet et Code Faits saillants:

Le projet utilise une structure modulaire (CSS, JS, partiels, index.html). index.html inclut l'entrée de recherche (liée au modèle search avec ng-model et ng-model-options), et ng-include directives pour charger des vues partielles (main-info.html et related-results.html).

.

La logique principale réside dans app.js, en particulier le MovieController. La ligne $watch('search', fetch) garantit que la fonction fetch() est appelée chaque fois que l'entrée de recherche change après la période de débouchement. fetch() utilise $http.get pour passer deux appels API (un pour les détails du film principal, un pour les films connexes) à l'API OMDB. Les réponses sont ensuite attribuées à $scope.details et $scope.related. Une fonction update() gère les clics sur les titres de films connexes, la mise à jour du modèle search.

Les vues partielles (main-info.html et related-results.html) utilisent la liaison des données d'Angular pour afficher les informations du film. main-info.html inclut la logique conditionnelle (ng-if) pour gérer les états de chargement et les images d'affiches manquantes. related-results.html itère à travers des films connexes en utilisant ng-repeat et des appels update() en clic.

Améliorations et mises à jour:

Les mises à jour des notes de l'article effectuées le 2016-01-17, y compris:

• Remplacement setTimeout / clearTimeout avec ng-model-options Débouncez et $watch.
• Mise à jour pour utiliser .then() pour la manipulation des promesses.
• Fixation d'une image d'affiche cassée.

Exemple d'extraits de code:

• ng-model et ng-model-options dans index.html:

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

• fetch() Fonction dans 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; });
}

• Chargement conditionnel d'image en main-info.html:

<img  ng-src="{{ details.Poster=='N/A' ? 'http://placehold.it/150x220&text=N/A' : details.Poster }}" / alt="Faire des appels API dans AngularJS en utilisant le service Angular & # x27; s $ http" >

L'article se termine par une section sur les questions fréquemment posées concernant le service AngularJS HTTP et les appels API, couvrant la gestion des erreurs, l'annulation des demandes, la transmission des données, les paramètres d'en-tête, JSONP, les transformations de demande / réponse, la mise en cache, . Une démo de codepen est également liée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!