Getting Started with Angular.js

I’ve been playing with angular.js for a couple of hours, and I’m pretty impressed. I’ve quickly put together a very simple trading screen, with only 80 lines of HTML and 57 of JavaScript.

The HTML contains a table for the pricefeed, a simple Ticket and a table for the trades, all are databound through Angular to Javascript objects. An angular directive “ng-show” causes the ticket to appear when a row is selected in the price feed. Another “ng-show” causes the list of trades to appear when a trade is made. “ng-click” is used to bind events to functions.
<!DOCTYPE html>
<html ng-app="">

<head>
  <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="stockTrader.js"></script>
</head>

<body class="container">
  <div ng-controller="stockTraderController">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h2>Price Feed</h2>
      </div>
        <table class="table table-striped table-bordered table-hover">
          <thead>
            <tr>
              <th>Symbol</th>
              <th>Company</th>
              <th>Bid Price</th>
              <th>Ask Price</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="stock in stocks" ng-click="selectStock(stock)">
              <td>{{stock.symbol}}</td>
              <td>{{stock.name}}</td>
              <td>{{stock.bidPrice}}</td>
              <td>{{stock.askPrice}}</td>
            </tr>
          </tbody>
        </table>

    </div>
    <div class="panel panel-primary" ng-show="selectedStock">
      <div class="panel-heading">
        <h2>Ticket: {{selectedStock.name}}</h2>
      </div>
      <div class="panel-body">
        <div class="col-md-3">
          Bid Price: {{selectedStock.bidPrice}}
        </div>
        <div class="col-md-3">
          AskPrice : {{selectedStock.askPrice}}
        </div>

        <div class="col-xs-3">
          <button class="btn btn-success" ng-click="buy()">Buy</button>
        </div>
        <div class="col-xs-3">
          <button class="btn btn-danger" ng-click="sell()">Sell</button>
        </div>
      </div>
    </div>

    <div class="panel panel-success" ng-show="hasTrades()">
      <div class="panel-heading">
        <h2>Trades <span><button class="btn btn-success btn-small" ng-click="clearTrades()">Clear</button></span></h2>
        
      </div>
        <table class="table table-striped table-bordered table-hover">
          <thead>
            <tr>
              <th>Symbol</th>
              <th>Price</th>
              <th>Side</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="trade in trades">
              <td>{{trade.symbol}}</td>
              <td>{{trade.price}}</td>
              <td>{{trade.side}}</td>
            </tr>
          </tbody>
        </table>
    </div>

  </div>

</body>

</html>

The JavaScript:

function stockTraderController($scope) {
  $scope.stocks = [
    new stock("MSFT", "Microsoft", 50, 49, 0),
    new stock("GOOG", "Google", 40, 39, 0),
    new stock("APPL", "Apple", 30, 29, 0)
  ];

  $scope.trades = [];

  $scope.selectedStock = null;

  $scope.buy = function() {
    var symbol = $scope.selectedStock.symbol;
    var price = $scope.selectedStock.bidPrice;
    var side = "Buy";
    $scope.trades.push(new trade(symbol, price, side));
  };

  $scope.sell = function() {
    var symbol = $scope.selectedStock.symbol;
    var price = $scope.selectedStock.askPrice;
    var side = "Sell";
    $scope.trades.push(new trade(symbol, price, side));
  };

  $scope.hasTrades = function() {
    var result = $scope.trades.length > 0;
    return result;
  };

  $scope.clearTrades = function() {
    $scope.trades = [];
  }

  $scope.selectStock = function(stock) {
    $scope.selectedStock = stock;
  };
}

function stock(symbol, name, bidPrice, askPrice, quantity) {
  this.symbol = symbol;
  this.name = name;
  this.bidPrice = bidPrice;
  this.askPrice = askPrice;
  this.quantity = 0;
  return this;
}

function trade(symbol, price, side) {
  this.symbol = symbol;
  this.price = price;
  this.side = side;
  return this;
}

 

 

image

A working version is at http://plnkr.co/VOa8x5

Advertisements

About John

Software developer, lately specialising in Full Stack Web Development using c#, ASP.Net WebAPI 2, and Angular.
This entry was posted in Development and tagged . Bookmark the permalink.

Leave a Reply

Please log in using one of these methods to post your comment:

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