Consuming a Rest Service with Angular

An example of how to consume a REST service simulating that it will return the results in a JSON format. Angular JS is a structural Framework made by Google for dynamic web applications. It is compatible with HTML5 and helps provide the functionality to make a web page dynamic using bidirectional data binding relying on an MVC architecture.

In this article, we are going to review an example of how we can consume a REST service simulating that it will return the results in a JSON format.

First, we have our file that will simulate the response from a REST service in a JSON format: imdb_movie_chart.json

This file contains the first top ten movies ordered by rating according to www.imdb.com/chart/top

Take into consideration that you should run everything inside a Web Server, or this resource won’t load properly, and it will probably throw an error like “Cross origin requests are only supported for HTTP.” This error is thrown because you are trying to load the resource using a local path on your computer.

Next, we’ll have a web page that will consume this content and show it in an HTML table; this page should look like this: index.html

This is a very simple page; in the head section of the page, we declare the version of the angular framework we will use; the resource dependency is also needed to work with RESTFul services. And we are going to declare all the Angular logic in a file called app.js.

Inside the table section, we need to bind the controller that will handle the response from the REST service; we call it imdbMovieChartCtrl. And inside the table rows, we are going to be printing out the contents using the directive ng-repeat, which allows us to iterate over a collection.

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

Next, we need to code all the dynamic parts that will get the information from our resource and show it on the grid that we coded before: js/app.js. 

We declared a module called “myApp” that matches the one defined in the index.html component for the ng-app directive. The “ngResource” is the required module that provides interaction support with RESTFul services via the $resource service.

The $resource service is accessed by a factory that will construct a new service using a function with one argument: the $resource service. The return value of this function is the service instance created by the factory (ImdbMovieChart).

In the $resource service, we need to define the name of the resource we are trying to access, this can be a file, like in this case, or it could be a URL. The usage for $resource is:  $resource(url, [paramDefaults], [actions], options);

In this case the url is just the name of the JSON file imdb_movie_chart.json, the paramDefaults are empty (these are default parameters for the URL), the actions are {query: {method:’GET’, params:{resourceName:’imdb_movie_chart’}, isArray: true}, and the options are empty.

The declaration of the actions are in the form: {action1: {method:?, params:?, isArray:?, headers:?, …} where action is query (this method is part of the default set of actions), method is GET, params contains the name of the resource, and isArray is true because the object returned for this action is an array.

Now for the controller using the same module we have previously declared we can set up an initial state of the $scope object by calling the query method of the service instance created by the factory ImdbMovieChart.

This will produce the following result when from the Web Server we call index.html:

If we want to enhance the looks from the table, we could add a stylesheet to the index.html:

The styles.css is included, and the table headers are begun to be replaced by a <th> tag instead of <td>. We are adding a new div before the table with a class “datagrid.”

Notice that we are including a new Angular directive called ng-class-even for the table. This will work in conjunction with ng-repeat and affect only the even rows of the table with the class “alt” from the stylesheet previously declared. There is also another directive, ng-class-odd, that affects the odd rows of a table if you want to try it out. css/styles.css

Once the styles are applied, the table will look a lot better: