Saturday, 25 October 2014

Angular.js - Live grid updates using interval - Beginner

It has been a long time I looked at this space due to ‘no time’ [I believe this is a polite excuse for being lazy :-) ].
I heard a lot about Angluar.Js ,SignalR etc.. so thought of getting my hands on those frameworks.Being hard core windows developer/architect and spend most of the time compiling strongly typed languages,coding in Java script was little bit strange.After sometime I just let it go and believed in hidden 'dynamic' helping hand.     

Here is my first 15 min attempt to update a grid using '$interval'. (Disclaimer:- Data shown on grid is far from reality)

copy index.html,style.css,script.js  ; code is straightforward try it out.

I believe it's worth mentioning two code editors i) Bracket ii) Sublime text i found during my learning process.


 <!doctype html>  
      <html ng-app="demoModule">  
           <head><title>This is a Angular.js Live update sample </title>  
           <script src=""></script>  
           <link rel="stylesheet" type="text/css" href="" />  
     <link rel="stylesheet" type="text/css" href="style.css" />  
           <script src=""></script>  
           <script type="text/javascript" src=""></script>            
           <script src="script.js"></script>            
           <body ng-controller='SimpleController'>       
                     <input ng-click='Start()' type='button' value='Start!'/>  
                  <input ng-click='Stop()' type='button' value='Stop!'/>              
                     <input type='text' ng-model='newStock.Id'/>  
                  <input ng-click='AddStockId()' type='button' value='Add'/>              
                 <div class="gridStyle" ng-grid="gridOptions"/>       


 var module1 = angular.module('demoModule',['ngGrid']);  
 module1.controller('SimpleController',['$scope', '$interval',              
           function ($scope,$interval)  
                $scope.Stocks =  
                      {name:'Google', high:25, low:30,close:28},  
                      {name:'MSFT', high:25, low:30,close:28},  
                      {name:'Apple', high:25, low:30,close:28},  
                      {name:'Infosys', high:25, low:30,close:28},  
                      {name:'Exxon', high:25, low:30,close:28},  
                      {name:'Tesco', high:25, low:30,close:28}            
                  {field:'name', displayName:'Name'},   
                  {field:'high', displayName:'High'},  
                  {field:'low', displayName:'Low'},  
                  {field:'close', displayName:'Close'}  
                $scope.gridOptions =  
                     data : 'Stocks',  
                $scope.AddStockId = function()  
                     var newStockDetails = { name:$scope.newStock.Id,high:0,low:0,close:0}  
                var promise;  
                $scope.Start = function()   
                          if ( angular.isDefined(promise) ) return;  
                          promise =$interval(function()  
                               for(var i=0;i<$scope.Stocks.length;i++)  
                                    var curStock = $scope.Stocks[i];                                     
                                    curStock.low = curStock.low + Math.random();  
                                    curStock.high = curStock.high + Math.random();  
                                    curStock.close = (curStock.high + curStock.low)/2;  
                           }, 1000);                                
                $scope.Stop = function()  
                          if (angular.isDefined(promise))  
                               promise = undefined;  
                         // Make sure that the interval is destroyed too  


 .gridStyle {  
   border: 1px solid rgb(212,212,212);  
   width: 400px;   
   height: 300px