AngularJS : Value, Factory dan Services
Mahir Koding – Tiga buah materi yang akan dibahas dalam bagian ini akan bermanfaat untuk membuat kodingan kita menjadi lebih rapi dan terstruktur. Jika sebelumnya kita sudah memecah setiap flow program ke dalam masing-masing controller, bagaimana kalau “seandainya” ada sebuah fungsi atau variabel yang dipakai berkali-kali di beberapa controller? Apakah kita harus menulisnya kembali? Nah, Value, Factory dan Service merupakan solusi atas permasalahan kita tadi.
Ketiganya bertugas seakan-akan sebagai “Helper Class” dimana di dalam class tersebut didefinisikan method/variabel “pembantu” yang akan diinject lalu digunakan secara bersama-sama oleh beberapa controller.
Value
Value di AngularJS biasanya digunakan untuk mendefinisikan variabel global. Nantinya, value ini dapat digunakan di beberapa controller/factory/service jika telah diinject.
Pendefinisian value dilakukan terhadap module app kita.
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - Tutorial</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
</head>
<body ng-app="myApps" ng-controller="shapeController">
</body>
<script type="text/javascript" >
var app = angular.module("myApps", []);
app.value("PI", 3.14);
app.value("title", "Aplikasi Penghitung Luas");
app.controller("shapeController", function(PI, title){
alert(PI);
alert(title);
})
</script>
</html>
Method value() menerima 2 parameter, yang pertama adalah key/namenya, dan yang kedua adalah valuenya. Jangan lupa, ketika ingin menggunakan value yang telah didefinisikan maka kita wajib menginjectnya ke dalam controller melalui parameter.
Factory
Jika value hanya bisa menyimpan variabel, maka di factory kita bisa membuat object yang berisi variabel dan method. Perlu diingat, ketika kita menggunakan factory, yang akan di inject ke controller adalah return value dari factory tersebut.
Untuk mendeklarasikan sebuah factory, kita dapat menggunakan method factory dari module yang telah dibuat.
<body ng-app="myApps" ng-controller="shapeController">
<h1>{{ judulAplikasi }}</h1>
<p>Sisi 1 : <input type="text" ng-model="sisi1"></p>
<p>Sisi 2 : <input type="text" ng-model="sisi2"></p>
<p>
<button ng-click="segitiga()">Luas Segitiga</button>
<button ng-click="persegiPanjang()">Luas Persegi Panjang</button>
</p>
<p>
Result : {{ result }}
</p>
</body>
<script type="text/javascript" >
var app = angular.module("myApps", []);
app.factory("luasFactory", function(){
var obj = {};
obj.factoryName = "Luas Factory";
obj.luasSegitiga = function(a, b){
return (a*b)/2;
}
obj.luasPersegiPanjang = function(a,b){
return a*b;
}
return obj;
})
app.controller("shapeController", function($scope, luasFactory){
$scope.judulAplikasi = luasFactory.factoryName;
$scope.clearForm = function(){
$scope.sisi1 = "";
$scope.sisi2 = "";
}
$scope.persegiPanjang = function(){
$scope.result = luasFactory.luasPersegiPanjang($scope.sisi1, $scope.sisi2);
$scope.clearForm();
}
$scope.segitiga = function(){
$scope.result = luasFactory.luasSegitiga($scope.sisi1, $scope.sisi2);
$scope.clearForm();
}
})
</script>
Dalam contoh di atas, kita telah membuat sebuah object lalu kita membuat 1 buah variabel dan 2 buah function ke dalam object tersebut. Lalu object tersebut akan kita return. Sesuai dengan cara kerja factory, object yang telah kita buat tadi seolah-olah akan diinject ke dalam shapeController. Nantinya, kita tinggal memanggil method/variabel dari factory tersebut untuk digunakan.
Services
Untuk services, bisa dikatakan hampir sama persis dengan Factory. Perbedaannya hanya terletak pada bagian yang diinject. Pada factory, bagian yang diinject ke controller adalah return valuenya. Sedangkan kalau services, yang diinject pada controllernya adalah servicesnya. Service tidak memerlukan return type, tetapi pada saat diinject ke controller, service seakan-akan sudah langsung menjadi sebuah object.
Dengan contoh program yang sama, berikut adalah perbedaannya : (bagian view tidak ada yang diganti)
<script type="text/javascript" >
var app = angular.module("myApps", []);
app.service("luasService", function(){
this.factoryName = "Luas Factory";
this.luasSegitiga = function(a, b){
return (a*b)/2;
}
this.luasPersegiPanjang = function(a,b){
return a*b;
}
})
app.controller("shapeController", function($scope, luasService){
$scope.judulAplikasi = luasService.factoryName;
$scope.clearForm = function(){
$scope.sisi1 = "";
$scope.sisi2 = "";
}
$scope.persegiPanjang = function(){
$scope.result = luasService.luasPersegiPanjang($scope.sisi1, $scope.sisi2);
$scope.clearForm();
}
$scope.segitiga = function(){
$scope.result = luasService.luasSegitiga($scope.sisi1, $scope.sisi2);
$scope.clearForm();
}
})
</script>
Pendeklarasian service menggunakan method service() dari module yang telah dibuat.
Kita langsung bisa menganggap service tersebut adalah sebuah class yang nantinya akan digunakan tanpa dibuat objectnya (static).
Namun, kalau kita perhatikan, AngularJS seolah-olah otomatis menginstansiasi object ketika services tersebut diinject dalam controller.
var luasService = new luasService();
Services tidak selamanya wajib dibuat sendiri. Ada beberapa service yang sudah tersediakan dari AngularJS. Beberapa diantaranya adalah service location, timeout dan http (akan dibahas di materi selanjutnya).
Jika ada pertanyaan yang kurang jelas silahkan berkomentar di bawah. Atau, jika ingin request tutorial juga dapat ke halaman ini. Dukung terus Mahir Koding agar dapat selalu mengupdate artikel dengan share dan like artikel ini. Terima Kasih.
