Fungsi Service pada AngularJS

Halo teman teman pada tutorial kali ini saya akan membahas tentang Fungsi Service pada AngularJS, Fungsi Service pada AngularJS, sebenarnya hampir sama dengan factory, cuman perbedaan nya adalah jika kita memasukan sebuah nilai yang berada pada factory maka nilai output yang akan dihasilkan itu juga berasal dari factory, tapi pada service nilai yang dimasukan berasal dari service itu sendiri.

Service pada AngularJS bekerja pada module dengan menggunakan method service, seperti script dibawah ini.

var app=angular.module('App',[]);
app.service('myService', function(){
this.methodA=function(){
...
}
this.methodB=function(){
...
}
});

Pada script di atas terlihat terlihat sebuah module dengan menggunakan method service, nah untuk implementasinya kita akan membuat sebuah kalkulator sederhana dengan menggunakan service.

Langkah pertama yang harus kita buat yaitu, silahkan teman teman simpan script dibawah ini dengan nama index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Fungsi Service pada AngularJS</title>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%20%20%20%20%20%20%20%20input%20%7Bwidth%3A%20200px%3B%20height%3A%2030px%3B%20font-size%3A%2028px%3B%7D%0A%20%20%20%20%20%20%20%20button%20%7Bbackground%3A%20red%3B%20width%3A%2050px%3B%20height%3A%2050px%3B%20cursor%3Apointer%3B%20color%3A%20%23fff%7D%0A%20%20%20%20%20%20%20%20span%20%7Bcolor%3A%20green%3B%20font-size%3A%2030px%3B%20font-weight%3A%20bold%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
  </head>
	    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.6%2Fangular.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22js%2Fapp.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20%20type%3D%22text%2Fjavascript%22%20src%3D%22js%2Fcontrollers%2FMainController.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<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 buat sebuah modul dengan menggunakan method service, caranya yaitu dan silahkan teman teman simpan script dibawah ini dengan nama app.js, didalam folder js, dan silahkan simpan script dibawah ini pada file app.js

var app=angular.module('FirstApp',[]);
app.service('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;
});

Selanjutnya kita akan buat controllernya silahkan teman teman buat sebuah folder baru dengan nama controller dan di dalam folder tersebut kita akan buat sebuah file baru dengan nama MainController.js, dan silahkan teman teman simpan script dibawah ini pad file tersebut,

app.controller('MainController',['$scope','KalkulatorFactory',function($scope,KalkulatorFactory){
$scope.title='Membuat Kalkulator Menggunakan Service';
$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);
}
}]);

Nah berikutnya kita akan coba jalan file index.html nya, maka hasilnya seperti di bawah ini.

Bagai mana teman teman Fungsi Service pada AngularJS, nya cukup mudah bukan

Sekian tutorial saya kali ini tentang Fungsi Service pada AngularJS semoga bermanfaat

Terimakasih

Kategori