Angular JS HTTP Communication

In earlier post we understood just about basic facts about how to configure controller in angular JS. In this post we will concentrate on how to send HTTP requests and consume  the JSON response.

Example for  HTTP request

We will be using Yahoo’s query API for getting stock details. i.e. https://query.yahooapis.com/v1/public/yql

We need to also attach following query parameters to the above URL.

  • q= YQL query (it is SQL like query to fetch details. More information on Yahoo developer network
  • format= JSON
  • diagnostics=true
  • env=store
  • Callback

YQL for fetching data for YAHOO (YHOO).

Replacing $scope. scriptcode=YHOO

select * from yahoo.finance.quotes where symbol in (‘+’\”+$scope.scriptcode+’)

Complete URL for getting  stock details

 var query=’select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22’+’\”+$scope.scriptcode+‘%22)&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback’;
url=url+’?q=’+query;

What we want to do?

We will offer a search facility to the end-user where users can give stock symbol.

searchWhen a user provides stock symbol and click search then the system will give call to yahoo server and fetch the response in JSON to display stock details in the following way.

search_resultView layer (HTML)

 JS and CSS dependency

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js”></script&gt;
    <script src=”angularjsHttpCall.js”></script>
    <link href=’http://fonts.googleapis.com/css?family=Amaranth:400,400italic&#8217; rel=’stylesheet’ type=’text/css’>
    <style>
            body {font-family: ‘Amaranth’, sans-serif;}
            table, th , td {border: 1px solid grey;border-collapse: collapse;padding: 5px;}
            table tr:nth-child(even) {background-color: #f1f1f1;}
            table tr:nth-child(odd) {background-color: #ffffff;}
            table th {background-color: #A0AFD8;color:F9F7F7;}
            button {background-color: #A0AFD8;  border-radius: 5px;font-style: italic; text-decoration: underline;}
            input{border-radius: 5px; font-style: italic;}
    </style>

We are adding google fonts. In order to add different fonts, please visit https://www.google.com/fonts

ng-app, ng-controller

<body ng-app=”angularJSHTTPCallModule” ng-controller=”angularJSHTTPCallController”>

Search form

<div>Stock Quote</div>
      <div>
             <form name=”stockQuoteForm”>
                            <input type=”text” required placeholder=”scriptcode” class=”form-control”    ng-model=”scriptcode”>
                            <button ng-click=”getScriptDetails()” type=”button” class=”btn btn-primary”>Search</button>
             </form>
       </div>

By looking at above code two important attributes (directives) highlighted. More information about all available directives here

  •  ng-model- this directive will bind input value and make it available in the controller
  • ng-click – it will trigger a function on click event

Search result

<table     ng-show=”scriptDetails”>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>symbol</th>
                        <th>LastTradePriceOnly</th>
                        <th>Ask</th>
                        <th>Bid</th>
                        <th>AverageDailyVolume</th>
                        <th>Currency</th>
                        <th>LastTradeDate</th>
                        <th>LastTradeTime</th>
                        <th>DaysLow</th>
                        <th>DaysHigh</th>
                        <th>YearLow</th>
                        <th>YearHigh</th>
                        <th>PE Ratio</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{scriptDetails.query.results.quote.Name}}</td>
                        <td>{{scriptDetails.query.results.quote.symbol}}</td>
                        <td>{{scriptDetails.query.results.quote.LastTradePriceOnly}}</td>
                        <td>{{scriptDetails.query.results.quote.Ask}}</td>
                        <td>{{scriptDetails.query.results.quote.Bid}}</td>
                        <td>{{scriptDetails.query.results.quote.AverageDailyVolume}}</td>
                        <td>{{scriptDetails.query.results.quote.Currency}}</td>
                        <td>{{scriptDetails.query.results.quote.LastTradeDate}}</td>
                        <td>{{scriptDetails.query.results.quote.LastTradeTime}}</td>
                        <td>{{scriptDetails.query.results.quote.DaysLow}}</td>
                        <td>{{scriptDetails.query.results.quote.DaysHigh}}</td>
                        <td>{{scriptDetails.query.results.quote.YearLow}}</td>
                        <td>{{scriptDetails.query.results.quote.YearHigh}}</td>
                        <td>{{scriptDetails.query.results.quote.PERatio}}</td>
                    </tr>
                </tbody>
            </table>

JS

angularjsHttpCall.js

(function() {
    var angularJSHTTPCallModule = angular.module(‘angularJSHTTPCallModule’,[]);
    angularJSHTTPCallModule.controller(‘angularJSHTTPCallController’,function($scope,$http){
        $scope.getScriptDetails=function(){
            var url=’https://query.yahooapis.com/v1/public/yql&#8217;;
            var query=’select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22’+’\”+$scope.scriptcode+’%22)&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback’;
            url=url+’?q=’+query;
            var response=$http.get(url);
            response.success(function(data, status, headers, config) {
                $scope.scriptDetails=data;
                var js1=JSON.stringify(data);
                console.log(“js12 “+js1);
            });
            
            response.error(function(data, status, headers, config) {
                console.log(“failure “+data+” status “+status+” headers “+headers);
            });
        };
    });
}());

in above code asynchronous successful response available from server is given to success method while error handled with error method.

Advertisements

About polganesh
Software Developer

One Response to Angular JS HTTP Communication

  1. Pingback: Angular JS Service | GANESH POL

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: