Making API Calls in AngularJS using Angular's $http service

This article demonstrates how to use AngularJS to make HTTP requests to a remote API and update the view with the JSON response. It leverages Angular's $http service and data binding.

Key Concepts:

• $http.get: Used to send GET requests to the API, including a query string. Responses are stored in models (details and related in this example).
• ngModelOptions with debounce: This prevents excessive API calls by delaying model updates (800ms in this case).
• $watch service: Monitors the search model for changes, triggering data fetching.
• Promises with .then(): Modern error handling using promises instead of deprecated .success()/.error() methods.

Project Structure & Code Highlights:

The project uses a modular structure (CSS, JS, partials, index.html). index.html includes the search input (bound to the search model with ng-model and ng-model-options), and ng-include directives to load partial views (main-info.html and related-results.html).

The core logic resides in app.js, specifically the MovieController. The $watch('search', fetch) line ensures that the fetch() function is called whenever the search input changes after the debounce period. fetch() uses $http.get to make two API calls (one for main movie details, one for related movies) to the OMDb API. The responses are then assigned to $scope.details and $scope.related. An update() function handles clicks on related movie titles, updating the search model.

The partial views (main-info.html and related-results.html) use Angular's data binding to display the movie information. main-info.html includes conditional logic (ng-if) to handle loading states and missing poster images. related-results.html iterates through related movies using ng-repeat and calls update() on click.

Improvements & Updates:

The article notes updates made on 2016-01-17, including:

• Replacing setTimeout/clearTimeout with ng-model-options debounce and $watch.
• Updating to use .then() for promise handling.
• Fixing a broken poster image.

Example Code Snippets:

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

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

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

• Conditional image loading in main-info.html:

<img  ng-src="{{ details.Poster=='N/A' ? 'http://placehold.it/150x220&text=N/A' : details.Poster }}" / alt="Making API Calls in AngularJS using Angular&#x27;s $http service" >

The article concludes with a section on frequently asked questions regarding AngularJS HTTP service and API calls, covering error handling, request cancellation, data transmission, header settings, JSONP, request/response transformations, caching, synchronous requests, and global error handling. A CodePen demo is also linked.

The above is the detailed content of Making API Calls in AngularJS using Angular's $http service. For more information, please follow other related articles on the PHP Chinese website!