Membuat Kalkulator Sederhana dengan Angular

Angular adalah framework javascript yang saat ini sedang populer dikalangan web developer. Karena keunggulan angular yang menarik minat para developer untuk mempelajarinya. Bagi kalian yang masih awan dengan angular disarankan untuk mempelajari dasar javascript terlebih dahulu agar lebih mudah memahami angular. Karena angular ini adalah framework javascript, jadi dasarnya tetap dari javascript. Sesuai dengan judul contoh artikel kali ini kita akan belajar membuat kalkulator sederhana dengan Angular.

Dengan membuat kakulator sederhana diharapkan akan lebih mudah pemahaman tentang angular karena hasilnya langsung bisa kita coba. Langkah awal untuk pembuatan kakulator sederhanan ini tentu kalian harus membuat struktur tampilanya terlebih dahulu menggunakan HTML. Kalian bisa ikuti contoh code dibawah ini untuk mempersingkat waktu pengerjaanya.

kakulator.html

<html ng-app="bindApp">
<head>
	<meta charset="UTF-8">
	<title>Belajar Angulars</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
	<script src="app.js"></script>
</head>
<body ng-controller="bindCtrl">
	<h1>Kakulator Angular</h1>
	<span>{{jenis}}</span>
	<br>
	<input type="text" ng-model="x">
	<input type="text" ng-model="y"> = {{hasil}} <br>
	<button ng-click="hitung(1)">Tambah</button>
	<button ng-click="hitung(2)">Kurang</button>
	<button ng-click="hitung(3)">Bagi</button>
	<button ng-click="hitung(4)">Kali</button>
</body>
</html>

Setelah sudah kalian simpan code diatas dengan format HTML. Sekarang lanjut untuk membuat file javascriptnya. Kalian bisa salin code dibawah ini.

app.js

var app = angular.module('bindApp',[]);

app.controller('bindCtrl', function ($scope){
	$scope.hitung = function (code){
		var x = +$scope.x;
		var y = +$scope.y;
		switch (code){
			case 1: 
				$scope.jenis = "Penjumlahan";
				$scope.hasil = x + y ;
				break;
			case 2: 
				$scope.jenis = "Pengurangan";
				$scope.hasil = x - y ;
				break;
			case 3: 
				$scope.jenis = "Pembagian";
				$scope.hasil = x / y ;
				break;
			case 4: 
				$scope.jenis = "Perkalian";
				$scope.hasil = x * y ;
				break;
		}
	}
});

Setelah sudah kalian simpan dengan format javascript (.js). Kedua file tersebut harus dalam satu folder yang sama agar dapat berjalan dengan lancar. Sekarang untuk melihat hasilnya kalian bisa buka file htmlnya pada browser kalian. Jika berhasil maka tampilanya akan seperti ini.

membuat-kalkulator-sederhana-dengan-angular-rangga1-100717

Kalian bisa isikan angka pada kedua kolom teks tersebut dan coba untuk klik salah satu tombol dibawah dan lihat hasilnya.

membuat-kalkulator-sederhana-dengan-angular-rangga2-100717

Hasil dari angka yang telah dimasukan tadi akan langsung memunculkan nilainya pada saat itu juga tanpa harus mereload ulang halaman web. Itu adalah salah satu keunggulan dari angular. Mudah bukan ?

Sekian pembahasan mengenai bagaimana cara membuat kalkulator sederhana dengan Angular. Semoga bermanfaat.

 

 

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *