Multiplication of two numbers using AngularJS

In this blog we discuss what is AngularJS and how to multiple two numbers in AngularJS

 

 

AngularJs : AngularJS is a JavaScript framework. It was originally developed by Hevery and Adam Abrons. Now it's maintained by Google. Angular Js is light weight and easy to learn. It is perfect in Single Page Application projects. Angular Js is open source, free of cost and easy to handle.

 

Solution

 

Let's do some coding part. In the below example the code part contain two HTML input, First Number and Second Number.

<h3>Multiplication of two Numbers using AngularJS</h3>

<div ng-app="">

    <p>First Number:
        <input type="number" ng-model="num1" ng-init="num1=0" />
    </p>
    <p>Second Number:
        <input type="number" ng-model="num2" ng-init="num2=0" />
    </p>
    <p>Sum: {{ num1 * num2 }}</p>
</div>

AngularJS Reference 

 

AngularJS library written in JavaScript. Angular js reference file is given below.

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

The AngularJS Major Components

• ng-app
• ng-model
• ng-bind

Important Knowledge

• The expressions are written inside the {{ expression }}.
• ng-model directive help to bind the value in html control.the above solution we use "num1" it will contain the first input value."num2" contain the second input value.
• ng-app directive define the angular js application.
• The ng-init directive initializes application data.in this solution num1 and num2 assigned "0" or "Zero" value.so we get  "0" on the runtime in the both html textbox.
• "*" Will help to multiple both input value inside the expression {{ num1 * num2 }}.

Output of the above solution.. 

 

 

Example

 

Jsfiddle Demo :  Multiplication of two Numbers using AngularJS