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
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
} 