Contoh Penggunaan http Service pada AngularJS
Halo teman teman di panduan kali ini saya akan menjelaskan mengenai Contoh Pemakaian http Service di AngularJS, bagi menjalankan http service di AngularJS kita menggunakan sebuah komponen yaitu $http di AngularJS, bagi mengambil sebuah data dari json yang berasal dari Web API, nantinya akan kita tampilkan lewat AngularJS.
Web API yang akan kita gunakan nantinya yaitu berfungsi bagi membangun sebuah program yang berhubungan dengan data.
Oke teman teman biar lebih paham lagi kita seketika saja masuk ke study casenya mengenai Contoh Pemakaian http Service di AngularJS
Langkah pertama-tama yang mesti kita bikin terlebih dahulu yaitu merancang module dan controller, nah silahkan teman teman folder yang bernama js, dan kemudian simpan script dibawah ini dengan nama app.js didalam folder js
var app=angular.module('FirstApp',[]);
app.service('UsersService', ['$http',function($http){
this.index=function(){
return $http.get('http://jsonplaceholder.typicode.com/posts/1/comments');
}
}]);Seperti yang teman teman lihat di script diatas terlihat saya mengunakan $http bagi menghubungkannya, dan diantara method yang dimiliki oleh $http yakni get, yang berfungsi bagi mengambil data yang terletak di file tertentu, dan di contoh di atas saya pun menggunakan http://jsonplaceholder.typicode.com/posts/1/comments bagi mengambil datanya.
Berikutnya kita akan bikin sebuah folder baru didalam folder js, dengan nama folder controller dan silahkan teman teman simpan script dibawah ini dengan nama MainController.js di pada folder controller
app.controller('MainController',['$scope','UsersService', function($scope,UsersService){
$scope.title=Contoh Pemakaian http Service di AngularJS;
UsersService.index().success(function(data){
$scope.users=data;
});
}]);Berikutnya kita akan bikin sebuah file yang bernama index.html yang berfungsi bagi mengambil data dari Web API, dan silahkan teman teman simpan script dibawah ini dengan nama index.html
<!DOCTYPE html>
<html>
<head>
<title>Belajar AngularJs</title>
</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/controller/MainController.js></script>
<body ng-app=FirstApp>
<div ng-controller=MainController>
{{title}}
<hr/>
<table border=1 cellspacing=0>
<tr>
<th>Id</th>
<th>Name</th>
<th>Username</th>
<th>Email</th>
</tr>
<tr ng-repeat=tampil in users>
<td>{{tampil.id}}</td>
<td>{{tampil.name}}</td>
<td>{{tampil.body}}</td>
<td>{{tampil.email}}</td>
</tr>
</table>
</div>
</body>
</html>
Dan apabila segala data berhasil/success, karenanya data yang diperoleh akan di masukan kedalam variable yang bernama users, seperti dibawah ini,
Oke teman teman bagai mana Contoh Pemakaian http Service di AngularJS, nya lumayan gampang bukan.
Sekianlah panduan saya kali ini semoga bermanfaat,
Terimakasih.
Sumber https://kursuswebsite.org
