For beginners to start a very basic work in Angular
index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" initial-scale="1.0" content="width=device-width" user-scalable="yes"/>
<title>Calculator UI</title>
<script src="libs/angular.min.js"></script>
<link rel="stylesheet" href="css/styles.css"/>
<script src="controller/calculator.js" type="text/javascript"></script>
</head>
<body ng-app="calculatorPrj">
<section class="calculatorBase" ng-controller="MyCtrl">
<article class="displayArea" ><span name="output" ng-class="{'long': (output.length > 14), 'verylong': (output.length > 18)}" ng-model="numLimit">{{output | limitTo: numLimit}}</span></article>
<article class="buttonsArea">
<!-- Operators button -->
<button type="button" class="calc-button" ng-click='operate("/")' >÷</button>
<button type="button" class="calc-button" ng-click='operate("*")' >*</button>
<button type="button" class="calc-button" ng-click='operate("-")' >-</button>
<button type="button" class="calc-button" ng-click='operate("+")' >+</button>
<!-- Number button -->
<button class="calc-button" ng-disabled="isDisabled" ng-model="isDisabled" ng-click="sendValue($index)" ng-repeat="n in [0,1,2,3,4,5,6,7,8,9]">{{n}}</button>
<!-- Opertaion button -->
<button type="button" ng-disabled="isDisabled" ng-model="isDisabled" class="calc-button" ng-click="updateOutput('.')">.</button>
<button type="button" class="calc-button" ng-click="disableClick(1)">X</button>
<button type="button" ng-disabled="isDisabled" ng-model="isDisabled" class="calc-button" ng-click="resetDisplayBox()">AC</button>
<button type="button" ng-disabled="isDisabled" ng-model="isDisabled" class="calc-button btnEquals" ng-click='equal()'>=</button>
</article>
</section>
</body>
</html>
styles.css
@charset "utf-8";
/* CSS Document */
html, body{
height:100%;
width:100%;
}
body{
font-family:Georgia, "Times New Roman", Times, serif;
margin:0 auto;
background: -moz-linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 100%);
/* ff3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(0,0,0,1)));
/* safari4+,chrome */
background: -webkit-linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 100%);
/* safari5.1+,chrome10+ */
background: -o-linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 100%);
/* opera 11.10+ */
background: -ms-linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 100%);
/* ie10+ */
background: linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 100%);
/* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 );
/* ie6-9 */
}
.calculatorBase{
position: relative;
margin:0 auto;
background:#CCC;
margin-top:1.5em;
width:300px;
}
.displayArea{
float:right;
min-height:60px;
background:#3a4655;
width:100%;
position:relative;
top:2px;
margin:1px -1px;
border:1px solid black;
width:297px;
}
.displayArea span{
color:#FFF;
font-size:2em;
float:right;
position: relative;
top: 15px;
right: 20px;
}
.buttonsArea{
height:20%;
width:100%;
min-height:380px;
background:#404d5e;
text-align:center;
margin-top:10px;
display:block;
border:1px solid white;
}
.calc-button {
background-color: #4CAF50;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 28px;
margin: 4px 7px;
cursor: pointer;
width:22.5%;
}
.btnEquals{
width:72%;
}
.long{
font-size:1.5em !important;
top: 20px !important;
}
.verylong{
font-size:1em !important;
top: 25px !important;
}
calculator.js
var myApp = angular.module('calculatorPrj', []);
//filter to format values for further calculation
myApp.filter('removeCommasFromNum', function() {
return function(input) {
return input.replace(/,\s?/g, "");
};
});
function MyCtrl($scope, $filter) {
$scope.output = "0";
$scope.inOperation = false;
$scope.inOperationUse = false;
$scope.num1 = 0;
$scope.num2 = 0;
$scope.result = 0;
$scope.operator = "";
$scope.flag = 0;
$scope.disableClick = function(n) {
if (String($scope.output).length > 1) {
var newStringvalue = ($scope.output).slice(0, -1);
$scope.output = $filter('removeCommasFromNum')(newStringvalue);
} else {
$scope.output = 0;
$scope.inOperation = false;
$scope.isDisabled = false;
}
return false;
}
$scope.sendValue = function(btn) {
$scope.numLimit = 28;
$scope.isDisabled = false;
console.log(String($scope.output).length >= $scope.numLimit)
if (String($scope.output).length >= $scope.numLimit) {
console.log("$scope.inOperation ");
$scope.isDisabled = true;
}
if ($scope.inOperation == false) {
if ($scope.output == "0") {
$scope.output = btn;
$scope.num1 = String(btn);
} else {
$scope.output += String(btn);
$scope.num1 += String(btn);
}
} else {
$scope.output += String(btn);
if ($scope.num2 == 0) {
$scope.num2 = String(btn);
} else {
$scope.num2 += String(btn);
}
}
};
$scope.operate = function(op) {
if ($scope.output && !$scope.inOperationUse) {
$scope.operator = op;
$scope.num1 = $filter('removeCommasFromNum')($scope.output);
$scope.output += op;
$scope.inOperation = true;
$scope.inOperationUse = true;
}
};
$scope.equal = function() {
if ($scope.inOperationUse) {
switch ($scope.operator) {
case "+":
console.log("Plus.. " + ($scope.num1) + ' ' + $scope.num2);
$scope.result = Number($scope.num1) + Number($scope.num2);
break;
case "-":
console.log("Minus.. " + ($scope.num1) + ' ' + $scope.num2);
$scope.result = Number($scope.num1) - Number($scope.num2);
break;
case "*":
console.log("Multiply.. " + ($scope.num1) + ' ' + $scope.num2);
$scope.result = Number($scope.num1) * Number($scope.num2);
break;
case "/":
console.log("Division.. " + ($scope.num1) + ' ' + $scope.num2);
$scope.result = Number($scope.num1) / Number($scope.num2);
break;
}
console.log("Before Formatting:: " + $scope.output);
$scope.output = $filter('number')($scope.result);
console.log("After Formatting:: " + $scope.output);
$scope.num2 = 0;
$scope.inOperationUse = false;
}
};
$scope.resetDisplayBox = function() {
$scope.output = "0";
$scope.num1 = 0;
$scope.result = 0;
$scope.num2 = 0;
$scope.operator = "";
}
}
myApp.controller('MyCtrl', MyCtrl);
Output:
Output:
