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

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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/

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.

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