Contoh Penggunaan http Service pada AngularJS

Halo teman teman pada tutorial kali ini saya akan menjelaskan tentang Contoh Penggunaan http Service pada AngularJS, untuk menjalankan http service pada AngularJS kita menggunakan sebuah komponen yaitu $http pada AngularJS, untuk mengambil sebuah data dari json yang berasal dari Web API, nantinya akan kita tampilkan melalui AngularJS.

Web API yang akan kita gunakan nantinya yaitu berfungsi untuk membangun sebuah aplikasi yang berhubungan dengan data.

Oke teman teman biar lebih paham lagi kita langsung saja masuk ke study casenya tentang Contoh Penggunaan http Service pada AngularJS

Langkah pertama yang harus kita buat terlebih dahulu yaitu membuat 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 pada script diatas terlihat saya mengunakan $http untuk menghubungkannya, dan salah satu method yang dimiliki oleh $http adalah get, yang berfungsi untuk mengambil data yang terletak pada file tertentu, dan pada contoh di atas saya juga menggunakan http://jsonplaceholder.typicode.com/posts/1/comments untuk mengambil datanya.

Berikutnya kita akan buat sebuah folder baru didalam folder js, dengan nama folder controller dan silahkan teman teman simpan script dibawah ini dengan nama MainController.js di dalam folder controller

app.controller('MainController',['$scope','UsersService', function($scope,UsersService){
	$scope.title="Contoh Penggunaan http Service pada AngularJS";
	UsersService.index().success(function(data){
	$scope.users=data;
});
}]);

Selanjutnya kita akan buat sebuah file yang bernama index.html yang berfungsi untuk 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 jika semua data berhasil/success, maka data yang diperoleh akan di masukan kedalam variable yang bernama users, seperti dibawah ini,

Oke teman teman bagai mana Contoh Penggunaan http Service pada AngularJS, nya cukup mudah bukan.

Sekian tutorial saya kali ini semoga bermanfaat,

Terimakasih.

Contoh Penggunaan http Service pada AngularJS

Kategori