Dasar-Dasar yang Dipelajari di Dalam Angular JS Part 4.2

Halo teman teman pada tutorial kali ini saya akan melanjutkan dari tutorial sebelumnya, pada tutorial kali ini saya akan menjelaskan tentang Dasar-Dasar yang dipelajari di Dalam Angular JS Part 4.2 pada tutorial Dasar-Dasar yang dipelajari di Dalam Angular JS Part 4.2 ini saya akan menjelaskan tentang ng-click.

ng-click pada angular berfungsi untuk menjalankan sebuah perintah pada angular untuk menjalankan sesuatu ketika di click

oke teman teman kita langsung saja berikut Dasar-Dasar yang dipelajari di Dalam Angular JS Part 4.2 menggunakan ng-click

yang pertama silahkan buka text editornya kemudian silahkan simpan script dibawah ini dengan nama index.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<style>
	img{width:50px; cursor:pointer;}
	.container{width:500px; margin:auto}
	article{background-color:gray;}
	span{font-size:65px;}
	.jarak {margin-right:20px; float:left;}
	.bottom{background-color:#e1e1d6; height:80px; }
</style>

<body>
<div ng-app="myApp" ng-controller="myCtrl">
	
	<div class="container">
		<article>
			<div class="top">
				<center><h1>"ng-click"</h1></center>
				<p>
					Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
					Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
					when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
					It has survived not only five centuries, 
					but also the leap into electronic typesetting, remaining essentially unchanged. 
					It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
					and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
				</p>
			</div>
			
			<div class="bottom">
				<div class="jarak">
					<a ng-click="count = count + 1"><img src="Dasar-Dasar yang dipelajari di Dalam Angular JS Part 4.2-1.png"></a>
					<span>{{ count }}</span>
				</div>

				<div class="jarak">
					<a ng-click="count2 = count2 + 1"><img src="Dasar-Dasar yang dipelajari di Dalam Angular JS Part 4.2-2.png"></a>
					<span>{{ count2 }}</span>
				</div>

				<div class="jarak">
					<a ng-click="count3 = count3 + 1"><img src="Dasar-Dasar yang dipelajari di Dalam Angular JS Part 4.2-3.png"></a>
					<span>{{ count3 }}</span>
				</div>
			</div>
	
		</article>
	</div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
	$scope.count2 = 0;
	$scope.count3 = 0;
});
</script> 

</body>
</html>

berikutnya siahkan di save dan jalan kan pada browser nya maka hasilnya siperti dibawah ini,

• sebelum di klik

• setelah di klik

bagai mana teman teman cukup mudah bukan, Dasar-Dasar yang dipelajari di Dalam Angular JS Part 4.2, mengenai ng-click

untuk materi berikutnya saya akan menjelaskan tentang Dasar-Dasar yang dipelajari di Dalam Angular JS Part 4.3, mengenai ng-model

oke sekian tutorial saya kali ini semoga bermanfaat

Terimakasih