Tech Junkie Blog - Real World Tutorials, Happy Coding!: AngularJS SPA: Show Bank Accounts With $scope and Controller

Tuesday, September 24, 2019

AngularJS SPA: Show Bank Accounts With $scope and Controller

In our last post we created our business entities, in this post we are going to use our business objects to display information to the users. I this post we are going to show the accounts to the users. In the previous posts we have been setting up the environment the plumbing sort of speak. Starting now we are going to build the application. The first thing we want to do is counter-intuitive, we are going to take the database out of the equation and start using mock data to get so that we can see how our application will run.

In our previous post we created some user stories. In this post we are going to work on one of the stories:

As a user I should be able to view my accounts. (2 pts)

It's a simple process, but we know exactly what we have to do with user stories. It's a different mindset than the traditional requirements. The typical requirement that you are used to seeing is

1.1.1 System shall allow the user to view his/her accounts

It's basically saying the same thing, but the first one the user stories is in plain English and it's a lot easier to comprehend. You can take it to the business user, the web designer, or the web developer and it's easily understood. That's the benefit of Agile development.

First let's take the Iffe out of the account.js file so that it's easier to work with and then we want to make changes to the bankController.js file

Here is how the account.js file should now look like.

function Account(balance, type) {
    this.balance = balance;
    this.type = type;
}

Account.prototype.deposit = function (d) {

    this.balance = this.balance + d;
    return this.balance;
}

Account.prototype.withdrawal = function (w) {
    this.balance = this.balance - w;
    return this.balance;
}


function inherits(baseClass, childClass) {
    childClass.prototype = Object.create(baseClass.prototype);
}

function Premium(balance, type) {
    this.balance = balance + (balance * .05);
    this.type = type;
}


inherits(Account, Premium);

Premium.prototype.transfer = function (from, to, amount) {
    from.balance -= amount;
    to.balance += amount;
    from.rebalance();
    to.rebalance();
}

Premium.prototype.deposit = function (d) {
    this.balance = this.balance + d;
    this.balance = this.balance + (this.balance * .05);
    return this.balance;

}
Premium.prototype.rebalance = function () {
    this.balance += this.balance * .05;
}

Here is the code we change in the bankController.js file

(function () {
    'use strict';

    angular.module('bankController', [])
        .controller('bankController', ["$scope", function ($scope) {
            $scope.accounts = [new Account(1000, 'Checking'), new Account(10000, 'Saving'), new Premium(100000, 'Premium Checking')];
            console.log($scope.accounts);
        }]);

})();

The code above uses our business object Account and Premium to create accounts and assign it to a $scope object that can be accessed in the view.

Now we need to change the index.html file to display the accounts, here is the code for the index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Acme Bank</title>
    <link href="js/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Quicksand:400,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body ng-app="bankApp" ng-controller="bankController">
    <div class="row">
        <div class="col-sm-8 offset-2">
            <div class="jumbotron bg-info" ng-repeat="account in accounts">
                <div class="col-sm-4">
                    <span class="account-heading">{{account.type}}</span><br />
                    <span class="italic-text-label">Balance:&nbsp;</span>{{account.balance | currency}}</span>
                </div>
                <div class="offset-8">
                    <button class="btn btn-primary">Transfer</button>&nbsp;&nbsp;
                    <button class="btn btn-primary">Deposit</button>&nbsp;&nbsp;
                    <button class="btn btn-primary">Widthdrawal</button>
                </div>
            </div>
        </div>
    </div>
    <script src="js/lib/bootstrap/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/lib/angular/angular.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <script src="js/models/account.js"></script>
    <script type="text/javascript" src="js/controllers/bankController.js"></script>
</body>
</html>

Most of the markup is bootstrap and I use Google Fonts to make the fonts look better. The important thing you need to know is that you need to link the js files that you need

    <script src="js/lib/bootstrap/dist/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="js/lib/angular/angular.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <script src="js/models/account.js"></script>
    <script type="text/javascript" src="js/controllers/bankController.js"></script>

Else the page will not work. The next you want to look at is the <body ng-app="bankApp" ng-controller="bankController"> tag this tag basically says everything inside the body tag uses is part of bankApp, and uses the bankController. The $scope variable is the mechanism that ties the controller with the view in this case the .html page. The next anularjs decorator is the ng-repeat tag which iterates through a collection of JavaScript objects. In our case we are looping through the accounts

        <div class="jumbotron bg-info" ng-repeat="account in accounts">

  <div class="col-sm-4">
      <span class="account-heading">{{account.type}}</span><br />
      <span class="italic-text-label">Balance:&nbsp;</span>{{account.balance | currency}}</span>
  </div>
  <div class="offset-8">
      <button class="btn btn-primary">Transfer</button>&nbsp;&nbsp;
      <button class="btn btn-primary">Deposit</button>&nbsp;&nbsp;
      <button class="btn btn-primary">Widthdrawal</button>
  </div>
</div>