Step (1): Add ASP.NET page and write the following in body tag:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Calculator.aspx.cs" Inherits="Calculator" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="Caculator.js"></script>
</head>
<body>
<form id="form1" runat="server">
<h2>Calculator program in AngularJS:</h2>
<div>
<div ng-app="CalculatorApp" ng-controller="CalculatorController">
<p>
<asp:TextBox ID="txtFirstNo" runat="server" type="number" ng-model="a" placeholder="Enter first number"></asp:TextBox>
</p>
<p>
<asp:TextBox ID="TextBox1" runat="server" type="number" ng-model="b" placeholder="Enter second number"></asp:TextBox>
</p>
<p>
Select Operation:
<asp:DropDownList ID="ddlOption" runat="server" ng-model="operator">
<asp:ListItem Text="+" Value="+"></asp:ListItem>
<asp:ListItem Text="-" Value="-"></asp:ListItem>
<asp:ListItem Text="*" Value="*"></asp:ListItem>
<asp:ListItem Text="/" Value="/"></asp:ListItem>
</asp:DropDownList>
</p>
<p>{{ result() }}</p>
</div>
</div>
</form>
</body>
</html>
Step (2): Add a js file named is 'Caculator.js' and write the following code:
angular.module('CalculatorApp', [])
.controller('CalculatorController', function ($scope) {
$scope.result = function () {
if ($scope.operator == '+') {
return $scope.a + $scope.b;
}
if ($scope.operator == '-') {
return $scope.a - $scope.b;
}
if ($scope.operator == '*') {
return $scope.a * $scope.b;
}
if ($scope.operator == '/') {
return $scope.a / $scope.b;
}
};
});
Step (3): Now run the code and enjoy:
Useful article...
ReplyDeleteThankx