Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

Introduction

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.

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.

Image title

Example

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

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:
angular ,javascript ,angularjs ,framework

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}