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.

index.html 

 <!doctype html>  
      <html ng-app="demoModule">  
           <head><title>This is a Angular.js Live update sample </title>  
           <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>  
           <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />  
     <link rel="stylesheet" type="text/css" href="style.css" />  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>  
           <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>            
           <script src="script.js"></script>            
           </head>  
           <body ng-controller='SimpleController'>       
                <div>                                     
                     <input ng-click='Start()' type='button' value='Start!'/>  
                  <input ng-click='Stop()' type='button' value='Stop!'/>              
                 </div>   
                <div>                                     
                     <input type='text' ng-model='newStock.Id'/>  
                  <input ng-click='AddStockId()' type='button' value='Add'/>              
                 </div>  
                </br>  
                 <div class="gridStyle" ng-grid="gridOptions"/>       
                </br>  
           </body>  
      </html>  


script.js

 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}            
                     ];                   
            $scope.colDefs=  
                 [  
                  {field:'name', displayName:'Name'},   
                  {field:'high', displayName:'High'},  
                  {field:'low', displayName:'Low'},  
                  {field:'close', displayName:'Close'}  
                 ];  
                $scope.gridOptions =  
                {   
                     data : 'Stocks',  
                     columnDefs:$scope.colDefs        
             };       
                $scope.AddStockId = function()  
                {  
                     var newStockDetails = { name:$scope.newStock.Id,high:0,low:0,close:0}  
                     $scope.Stocks.push(newStockDetails);  
                }            
                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;  
                                    $scope.Stocks.splice(i,1,curStock);   
                               }  
                           }, 1000);                                
                     };  
                $scope.Stop = function()  
                     {  
                          if (angular.isDefined(promise))  
                          {  
                               $interval.cancel(promise);  
                               promise = undefined;  
                          }  
                     };  
                $scope.$on('$destroy',   
                     function()   
                          {  
                         // Make sure that the interval is destroyed too  
                                $scope.Stop();  
                           });  
      }]);  


style.css

 /*style.css*/  
 .gridStyle {  
   border: 1px solid rgb(212,212,212);  
   width: 400px;   
   height: 300px  
 }