Cara Menggunakan Factory pada Angular JS Part 2
Halo teman teman di di panduan Cara Menggunakan factory di Angular JS Part 2 kali ini bagi implementasinya kita akan mencoba merancang sebuah sebuah kalkulator sederhana menggunakan factory, kalau teman teman masih bingung dengan factory teman teman lazim lihat di panduan sebelumnya di Cara Menggunakan factory pada Angular JS Part 1.
Oke teman teman kita seketika saja berikut Cara Menggunakan factory di Angular JS Part 2
Seperti yang kita ketahui bahwa kalkulator mempunyai 4 operasi basic seperti : tambah, kurang, untuk, dan kali, dan bagi penyusunan kalkulator menggunakan factory ini tentu kita telah berfikir bahwa nilai yang nantinya yang akan kita input haruslah bersifat dinamis, yang maksudnya yaitu kita memerlukan sebuah parameter supaya kalkulator yang kan kita bikin nanti bersifat dinamis.
Yang perlu teman teman ketahui pun bahwa Factory didalam Angular JS, pun dapat menerima parameter, yang perlu kita ketahui bahwa nilai yang dimasukan yaitu sebuah nilai kembalian dari factory. Bagi lebih jelasnya kita seketika saja ke study casenya.
Langkah pertama-tama yang akan kita bikin yaitu, silahkan teman teman simpan script dibawah ini dengan nama index.html
<!DOCTYPE html>
<html>
<head>
<title>Cara Menggunakan factory di Angular JS Part 2</title>
<style type=text/css>
input {width: 200px; height: 30px; font-size: 28px;}
button {background: green; width: 50px; height: 50px; cursor:pointer;}
span {color: red; font-size: 30px; font-weight: bold}
</style>
</head>
<script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js></script>
<script type=text/javascript src=js/app.js></script>
<script type=text/javascript src=js/controllers/MainController.js></script>
<body ng-app=FirstApp>
<div ng-controller=MainController>
{{title}}
<hr/>
<div>
<table>
<form>
<tr>
<td><input type=text ng-model=angka1 placeholder=angka 1></td>
</tr>
<tr>
<td><input type=text ng-model=angka2 placeholder=angka 2></td>
</tr>
<tr>
<td>Hasil : <span>{{hasil}}</span></td>
</tr>
<tr>
<td>
<button ng-click=penambahan()>+</button>
<button ng-click=pengurangan()>-</button>
<button ng-click=perkalian()>*</button>
<button ng-click=pembagian()>/</button>
</td>
</tr>
</form>
</table>
</div>
</div>
</body>
</html>
Kemudian kita akan bikin sebuah folder yang bernama js di pada folder tersebut kita akan bikin sebuah file yang bernama app.js di pada file tersebut silahkan teman teman simpan script dibawah ini di file app.js
var app=angular.module('FirstApp',[]);
app.factory('KalkulatorFactory', function(){
var kalkulator={};
kalkulator.tambah=function(angka1, angka2){
return parseInt(angka1)+parseInt(angka2);
};
kalkulator.kurang=function(angka1, angka2){
return angka1-angka2;
};
kalkulator.kali=function(angka1, angka2){
return angka1*angka2;
};
kalkulator.untuk=function(angka1, angka2){
return angka1/angka2;
};
return kalkulator;
});Berikutnya di pada folder js kita akan bikin sebuah folder baru yang bernama controller, di pada folder controller tersebut kita akan bikin sebuah file yang bernama MainController.js, apabila telah silahkan teman teman simpan script dibawah ini di file tersebut.
app.controller('MainController',['$scope','KalkulatorFactory',function($scope,KalkulatorFactory){
$scope.title='Membangun Kalkulator Menggunakan Factory';
$scope.penambahan=function(){
$scope.hasil=KalkulatorFactory.tambah($scope.angka1,$scope.angka2);
}
$scope.pengurangan=function(){
$scope.hasil=KalkulatorFactory.kurang($scope.angka1,$scope.angka2);
}
$scope.perkalian=function(){
$scope.hasil=KalkulatorFactory.kali($scope.angka1,$scope.angka2);
}
$scope.pembagian=function(){
$scope.hasil=KalkulatorFactory.untuk($scope.angka1,$scope.angka2);
}
}]);Seandainya telah silahkan di save segala filenya dan coba jalan kan di browsernya karenanya hasilnya kan seperti dibawah ini,
Bagaimana teman teman mengenai Cara Menggunakan factory di Angular JS Part 2, nya lumayan gampang bukan.
Demikian panduan saya kali ini semoga bermanfaat.
Terimakasih…
Cara Penggunaan Factory pada Angular JS part 1
Sumber https://kursuswebsite.org
