Daily programming note — Custom AngularJS Service : GET Request

Karena yang modular itu udah penting


Saya baru beberapa hari ini mulai mengenali AngularJs. overall sangat menarik untuk dipelajari lebih lanjut dan saya harap dalam beberapa tahun kedepan angularjs menjadi sebuah standard tersendiri untuk membangun web application.

Hari ini saya mencoba-coba untuk membuat service saya sendiri di angularjs. Menurut saya ide dan konsep dari service ini sendiri cukup menarik untuk didalami lebih lanjut karena dapat memisahkan tugas — tugas yang harus dilakukan oleh aplikasi kita ke modul/service tersendiri.

Asumsi saya telah membangun sebuah web service sederhana yang memiliki endpoint /resource yang akan menghasilkan response dalam bentuk JSON sebagai berikut


{
“content”: “Hello World”,
“id”: “461c5cae-55a4–4f3c-85e0–929c65a7bdd5”
}

Disini saya akan membuat sebuah servis yang melakukan pemanggilan http request ke endpoint tersebut.

Saya membuat service.js sebagai file yang digunakan untuk menampung semua service yang saya butuhkan dalam contoh kali ini

app.service(‘testService’, function($http){
return {
execute : function() {
return $http.get(‘/resource’).then(function(response) {
return response.data;
});
}
}
});

Untuk inisiasi service, aplikasi haru memanggil method .service() di konteks angular module. method .service() membutuhkan paling tidak 2 parameter yaitu nama dari service dan callback function.

pada callback function kita harus mengembalikan fungsi yang terjadi apabila kita melakukan pemanggilan pada service tersebut. Dalam kasus ini, apabila saya melakukan pemanggilan method execute maka saya akan mengembalikan respon dari pemanggilan service $http.

Untuk implementasi service ini ada terdapat pada controller

app.controller(“home”, function($scope, testService)
{
testService.execute().then(function(data){
$scope.greeting = data;
});
});

pada inisiasi controller, kita harus menempatkan service yang telah dibuat yaitu testService dengan begitu kita dapat menggunakan service tersebut.

testService.execute() merupakan pemanggilan method yang terdapat dalam service tersebut. Dengan melakukan pemanggilan ini, kita mendapatkan object yang telah diproses pada service.

Penggunaan service memang sangat dibutuhkan dalam pembangunan aplikasi web angularjs. Memisahkan logika utama program dan modul-modul opsional kedalam service merupakan hal yang sudah lumrah dalam pengembangan software, sehingga dengan penggunaan service, dapat memudahkan kita ketika bekerja dalam sebuah tim dan membuat software menjadi lebih mudah untuk dikembangkan (scaling) ketika ingin menambahkan fitur-fitur/ memperbaiki bug di kedepannya.

Reference :

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.