Angular JS HTTP Communication
July 12, 2015 1 Comment
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
What we want to do?
We will offer a search facility to the end-user where users can give stock symbol.
When 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.
View layer (HTML)
JS and CSS dependency
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js”></script>
<script src=”angularjsHttpCall.js”></script>
<link href=’http://fonts.googleapis.com/css?family=Amaranth:400,400italic’ 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’;
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.
About polganesh
polganesh
GANESH POL 
Pingback: Angular JS Service | GANESH POL