A Step-by-Step Tutorial for Your First AngularJS App | Simple Interest Calculator

Hello Friends , This tutorial is designed to understand the basics of angularJS terminology & Step by Step explanation of how to write and run first simple Interest Calculator AngularJS application for beginners.

Basically AngularJS is a Javascript MVC framework created by Google to build properly design and maintain web applications. this type of applications does not have a main method. It supports modular approach. Here Modules are used to separate logic say services, controllers, application etc. We can define modules in separate js files and name them as per the module.js file. These modules can be loaded in any order or even in parallel. You can package code as reusable modules.

AngularJS supports MVC design pattern as shown in figure below.


In this figure, view represents user interface , user action to get input & pass events to controller. Controller maps user actions to model after fetching data. Model is application functionality containing business logic for generating response on data & binds response to view.  finally view renders it as output.

What is AngularJS Directives ?

AngularJS has a set of built-in directives which offers functionality to your applications.The directives can be placed in element names, attributes, class names, as well as comments. It is a function which executes when the compiler encounters it. AngularJS directives are extended HTML attributes with the prefix ng- . The important & frequently required directives are ng-app, ng-model, ng-controller.

What is bootstrapping ?

Here ng-app is directive to auto-bootstrap an application. It indicates either the part of the page or whole page is the root of the Angular application. It reads the HTML within that root and compiles it into an internal representation. This reading and compiling process is the bootstrapping process for AngularJS. there is only one ng-app directive can be used per HTML document.

Example : <html ng-app> for whole page or <div ng-app> for specific part of page.

What is Data binding in AngularJS ?

It is the synchronization between the model and the view. It Binds the content of an HTML element to application data. You can use the ng-bind directive to bind the innerHTML of the element to the specified model property. You can also use double braces {{  }} to display content from the model. You can use the ng-model directive for two way binding from the model to the view on HTML controls & vice versa. This happens immediately and automatically, which makes sure that the model and the view is updated.

What is Angular Controllers ?

It defines a controller as the ng-controller=”TestController”. Here TestController function is a JavaScript function. AngularJS will invoke the controller with a $scope object. In AngularJS, The scope is the binding part between the HTML (view) and the JavaScript (controller). The scope is an object with the available properties and methods. The scope is available for both the view and the controller.

Let see a example of simple Interest Calculator, which inputs amount , rate and interest and calculates interest amount.

step 1 : import script

<script src= "http://ajax.googleapis.com/ajax/libs/angular.min.js"></script>

Above code import angular.min.js file which holds the directive functionality. Even you can download this file in current directory.

step 2: define ng-app & controller

<div ng-app="TestFirstApp" ng-controller="TestCtrl"><br>

Above code defines ng-app as TestFirstApp and ng-controller as TestCtrl for partial page div.

step 3: define controller function

var app = angular.module('TestFirstApp', []);
app.controller('TestCtrl', function($scope) {
$scope.amt = 50000;
$scope.terms = 1;
$scope.rate= 10;
$scope.interestamt= function() {
return ($scope.amt*$scope.rate*$scope.terms)/100; 

Above code defines custom business logic function as interest calculation.

Step 4: design user interface & bind output variable.

Simple Interest Amount: {{"$." + interestamt()}}

Above code is in view to display calculated value as output. here interestamt is output variable.

Here you can download SIMPLE-INTEREST-CALCULATOR-ANGULARJS.zip (329 downloads) . This code has some internal css for formatting . The Output of this code is shown in screen shot.


Thanks !

You can ask queries on mail : [email protected]

For Validation in AngularJS – Simple Form validation in AngularJS | Introduction & Example

One Comment

  1. Great tutorial. You have explained very well about how to create simple Interest Calculator using AngularJS as well as what is AngularJS. Using AngularJS has many benefits like Improved Design Architecture, Promotes Code Re-usability, Better Plug & Play Components, Allows Parallel Development , Allows Controls to Developers and Faster application development

Leave a Reply

Your email address will not be published.