Angular JS Service

Introduction

in previous post we concentrated on how to consume json data from server. i.e.  user provide stock symbol in search box and and click on search button.

in this post we will add one more functionality i.e. adding stock to watch list(although stock data is not updated but we will check how to auto refresh this data in next post.)

Need for Service

Irrespective of programming language service provide following benefits

  1. writing business logic
  2. writing common code which can be reused by multiple controllers

apart from this in angular js it provide one more benefit i.e. caching of data which can be accessed by multiple controllers, giving http call.

UI

User provide stock symbol and click search.

search_result

user click on add to watch list system will add stock in watch list.

bookMark

In view(html) use

  1. stockSearchWatchListController.js  :-JS for searching stock and adding it to watchlist
  2. yahooFinanceYQLAPIService.js :-
    1. Service for communicating with remote server on http.
    2. Caching common data required for searching and watchlist activities.
  3. we are using google font

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js”></script&gt;
        <script src=”stockSearchWatchListController.js”></script>
        <script src=”yahooFinanceYQLAPIService.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>

Create module in stockSearchWatchListController.js

//define module named stockModule
var stockModule = angular.module(‘stockModule’,[]);

Create yahooFinanceYQLAPIService and register it in module

Create default implementation  of 

var yahooFinanceYQLAPIService=function($http){

//default implementation

}; 

 Register service with module.

 var module=angular.module(“stockModule”);

module.factory(“yahooFinanceYQLAPIService”,yahooFinanceYQLAPIService);

stockSearchWatchListController.js

//define module named stockModule
var stockModule = angular.module(‘stockModule’,[]);
//replace $http with yahooFinanceYQLAPIService since yahooFinanceYQLAPIService is taking care of http communication
stockModule.controller(‘myStockSeachController’,function($scope,yahooFinanceYQLAPIService){
    $scope.getScriptDetails=function(){
        console.log(“script details “+$scope.scriptcode);
        var response=yahooFinanceYQLAPIService.getScriptsDetails($scope.scriptcode);
        response.success(function(data, status, headers, config) {
                $scope.scriptDetails=data;
        });
      
        response.error(function(data, status, headers, config) {
                console.log(“failure “+data+” status “+status+” headers “+headers);
        });
          
    };
   
});

stockModule.controller(‘addStockToWatchListController’,function($scope,yahooFinanceYQLAPIService){
    $scope.addToWatchList=function(){
        console.log(“adding script to watchList”);
        var response=yahooFinanceYQLAPIService.addScriptToWatchList();
        if (response === undefined) {
            return;
        }
        response.success(function(data, status, headers, config) {
                if(data.query.count!=1){
                    $scope.scripts=data.query.results.quote;
                }else{
                    var scriptArray=[];
                    scriptArray.push(data.query.results.quote);
                    $scope.scripts=scriptArray;
                }
        });
      
        response.error(function(data, status, headers, config) {
                console.log(“failure “+data+” status “+status+” headers “+headers);
        });
      
    };
   
 
    });

yahooFinanceYQLAPIService.js

var yahooFinanceYQLAPIService=function($http){
    var latestScriptCode=”;//useful for addScriptToWatchList i.e. shared between both search controller and watchlist controller.
    var getScriptsDetails=function(script){
        var url=’https://query.yahooapis.com/v1/public/yql&#8217;;
        var query=’select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22’+’\”+script+’%22)&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback’;
        url=url+’?q=’+query;
        latestScriptCode=script;
        return $http.get(url);
    };

var watchListScripts=[];
    var addScriptToWatchList=function addScriptToWatchList(){
        if(watchListScripts.indexOf(latestScriptCode)>=0){
            return;
        }
        watchListScripts.push(latestScriptCode);
        console.log(“watchListScripts:- “+watchListScripts.join());
        var url=’https://query.yahooapis.com/v1/public/yql&#8217;;
        var query=’select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22’+’\”+watchListScripts.join()+’%22)&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback’;
        url=url+’?q=’+query;
        return $http.get(url);
    };

    return{
        getScriptsDetails:getScriptsDetails,
        addScriptToWatchList:addScriptToWatchList
    };
}; 

var module=angular.module(“stockModule”);
module.factory(“yahooFinanceYQLAPIService”,yahooFinanceYQLAPIService);

view(html)

    <body ng-app=”stockModule”>
        <div ng-controller=”myStockSeachController” align=”center”>
                <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>
            <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>
            </div>
   
   
    <div ng-controller=”addStockToWatchListController” align=”center”>
        <p>
        <button ng-click=”addToWatchList()” type=”button” class=”btn btn-primary”>AddToWatchList</button>
        </p>
        <div ng-show=”scripts”>
            <table>
                <thead>
                    <tr>
                        <th ng-click=”sortColumn(‘Name’)” >Name</th>
                        <th  ng-click=”sortColumn(‘symbol’)”>symbol</th>
                        <th  ng-click=”sortColumn(‘LastTradePriceOnly’)”>LastTradePriceOnly</th>
                        <th  ng-click=”sortColumn(‘Ask’)”>Ask</th>
                        <th  ng-click=”sortColumn(‘Bid’)”>Bid</th>
                        <th  ng-click=”sortColumn(‘AverageDailyVolume’)”>AverageDailyVolume</th>
                        <th>Currency</th>
                        <th  ng-click=”sortColumn(‘LastTradeDate’)”>LastTradeDate</th>
                        <th  ng-click=”sortColumn(‘LastTradeTime’)”>LastTradeTime</th>
                        <th  ng-click=”sortColumn(‘DaysLow’)”>DaysLow</th>
                        <th ng-click=”sortColumn(‘DaysHigh’)”>DaysHigh</th>
                        <th  ng-click=”sortColumn(‘YearLow’)”>YearLow</th>
                        <th  ng-click=”sortColumn(‘YearHigh’)”>YearHigh</th>
                        <th  ng-click=”sortColumn(‘PERatio’)”>PE Ratio</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat=”sc in scripts”>
                        <td>{{sc.Name}}</td>
                        <td>{{sc.symbol}}</td>
                        <td>{{sc.LastTradePriceOnly}}</td>
                        <td>{{sc.Ask}}</td>
                        <td>{{sc.Bid}}</td>
                        <td>{{sc.AverageDailyVolume}}</td>
                        <td>{{sc.Currency}}</td>
                        <td>{{sc.LastTradeDate}}</td>
                        <td>{{sc.LastTradeTime}}</td>
                        <td>{{sc.DaysLow}}</td>
                        <td>{{sc.DaysHigh}}</td>
                        <td>{{sc.YearLow}}</td>
                        <td>{{sc.YearHigh}}</td>
                        <td>{{sc.PERatio}}</td>
                    </tr>
                </tbody>
        </table>
    </div>
    </div>
   
               
      
</body>
 

 

 

Advertisements

About polganesh
Software Developer

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: