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.


Angular JS Controller


In earlier post  we concentrated on the benefits of designing JS in a specific way. In this post we will look at

  • How to configure Angular JS?
  • Configure the controller
  • Important angular JS  specific attributes (directives)
  • Important angular  specific objects eg :- $scope, angular

Configure Angular JS

To work with the core  angular js functionality one needs to include only angular js  in view(jsp, html….)

<script src=””></script&gt;

Configure Controller

Define Module in JS

moduleIn above case empty array indicates no dependency but has implicit dependency with core module.

Attach controller to the module

//Define MyController and attaching it to the module


$scope.message=”Hello Angular”;


In above case $scope is an angular specific object.  Any parameter which starts with $ managed by angular js.

In above case we are attaching message to $scope object. Anything which we are attaching to $scope object will be acting as models.

By looking at this example we can say controller is not directly communicate with a view (html) but it is through the model.

On macroscopic level controller is responsible for

  • Organizing information
  • Control things to visible/hide on view
  • Communicate with remote server to fetch data.

Configure view for module and controller

<!– load angular js from CDN –>

<script src=””></script&gt;

<body ng-app=”myfirstAgnularModule” ng-controller=”MyController”>



Angular js specific attributes/directives and binding expression

These attributes are known as directives

  • ng-app
    • Only one attribute must be present in whole html
    • Whenever angular js find this attribute. It will bootstrap itself.
  • ng-controller
    • One page can have multiple ng-controller directives
    • It must be defined at the same level or at child level of ng-app
  • Binding expression
    • In the above case {{message}} acts as binding expression
    • Binding expression helps displaying model data to view.


opComplete Example


(function() {
    var myfirstAgnularModule = angular.module(‘myfirstAgnularModule’,[]);
        $scope.message=”Hello Angular”;


<script src=””></script&gt;
<script src=”myFirstAngularExample.js”></script>
<body ng-app=”myfirstAgnularModule” ng-controller=”MyController”>

Pre Angular JS

Target Audience: – Beginner

Angular JS is a Java script open source framework from Google and downloadable from

Important concepts  before start playing with Angular JS

Angular is  based on following important concepts

  • Using function expression instead of the function declaration
  • Functions for  encapsulation
  • Using modules for functions
  • Avoid using global variables

Function expressions VS function declaration

Function declaration
  • As variable declaration starts with var function declaration starts with function.
  • The JS object created same as a function name. In following case object with name myFunction created.
  • Function declaration  parsed and executed before any other expressions.
function myFunction(){
console.log (“I am in myFunction”);

Function expression

Assign function to variable.
By doing this, one can dynamically change call to the function.
Used inside function to make encapsulation and code more and more modular

var myWork=function(){
console.log(“myWork Invoked”);

Function expressions are of two types
An anonymous function expression

var myWork=function(){
console.log(“myWork Invoked”);

Named function expression
var myWork=function myWorkFunction(){
console.log(“myWork Invoked”);

Functions for encapsulation

function expression offer better facility for encapsulation
Consider the following simple example

//Step 1: – concentrate on implementation logic: -Function expression with global variable myProcess
var myProcess=function myProcessF(){

var preProcess=function(){
console.log(“in preProcess”);

var postProcess=function(){
console.log(“in postProcess”);

var doProcess=function(){
console.log(“in process”);
// Some private function which  used internally
var somePrivateFunction=function(){
console.log(“some internal function”);

//Expose functions and variable which  used outside this function: Good example of encapsulation

//Invoke Function
var process =myProcess();

When this code executed it give the following output.


Avoid creating Global variables

By looking at above example, we can see that myProcess is a global variable. These types of variables are candidate for overriding hence one needs to avoid creating global variables with the help of IIFY

(function() {
// The code here  executed once in its own scope

%d bloggers like this: