Angular JS Service
July 19, 2015 Leave a comment
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
- writing business logic
- 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.
user click on add to watch list system will add stock in watch list.
In view(html) use
- stockSearchWatchListController.js :-JS for searching stock and adding it to watchlist
- yahooFinanceYQLAPIService.js :-
- Service for communicating with remote server on http.
- Caching common data required for searching and watchlist activities.
- we are using google font
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js”></script>
<script src=”stockSearchWatchListController.js”></script>
<script src=”yahooFinanceYQLAPIService.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>
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.
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’;
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’;
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>
About polganesh
polganesh
GANESH POL 