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.