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

Bugsnag monitors application stability, so you can make data-driven decisions on whether you should be building new features, or fixing bugs. Learn more.

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/

Monitor application stability with Bugsnag to decide if your engineering team should be building new features on your roadmap or fixing bugs to stabilize your application.Try it free.

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 }}