Tech Junkie Blog - Real World Tutorials, Happy Coding!: AngularJS SPA : Preparing AngularJS For Banking Application

Saturday, June 25, 2016

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




The source code for the app.js file should look like the following

'use strict';

angular.module('bankApp',['bankController']);


The code above defines the application name 'bankApp', and the modules that the application is dependent on ['bankController'] in this case the application is dependent on the bankController module.  In the next step we will create the controller for the bankApp application


2.  Add a folder in the "js" folder and call it "controllers" then create a file call "bankController.js" in the "controllers" folder and source code for the file should look like the following


'use strict';

angular.module('bankController',[])
 .controller('bankController',["$scope",function($scope){
  $scope.bankAppName="ACME Bank";
}]);


The code above registers a new module called bankcontroller with no dependencies.  The controller itself passes in the angular object $scope.  The $scope object in angular act as a conduit between the view and the controller.  Meaning anything that is defined in the $scope object is accessible in the view (.html) page.  In the example above we defined a variable in the $scope object call "bankAppName".  Since it's defined in the controller we can now access the data from our view (index.html) page.  Now we are ready to make some changes to our "index.html" page to make this an angularJS SPA application.

3.  The source code file "index.html" should look like the following

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>ACME Bank</title>
 <link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
<script type="text/javascript" src="js/lib/angular/angular.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/bankController.js"></script>
</body>
</html>

The code above provides the plumbing for our SPA application.  It's written using the HTML5 template format so that it is HTML5 compliant.  The app.css contains all the styles associated with the application, the "angular.js" file contains the angularJS library framework.  The "app.js" file contains the JavaScript codes that will be used for this application.  The "controller.js" file contains the controller for the application.

AngularJS uses the MVC framework, Model-View-Controller.  Basically they all work together to make the application work.  In a simple explanation the model is the data, the view is what the users see, and the controller is the flow of the application.  The next step is the define our application in the app.js file.

4.  Open up the "index.html" file and make sure the source code looks like the following.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>ACME Bank</title>
 <link rel="stylesheet" type="text/css" href="app.css">
</head>
<body ng-app="acmeBank" ng-controller="bankController">
{{bankAppName}}
<script type="text/javascript" src="js/lib/angular/angular.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/bankController.js"></script>
</body>
</html>

All we want to see that our $scope.bankAppName AngularJS variable can be accessed in our index.html file.

5. Now open the index.html file in a browser to see that AngularJS is set up correctly




In this tutorial we've taken care of the plumbing in an AngularJS application.  We gave created a module, associate a controller, define a variable in the controller's scope and then display the scope variable in a view.  We basically have all of the AngularJS app components working.

githubhttps://github.com/techjunkiejh/ACMEBank/tree/Setup

8 comments:

  1. The day spa, which has been deliberately intended to make a feeling of warmth and joyful unwinding, helps a sumptuous pool, restorative hydrotherapy pool, sauna and steam rooms inventive wellness suite and studio, and Rasul mud room, just as a scope of comprehensive spa medications.
    メンズエステ出張

    ReplyDelete
  2. The Best Essay Writing Service in The UK We created a dynamic and flexible system that allows students from all over the UK a

    ReplyDelete
  3. This is a very nice one and gives in-depth information. I am really happy with the quality and presentation of the article. I’d really like to appreciate the efforts you get with writing this post. Thanks for sharing.Java training in Bangalore

    ReplyDelete
  4. Hello, I would like to thank you for sharing this useful material. The info related to banking applications might be useful for those who are interested in this sphere. While studying at university I had an economy course and thanks to the source I found online I managed to do my excel homework https://mid-terms.com/do-my-excel-assignment/ on time and pass my project successfully

    ReplyDelete
  5. Oh guys! This is it! I know how cool it is so vhek this essay writer for you adn be the best!Enjoy your day and be happy my freind! Love it! This is very nice! Good lcuk!

    ReplyDelete

Search This Blog