Fungsi Service pada AngularJS
Halo teman teman di panduan kali ini saya akan membahas mengenai Guna Service di AngularJS, Guna Service di AngularJS, sebetulnya hampir sama dengan factory, cuman perbedaan nya yakni kalau kita memasukan sebuah nilai yang berada di factory karenanya nilai output yang akan diraih itu pun berasal dari factory, tapi di service nilai yang dimasukan berasal dari service itu sendiri.
Service di AngularJS bekerja di module dengan menggunakan method service, seperti script dibawah ini.
var app=angular.module('App',[]);
app.service('myService', function(){
this.methodA=function(){
...
}
this.methodB=function(){
...
}
});Di script di atas terlihat terlihat sebuah module dengan menggunakan method service, nah bagi implementasinya kita akan merancang sebuah kalkulator sederhana dengan menggunakan service.
Langkah pertama-tama yang mesti kita bikin yaitu, silahkan teman teman simpan script dibawah ini dengan nama index.html
<!DOCTYPE html>
<html>
<head>
<title>Guna Service di AngularJS</title>
<style type=text/css>
input {width: 200px; height: 30px; font-size: 28px;}
button {background: red; width: 50px; height: 50px; cursor:pointer; color: #fff}
span {color: green; 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>
Kemudian kita akan bikin 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 di 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.untuk=function(angka1, angka2){
return angka1/angka2;
};
return kalkulator;
});Berikutnya kita akan bikin controllernya silahkan teman teman bikin sebuah folder baru dengan nama controller dan di pada folder tersebut kita akan bikin 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='Merancang 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.untuk($scope.angka1,$scope.angka2);
}
}]);Nah berikutnya kita akan coba jalan file index.html nya, karenanya hasilnya seperti di bawah ini.
Bagai mana teman teman Guna Service di AngularJS, nya lumayan gampang bukan
Sekianlah panduan saya kali ini mengenai Guna Service di AngularJS semoga bermanfaat
Terimakasih
Sumber https://kursuswebsite.org
