Angular.js

Login redirection using AngularJS & UI-Router

Angular.js

Angular

When a user follows a link on an email to the site, but needs to login before they can view the page, you need to remember the requested page and return to it after a successful login.

In the following code examples, I’m using an AuthenticationService which handles user login, and stores authentication state.

First on the landing page, you need to store the current router state and the params needed to get back to the specific page.

if (!AuthenticationService.isAuthenticated) {
$cookies.loginDestination = $state.$current.name;
$cookies.loginParams = { id: $stateParams.id};
$state.transitionTo("Login");
};

In the AuthenticationService, after a successful login:

var loginDestination = $cookies.loginDestination || '/';
var loginParams = $cookies.loginParams || null;
$cookies.loginDestination = null;
$cookies.loginParams = null;
$state.transitionTo(loginDestination, loginParams);

Advertisements

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