main banner

Development

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 providing 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 can we 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


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 probably it will 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 in 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

index.html
   This is a very simple page, in the head section of the page we declare the version of the angular framework that we are going to 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 that allows us to iterate over a collection.

   The next thing we need to do is code all the dynamic part that will get the information from our resource and show it on the grid that we coded before: js/app.js

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 that is 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:

index.html

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

code 2

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

   Notice that for the table we are including a new Angular directive called ng-class-even, 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

code 3

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

final table 


Rubén M.

Ruben has been one of Inflection Point’s key members for many years; born in Mexico City, he strongly believes there are quesadillas without cheese. He would describe himself as a movie fan, avid music listener, hardcore F.C. Barcelona fan and keen comic books and science fiction novels reader. He has a B.S. in Computer Science and is a full-stack developer being Java his favorite flavor.

Articles