Sunday, September 6, 2015

Iseng iseng buat kalkulator pake angularJS

Iseng iseng buat kalkulator pake angularJS
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.

strukture folder program kalkulator
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
demo tangkap layar program kalkulator


Mungkin cukup sekian dulu sharing kali ini, jika ada yang di tanyakan silahkan komen aja :D

Referensi

Saya hanya seorang "newbie" yang baru bisa ngoding lohor kemarin.


EmoticonEmoticon