Multiplication of Two Numbers Using AngularJS

Introduction

In this article, we will discuss multiplication of two numbers using AngularJS.

AngularJS is a JavaScript framework originally developed by Hevery and Adam Abrons. Now it’s maintained by Google. AngularJS is lightweight and easy to learn. It is perfect in Single Page Application projects. It is open source, free of cost, and easy to handle.

Solution

Let’s do some coding. In the below example, the code contains two HTML inputs: First Number and Second Number.

<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 

The AngularJS library is written in JavaScript. The AngularJS 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 num1 contains the first input value. num2 contains the second input value.
• ng-app directive defines the AngularJS application.
• The ng-init directive initializes the application data. In this solution, num1 and num2 are assigned “0” or Zero. So, we get sum "0" on the runtime in the both HTML textboxes.
• "*" helps to multiply both input value inside the expression {{ num1 * num2 }}

Output

Output of the above solution.

Example

JSFiddle Demo – http://jsfiddle.net/rajeeshmenoth/294k52a9/