Multiplication of Two Numbers Using AngularJS

DZone 's Guide to

Multiplication of Two Numbers Using AngularJS

In this article, we will discuss multiplication of two numbers using AngularJS. Read on to see how it's done.

· Web Dev Zone ·
Free Resource


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

Image title

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.


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>Second Number:
 <input type="number" ng-model="num2" ng-init="num2=0" />
 <p>Sum: {{ num1 * num2 }}</p>

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 of the above solution.

Image title


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

angular, angularjs, framework, javascript

Published at DZone with permission of Rajeesh Menoth , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}