Sum of two number using Angular JS

Introduction:
This article explain you to add two numbers using AngularJS framework
Description:
AngularJS lets you extend HTML with new attributes called Directives.

AngularJS Directives
AngularJS directives are extended HTML attributes with the prefix ng-.

The ng-app directive initializes an AngularJS application.


The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.


To implement this we need to write the code like as shown below



HTML :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AngularJSFirstDemo.aspx.cs" 
Inherits="AngularJSFirstDemo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
    <title></title>
    
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h3>Sum of two Numbers using AngularJS</h3>

            <div ng-app="" >

                

                <table style="width:100%">
                    <tr>
                        <td>First Number</td>
                        <td>
                            <input type="number" ng-model="firstNumber"/></td>
                    </tr>
                    <tr>
                        <td>Second Number</td>
                        <td>
                            <input  type="number" ng-model="secondNumber"/></td>
                    </tr>
                    <tr>
                        <td>Sum</td>
                        <td>{{firstNumber+secondNumber}}</td>
                    </tr>
                </table>

                

            </div>

        </div>
    </form>
</body>
</html>

Demo :


Blogger Tips and TricksLatest Tips And TricksBlogger Tricks