Lagi Iseng aja, Membuat kalkulator dengan angularJS - Kali ini saya ingin sedikit membahas seputar angular, kebetulan sekarang saya lagi belajar framework javascript yang satu ini. Lumayan enak juga sih pake ini, cepat :) hehehe
Saya abis iseng-iseng buat program kalkulator pake angular. Dan sekarang saya ingin sharing soucecode-nya kepada agan-agan visitor :) .
Persiapan
Untuk tahap pertama yang harus anda lakukan adalah download terlebih dahulu angularnya terlebih dahulu.
Go To Site. Jika sudah, silahkan salin code di bawah ini.
 |
| strukture folder program kalkulator |
Code
index.htmlapp.js
<html ng-app="myapp">
<head>
<title>Kalkulator Angular</title>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body ng-controller="myctrl">
<h1>Simpel Callculator</h1>
<div>
</div>
<div>
<input type="text" size="1" ng-model="angka1">
<span>{{operation}}</span>
<input type="text" size="1" ng-model="angka2">
= <span>{{result}}</span>
</div><br>
<div>
<button ng-click="operate(1)">Add</button>
<button ng-click="operate(2)">Subtraction</button>
<button ng-click="operate(3)">Multiply</button>
<button ng-click="operate(4)">Divide</button>
</div>
</body>
</html>
var app = angular.module('myapp', []);
app.controller('myctrl', function($scope){
$scope.operate = function (code){
var a = +$scope.angka1;
var b = +$scope.angka2;
switch (code){
case 1:
$scope.operation = "+";
$scope.result = a + b;
break;
case 2:
$scope.operation = "-";
$scope.result = a - b;
break;
case 3:
$scope.operation = "*";
$scope.result = a * b;
break;
case 4:
$scope.operation = "/";
$scope.result = a / b;
break;
}
};
});
Demo
Mungkin cukup sekian dulu sharing kali ini, jika ada yang di tanyakan silahkan komen aja :D
0 komentar
Post a Comment