Halo teman teman pada pada tutorial Cara Penggunaan factory pada Angular JS Part 2 kali ini untuk implamentasinya kita akan mencoba membuat sebuah sebuah kalkulator sederhana mengunakan factory, kalau teman teman masih bingung dengan factory teman teman biasa lihat pada tutorial sebelumnya pada Cara Penggunaan factory pada Angular JS Part 1.
Oke teman teman kita langsung saja berikut Cara Penggunaan factory pada Angular JS Part 2
Seperti yang kita ketahui bahwah kalkulator memiliki 4 operasi dasar seperti : tambah, kurang, bagi, dan kali, dan untuk pembuatan kalkulator mengunakan factory ini tentu kita telah berfikir bahwa nilai yang nantinya yang akan kita input hasuslah bersifat dinamis, yang maksudnya yaitu kita memerlukan sebuah parameter supaya kalkulator yang kan kita buat nanti bersifat dianamis.
Yang perlu teman teman ketahui juga bahwa Factory didalam Angular JS, juga dapat menerima parameter, yang perlu kita ketahui bahwa nilai yang dimasukan adalah sebuah nilai kembalian dari factory. Untuk lebih jelasnya kita langsung saja ke study casenya.
langkah pertamana yang akan kita buat yaitu, silahkan teman teman simpan script dibawah ini dengan nama index.html
<!DOCTYPE html>
<html>
<head>
<title>Cara Penggunaan factory pada 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>Dan kemudian kita akan buat sebuah folder yang bernama js di dalam folder tersebut kita akan buat sebuah file yang bernama app.js di dalam file tersebut silahkan teman teman simpan script dibawah ini pada 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.bagi=function(angka1, angka2){
return angka1/angka2;
};
return kalkulator;
});Berikutnya di dalam folder js kita akan buat sebuah folder baru yang bernama controller, di dalam folder controller tersebut kita akan buat sebuah file yang bernama MainController.js, jika sudah silahkan teman teman simpan script dibawah ini pada file tersebut.
app.controller('MainController',['$scope','KalkulatorFactory',function($scope,KalkulatorFactory){
$scope.title='Membuat Kalkulator Mengunakan 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.bagi($scope.angka1,$scope.angka2);
}
}]);Jika sudah silahkan di save semua filenya dan coba jalan kan pada browsernya maka hasilnya kan seperti dibawah ini,
Bagai mana teman teman tentang Cara Penggunaan factory pada Angular JS Part 2, nya cukup mudah bukan.
Sekian tutorial saya kali ini semoga bermanfaat.
Terimakasih…
The post Cara Penggunaan factory pada Angular JS Part 2 appeared first on Kursus Website Terbaik.