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

Originally published at:

Nowadays, it is commonplace for web apps to communicate with each other via APIs. For example, when you buy movie tickets online, the movie ticket web site uses a remote API to verify your credit card information is correct. In this tutorial I will examine how AngularJS can be used to make HTTP requests to a remote API and how to handle the API’s JSON response so that the view is updated.

Staying with the movie theme, I will demonstrate this by building a movie browser called Fastr, which will fetch a variety of different information about any movie you care to enter. In addition to AngularJS, Fastr will be built using Bootstrap for styling and Animate.css for some snazzy effects.

This is what we’ll end up with:

The code for this project is available from our GitHub repo, or you can view a working demo on CodePen.

The Project Structure

We will be keeping the code in a modular structure as follows:





The file index.html will contain the main view for our app. The majority of it is boilerplate, but let’s examine where the action takes place:

<div class="input-group search-bar">
  <input type="text" 
         placeholder="Enter full movie name" />

<div id="main-info" 

<div id="related-results" 

As you can see, we have used ng-model to bind the input field (where the users will enter the movie name) to the search model (which we will declare in our controller). We have also used the ng-change directive to ensure that every time the input changes a change function will be called in our controller. This function will be responsible for initiating contact with the remote API.

The main-info and related-results divs will be used to display information about the current movie and a list of related movies respectively. The information will be displayed in partials which are fetched, compiled and included by the ng-include directive.

Continue reading this article on SitePoint

Thanks for the nice guide.

One thing I noticed, though, is that the example movie browser is not HTTPS-ready. When I try to run the demo on CodePen my Chromium (w/ HTTPS Everywhere) dev tools console warns me about XHR to an insecure endpoint. Just as a heads up. Once again: Thanks for the nice article.

In the article you said you were going to assign the $http responses for the fetch function to details and related, but in the sample code below it the responses are assigned to list and others. The GitHub repo seems fine though.

Have you heard of or used Resangular? It is pretty nifty for dealing with REST APIs.

Thanks for pointing this out. Unfortunately (as far as I can tell) doesn’t support https

Good catch. Fixed.

Don’t use the pendingTask construct to avoid unnecessary calls.
Angular has on-model-options.
There you can use debounce to update the model in a sensible way, and $watch for changes in the search value.

Has anyone considered how this could best be modified to present a full table listing of movies that match as the name is being typed? I see a few notes about performance. Thx in advance @tanay1337 @m13z

Can this be done in coffeescript and HAML? just curious. tried using coffeescript. but couldn’t get it to work.
Thanks @tanay1337

The poster is not working. Do you have a solution?

Check my recent commits here with the fix:, basically it is a poster image src url issue.

1 Like

im getting the following error when connecting to an API: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. any idea why?

Close to this topic: I’ve wrote an angularjs directive for receiving and displaying data via $http more easy:

This explains it:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.