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.
Here is the code we change in the bankController.js filefunction 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;}
(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: </span>{{account.balance | currency}}</span></div><div class="offset-8"><button class="btn btn-primary">Transfer</button> <button class="btn btn-primary">Deposit</button> <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: </span>{{account.balance | currency}}</span>
</div>
<div class="offset-8">
<button class="btn btn-primary">Transfer</button>
<button class="btn btn-primary">Deposit</button>
<button class="btn btn-primary">Widthdrawal</button>
</div>
</div>
Now we are ready to run the application, open the application folder in a command prompt and type npm start to start expressjs
If you type http://localhost:3000 in the browser you will the accounts in the index.html page
github: https://github.com/techjunkiejh/ACMEBank/tree/BusinessObjects
Previous: AngularJS SPA: Building The Bank Application JavaScript Objects (Business Entities)
Are you searching for the best hyip template design online? Don't worry. You can find your own template design with a cheap rate only on besthyiptemplate
ReplyDeletei am very impres of your post.
ReplyDeletehttps://grfreightservices.com/
Hi, Thank you have shared such a very important information and some amazing sites. Thanks for sharing with us.
ReplyDeleteI am glad to see such coding related helpful information. Thanks a lot.
ReplyDeletehttps://yappobd.com
Nice !It was very informative. Thank you
ReplyDeletehttps://proweb365.com/website-design/
Liên hệ Aivivu, đặt vé máy bay tham khảo
ReplyDeletevé máy bay đi Mỹ giá bao nhiêu
chuyến bay mỹ về việt nam
đăng ký vé máy bay từ nhật về việt nam
chuyến bay từ frankfurt đến hà nội
vé máy bay từ Toronto về việt nam
vé máy bay từ hàn quốc về việt nam bao nhiêu tiền
Chi phi cho chuyen gia nuoc ngoai