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);
        }]);

})();

AngularJS SPA: Agile Development With User Stories

In our previous post we created some mockups, now we are going to create some user stories so that we can started development with some idea of what should be included in the application.  This is just a quick planning session.

We'll pretend like we are running a Sprint, we can think of this as a very loose Sprint planning.

Sprint 1 User Stories;

• As a user I should be able to view my accounts. (2 pts)
• As a user I should be view my user profile. (1 pt)
• As a user I should be able to view my account details. (2 pts)
• As a user I should be able to view my past transactions. (1 pt)
• As a user I should be able to view my upcoming transactions ( 1 pt)
• As a user I should be able to search my transactions (2 pts)

AngularJS SPA: ACME Bank Mockups

In the previous post we created the JavaScript business objects in our AngularJS application.  While that's great and all we should we really take a step back create some rough mockups of our banking application so that we will know what we will be building.

First let's mock up the home page:























On our home page we have a profile section were we can access our account/profile. Then we have the ACME bank logo/branding, and finally the accounts that we have in the bank.

The next mock-up is the the Accounts Details page, when we click on one of the accounts:





























As you can see from the mock-up it's pretty straightforward.  You have an identification of the account, then a display of upcoming  transactions, and past transactions.  There's also a search box for searching of transactions.

Finally we have the Money Transfer screen which enables the users to transfer money into and out of the account.  It just has the basic information, where the money is coming from, where it's going to, the transfer date, the amount and the transfer button.




















As you can see the mock-up is pretty simple and easy to change.  Actually it's just pen and paper.  I am a big fan of low-fidelity design.  Meaning simple and low effort.  We can change it anytime.

Previous: AngularJS SPA: Building The Bank Application JavaScript Objects (Business Entities)

AngularJS SPA: Building The Bank Application JavaScript Objects (Business Entities)

Up until this point all we did was take care of the plumbing, MongoDB for the database, AngularJS as the application framework, expressJS for hosting, and Heroku as deployment infrastructure in the cloud. Whew! It feels like I am spitting out development hastags and buzzwords.  But, you know what they always say "it takes a village to build a SPA application".  Well they didn't say that, but they should! Who are they anyways?  The software engineer gods?  Or god forbid the mythical "full stack developers!!  Fear them the full stack developers!  But I don't know who they are, you ask.  Well they are just awesome! God says.  They are 10x!  Wow 10x, you said to yourself.  They must be good!  Hahaha  I just love the buzzwords.  It's entertaining.  I would never say I am a full stack developer.  I am just a developer who knows a lot of stuff.

In this post we are going to take a step back and start working on the actual application and take the plumbing out of the equation for a while.

As with any application at the center of it all is the question.  What does the application do?
Since our application is banking application, we will create objects that are in the banking domain.  This is called a domain driven design.  We are not going to follow the domain driven design (DDD) to a T, but we will follow the spirit of it.

AngularJS SPA: Install RoboMongo GUI for MongoDB

In this post we will be installing the RoboMongo user interface for MongoDB.  The advantage of a GUI is that you can see the documents in MongoDB visually also there is a validate future that is quite useful when you make changes to the data.

Here are the steps to install RoboMongo:

1.  Go to https://robomongo.org/download and click on the "Download" button

AngularJS SPA: Deploy Bank Application To Heroku

The previous blog post we setup our application to work with Heroku locally.  In this post we will deploy our application to the live Heroku platform.

Here are the steps to deploy our application to Heroku:

1.  First we need to check in our code into a local Git repository to add our code to Git is easy first type git init

AngularJS SPA: Setup The Banking Application For Heroku And Testing It Locally

In this blog post we will setup our AngularJS SPA application for Heroku and testing it locally to make sure we got all our ducks in a row if you need a refresher for how to setup Heroku you can visit this post.  By deploying to Heroku we can access our application online making our application live.

Here are the steps to deploying the AngularJS shopping application to Heroku:

1.  Find out the node and npm version you have installed on your machine by typing in the following command

node --version
npm --version

AngularJS SPA: Setup Express To Serve Static Files

In the previous blog we setup the folder structure to use the Jade view engine just to make sure Express is working correctly.  In this blog post we are going to tell Express to serve file static files as well in our app folder.  In the previous part when we browse to http://localhost:3000 we get the "Express" index page.  Using a view engine is a preference that some people have, but I feel more comfortable developing in HTML.

Installing Heroku Terminal on Windows

Heroku is a service provider that you can use to host your Node application quickly.  In this blog post I will how you how to install Heroku on a Windows machine.

Here are the steps to setup Heroku on a Windows machine:

1.  Go to heroku.com and sign up for a free account, follow the instruction on the page
2.  Download the Heroku toolbelt from the Heroku website at http://toolbelt.heroku.com

AngularJS SPA: Creating The SPA Project Folder Structure

Now that we have express installed let's do a little clean up and organization by creating some folders that we need.  First of all create the models and controllers folder inside the app folder your folder should look like the following

AngularJS SPA: Installing ExpressJS Application Server

In our AngularJS SPA application we will be using the Express web server to serve up our web application.  In the previous blog post we installed the Express-generator globally.  Now we can install Express in the root folder of our SPA application.

Here are the steps to create an Express application:

1.  Open the command line prompt at the root folder of the SPA application

AngularJS SPA : Installing Express generator

In order to install the Express web server on the fly on your machine you need to install the Express generator.  Fortunately with NodeJS it is as easy as typing in a command in the command line.  This step used to install Express globally so that it will be easy for development.

Here are the steps to install Express generator globally:

1.  Open up the command line and type in the following command
     npm install -g express-generator

   

AngularJS SPA : Install MongoDB as a Windows Service

In the previous blog post we created a configuration file for our MongoDB database in this post we will install MongoDB as a Windows service so that we don't have to start the service in the command line every time we want to use it to save development time.

Here are the steps to install MongoDB:

1.  Open the command prompt as an "Administrator"

2.  Change the mongo-db-config.conf file to use absolute paths.  You can get the instructions on how to create a MongoDB configuration file in this blog post

            dbpath = C:\techjunkie\mongodb\db
            logpath = C:\techjunkie\mongodb\mongo-db-server.log
            verbose = vvvvv

if the folder dpath folder does not exists in Windows create the folder "db" inside the "mongodb" folder, else the service start will fail

AngularJS SPA: Create a MongoDB Configuration File

In the previous blog post be installed mongoDB now, we are going to create a configuration file for mongoDB to use during startup.

In this configuration file we will specify the following:

• location of the data files
• log file path
• the verbosity of the log file

AngularJS SPA : Installing MongoDB

Now that we have our AngularJS environment set up we need a database.  We are going to use MongoDB as a database.  MongoDB is a NoSQL database which is a perfect fit for JavaScript centric applications that we are building.  To install MongDB go to https://www.mongodb.com/download-center?jmp=nav#community to make sure you are installing the "Community Edition" of MongoDB.  On the "Community Server" tab select the operating system that you will be installing MongoDB in, then click on the "Download button.

ASP.NET Core : Add jQuery, Bootstrap, AngularJS Using bower.json

In this blog post we are going to add the jQuery, AngularJS, and bootstrap libraries to our ASP.NET Core application.  Normally we will use NuGet to bring in these libraries but ASP.NET Core gives you the option to use bower to configure the dependencies that you will need on the client-side.

Here are the steps to import the client-side dependencies into our project:

1. First let's make bower.json part of the "NorthwindCafe.Web" project, click on the "Show All Files" icon in solution explorer, then right click on the bower.json file, and then choose "Show in Solution Explorer"

2.  Open the bower.json file the markup should look like this

{
 "name": "asp.net",
 "private": true,
 "dependencies": {
 }
}

AngularJS SPA : Refactor Code to Not Use Global Variables (Bank App)

In the previous blog post we got AngularJS to work with a module and a controller.  However, we put everything in the global scope.  The problem with that is that there are many JavaScript libraries that might be using the same variables as we are, or if we are working with other developers, there might be some unforeseen conflicts.  The way we can mitigate this problem is to wrap our modules and controllers in an anonymous function.  Think of an anonymous function as a wrapper or a container to hold our modules and controllers.  Another term developers like to refer to anonymous function is an IIFE.  Whatever it's called it's always good practice to avoid putting things in the global environment if it can be avoided.
Here are the steps to take the modules and controllers out of the global environment:

1.  First let's wrap the module in an anonymous function.  The source code for the app.js file should look like the following

(function(){
    'use strict';

    var app = angular.module('bankApp',['bankController']);
    
})();

The code above wraps the application in anonymous function and assigned to the variable call "app"

AngularJS SPA : Preparing AngularJS For Banking Application

The previous blog post we setup the AngularJS folder structure and pulled in the necessary dependencies using bower. In this post we are going to add AngularJS to our application. We will app an AngularJS application and controller to our simple banking application.

Here are the steps to setup AngularJS in our application.

1.  Create an app.js file in the app/js folder, app.css in the app/css folder

Use Bower to Get Client Dependencies

Bower is a JavaScript tool to get client dependencies in your project using npm packages.

The requirement for bower is that you need to install Node.js first.  You can follow along in the this blog to install node.js, After node.js is installed open the command line and type the following command

npm install -g bower

AngularJS SPA : Setting Up ACME Bank

In this blog we are going to create an AngularJS application from scratch we would go step by step and create every file from scratch.

Step-By-Step Instructions:

1. Create an application folder call ACME Bank with the following structure, don't worry about the bower.json and the .bowerrc file yet.