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.

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 where symbol in (‘+’\”+$scope.scriptcode+’)

Complete URL for getting  stock details

 var query=’select%20*’+’\”+$scope.scriptcode+‘%22)&format=json&diagnostics=true&’;

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=””></script&gt;
    <script src=”angularjsHttpCall.js”></script>
    <link href=’,400italic&#8217; rel=’stylesheet’ type=’text/css’>
            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;}

We are adding google fonts. In order to add different fonts, please visit

ng-app, ng-controller

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

Search form

<div>Stock Quote</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>

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”>
                        <th>PE Ratio</th>



(function() {
    var angularJSHTTPCallModule = angular.module(‘angularJSHTTPCallModule’,[]);
            var url=’;;
            var query=’select%20*’+’\”+$scope.scriptcode+’%22)&format=json&diagnostics=true&’;
            var response=$http.get(url);
            response.success(function(data, status, headers, config) {
                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
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: Logo

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

Facebook photo

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

Connecting to %s

%d bloggers like this: