Bab 3 Service

Materi yang dipelajari pada bab ini :

Value
Factory
Service
Provider
Constant

Ketika aplikasi yang kita kembangkan merupakan aplikasi yang besar, maka akan lebih baik jika kita memecah-mecahnya menjadi bagian yang terpisah yang memiliki fungsi masing-masing. Tujuan pemecahan ini supaya kode menjadi rapi, tidak tumplek blek menjadi satu di controller yang sangat membingungkan. Untuk keperluan ini AngularJs menyediakan 2 buah senjata : dependency injection dan service.

3.1 Value

Value di AngularJs digunakan sebagai semacam dictionary yang berisi key/kunci dan value/nilai. Nilai yang digunakan bisa berupa tipe data apa saja, string, angka maupun object. Value ini nantinya di-inject baik ke controller, factory, maupun service tergantung kebutuhan.

Sebuah Value merupakan bagian dari module, jadi untuk membuatnya kita menggunakan method value pada module.

var app=angular.module('MyApp',[]);
app.value('string','Belajar AngularJs Service');
app.value('number',100);
app.value('object',{'title':'AngularJs Service','desc':'Belajar'})

Pada kode di atas, parameter pertama adalah nama dari value dan parameter kedua adalah isi nya. Setelah mendefiniskan value, kita bisa meng-inject-nya di controller.

app.controller('MainController',['$scope','string',function($scope, string){
  console.log(string);
}]);

Cek hasilnya pada console di browser.

Variabel string yang di-inject pada kode di atas adalah berasal dari value yang juga bernama string yang berisi Belajar AngularJs Service. Nama keduanya harus persis sama ketika digunakan.

3.2 Factory

Jika Value terlihat kok gitu doang ya? maka pembaca pasti akan merasa senang jika sudah berkenalan dengan factory.

Berbeda dengan value yang nilainya di-hard code sehingga tidak bersifat dinamis maka factory bisa memberikan nilai yang dinamis. Yang perlu diingat dari factory adalah, saat di-inject nanti, yang di-inject bukanlah factory itu sendiri tetapi nilai yang dikembalikan olehnya.

Factory juga dibuat di module, kali ini menggunakan method yang bernama factory.

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

app.factory('myFactory', function(){
  return 'Berasal dari dalam Factory';
});

Cara meng-inject-nya sama persis dengan value, perhatikan kode di bawah ini sebagai referensi.

app.controller('MainController',['$scope','myFactory',function($scope, myFactory){
  console.log(myFactory);
}]);

Sama dengan Value, nama yang di-inject juga sama dengan nama factory yang kita definisikan saat pembuatannya. Cek hasilnya pada console browser.

Kurang aplikatif ya contohnya?. Oke yang agak mendingan saya berikan contoh factory untuk aplikasi kalkulator.

Kalkulator memiliki 4 operasi dasar : tambah, kurang, kali, bagi. Tentu sudah terpikirkan bahwa nilai inputan harus bersifat dinamis yang artinya berarti kita memerlukan parameter untuk menangani hal yang bersifat dinamis tersebut. Pertanyaanya, bisakah factory menerima parameter?.

Jawaban dari pertanyaan di atas adalah bisa, dengan memahami bahwa yang di-inject adalah nilai kembalian dari factory, bukan factory itu sendiri maka kita bisa membuat sebuah factory seperti di bawah ini.

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

app.factory('KalkulatorFactory', function(){ 
    var kalkulator={}; 

    kalkulator.tambah=function(angkaA, angkaB){ 
      return parseInt(angkaA)+parseInt(angkaB); 
    }; 

    kalkulator.kurang=function(angkaA, angkaB){
      return angkaA-angkaB; 
    }; 

    kalkulator.kali=function(angkaA, angkaB){ 
      return angkaA*angkaB; 
    }; 

    kalkulator.bagi=function(angkaA, angkaB){ 
      return angkaA/angkaB; 
    }; 

    return kalkulator; 
});

Pada bagian paling awal dari factory terdapat kode var kalkulator={}; . Kode ini digunakan untuk membuat sebuah objek yang bernama kalkulator. Kode berikutnya berturut-turut adalah ke-4 operasi dasar kalkulator yang berupa fungsi yang dimiliki oleh objek kalkulator tadi. Pada bagian akhir objek kalkulator dijadikan nilai kembalian oleh factory. Dengan objek kalkulator dijadikan sebagai nilai kembalian maka nanti kita bisa menggunakaannya untuk melakukan ke-4 operasi dasar. Itulah mengapa saya tekankan dari awal untuk memahami bahwa pada factory yang di-inject adalah nilai kembaliannya .

Halaman view kita buat sebagai jalan bagi pengguna untuk memasukkan angka dan memilih operasi matematika apa yang akan digunakan.

<div ng-controller="MainController"> 
  {{title}} 
  <hr/> 

  Angka 1 :<input type="text" ng-model="angkaA"> </br> 
  Angka 2 :<input type="text" ng-model="angkaB"> </br> 
  Hasil : {{hasil}} 
  </br> 
  </br> 
  <button ng-click="penambahan()">+</button> 
  <button ng-click="pengurangan()">-</button> 
  <button ng-click="perkalian()">*</button> 
  <button ng-click="pembagian()">/</button> 
</div>

Dan terakhir, bagian yang penting adalah di-controller, bagaimana cara kita menggunakan factory untuk melakukan operasi matematika.

app.controller('MainController',['$scope','KalkulatorFactory',function($scope,KalkulatorFactory){ 

      $scope.title='Kalkulator Factory'; 

      $scope.penambahan=function(){ 
        $scope.hasil=KalkulatorFactory.tambah($scope.angkaA,$scope.angkaB); 
      } 

      $scope.pengurangan=function(){   
        $scope.hasil=KalkulatorFactory.kurang($scope.angkaA,$scope.angkaB);
      } 

      $scope.perkalian=function(){ 
        $scope.hasil=KalkulatorFactory.kali($scope.angkaA,$scope.angkaB); 
      } 
      $scope.pembagian=function(){ 
        $scope.hasil=KalkulatorFactory.bagi($scope.angkaA,$scope.angkaB); 
      } 
}]);

Seperti sudah selazimnya, kita meng-inject factory ke dalam controller dengan cara mem-passing nama factory di dalam parameter fungsi. Selanjutnya, karena nilai kembalian dari factory adalah objek kalkulator yang memiliki 4 buah method, maka kita bisa memanggil 4 buah method tersebut di dalam controller.

Coba jalankan di browser, masukkan angka pada text box dan tekan salah satu tombol operasi. Pastikan kode pembaca sudah berjalan dengan benar.

"factory"

3.3 Service

Pendekar ketiga kita adalah service. Kalau saya bilang, service ini mirip dengan factory. Perbedaan antara keduanya adalah, jika pada factory yang di-inject adalah nilai kembalian dari factory maka pada service yang di-inject adalah service itu sendiri.

Service bekerja pada module dengan menggunakan method service.

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

app.service('myService', function(){
  this.methodA=function(){
    ...
  }

  this.methodB=function(){
    ...
  }

});

Dengan masih menggunakan aplikasi kalkulator sebagai contoh, maka kita ubah operasi matematika yang tadinya menggunakan factory menjadi menggunakan service.

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

app.service('KalkulatorService', function(){ 

    this.tambah=function(angkaA, angkaB){ 
        return parseInt(angkaA)+parseInt(angkaB); 
    }; 

    this.kurang=function(angkaA, angkaB){ 
        return angkaA-angkaB; 
    }; 

    this.kali=function(angkaA, angkaB){ 
        return angkaA*angkaB; 
    }; 

    this.bagi=function(angkaA, angkaB){ 
        return angkaA/angkaB; 
    }; 
});

Pada bagian view sama sekali tidak ada perubahan. Pada controller tinggal ubah yang tadinya nama factory kita menjadi nama service kita, sebagai berikut kodenya.

app.controller('MainController',['$scope','KalkulatorService',function($scope,KalkulatorService){ 

      $scope.title='Kalkulator Service'; 
      $scope.penambahan=function(){ 
            $scope.hasil=KalkulatorService.tambah($scope.angkaA,$scope.angkaB); 
      } 

      $scope.pengurangan=function(){ 
            $scope.hasil=KalkulatorService.kurang($scope.angkaA,$scope.angkaB); 
      } 

      $scope.perkalian=function(){ 
            $scope.hasil=KalkulatorService.kali($scope.angkaA,$scope.angkaB); 
      } 

      $scope.pembagian=function(){ 
            $scope.hasil=KalkulatorService.bagi($scope.angkaA,$scope.angkaB); 
      } 
}]);

Pada kode di atas kita yang pertama kita lakukan adalah meng-inject KalkulatorService. Karena service kita ini memang sudah berupa objek dari sananya maka kita bisa menggunakannya untuk memanggil method-method yang dimiliki.

Pada bagian belakang, yang dilakukan oleh AngularJs adalah melakukan instantiasi dari KalkulatorService.

var theService = new KalkulatorService();

Jalankan pada browser dan pastikan kalkulator berjalan dengan benar, tidak ada error yang terjadi.

3.4 Contoh Service Http

Bagian ini memuat contoh penggunaan service yang memanfaatkan komponen $http pada AngularJs untuk mengambil data json yang berasal dari Web API. Nilai balikan json tersebut akan kita tampilkan melalui AngularJs.

Kalau rasanya dari tadi contoh service yang saya berikan terkesan kurang aplikatif maka contoh kali ini saya jamin pasti digunakan di dunia nyata. Penggunaan $http untuk berkomunikasi dengan Web API digunakan jika kita membangun aplikasi yang berhubungan dengan data.

Langkah pertama pasti sudah hafal ya, membuat modul dan controller kemudian pasang pada file view. Jangan lupa untuk memasukkan file .js pada halaman Html.

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

app.controller('MainController',['$scope',function($scope){ 
  $scope.title="AngularJs Http Service"; 
}]);

<body ng-app="MyApp"> 
  <div ng-controller="MainController"> 
    {{title}} 
    <hr/> 

  </div> 
</body>

Selanjutnya kita buat service yang menggunakan $http. Ketikkan kode di bawah ini.

app.service('UsersService', ['$http',function($http){ 

  this.index=function(){ 
      return $http.get('http://jsonplaceholder.typicode.com/users'); 
  } 

}]);

Pada service di atas, kita melakukan injeksi komponen $http sehingga bisa digunakan di dalam service. Salah satu method yang dimiliki oleh $http adalah get , digunakan untuk mengambil data yang terletak pada end point tertentu, dalam contoh di atas adalah http://jsonplaceholder.typicode.com/users.

Kembali ke bagian controller. Ubah controller supaya service di atas bisa digunakan dan panggil method index untuk mengambil data yang berada pada resource server.

app.controller('MainController',['$scope','UsersService', function($scope,UsersService){ 

  $scope.title="AngularJs Http Service"; 

  UsersService.index().success(function(data){ 
    $scope.users=data; 
  }); 

}]);

Apa yang terjadi di atas adalah kita melakukan injeksi service ke dalam controller. Selanjutnya service memanggil method yang dimiliki yaitu index untuk mengambil data dari Web API. Ketika berhasil / success, data yang diperoleh dimasukkan ke dalam variabel yang bernama users.

Kalau sudah sampai sini sih saya rasa pembaca sudah tahu bagaimana cara menampilkan data dari Web API tadi ke view-nya.

<div ng-controller="MainController"> 
    {{title}} 
    <hr/> 

    <table> 
      <tr> 
        <th>Name</th> 
        <th>Username</th> 
        <th>Email</th> 
        <th>Website</th> 
        <th>Company</th> 
      </tr> 

      <tr ng-repeat="u in users"> 
        <td>{{u.name}}</td> 
        <td>{{u.username}}</td> 
        <td>{{u.email}}</td> 
        <td>{{u.website}}</td> 
        <td>{{u.company.name}}</td> 
      </tr> 
    </table> 

  </div>

"http service"

Untuk Http method yang lain seperti POST, DELETE dan PUT penggunaannya hampir sama, nanti akan saya perlihatkan contohnya pada bab yang membahas studi kasus.