Iseng iseng buat kalkulator pake 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.
Code
index.html
app.js
Demo
Mungkin cukup sekian dulu sharing kali ini, jika ada yang di tanyakan silahkan komen aja :D
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.html
<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>
app.js
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